diff options
Diffstat (limited to 'files/ar')
319 files changed, 52917 insertions, 0 deletions
diff --git a/files/ar/_redirects.txt b/files/ar/_redirects.txt new file mode 100644 index 0000000000..5b6e089613 --- /dev/null +++ b/files/ar/_redirects.txt @@ -0,0 +1,37 @@ +# FROM-URL TO-URL +/ar/docs/HTML /ar/docs/Web/HTML +/ar/docs/Introduction /ar/docs/Mozilla/Developer_guide/Introduction +/ar/docs/Learn/CSS/Introduction_to_CSS /en-US/docs/Learn/CSS/First_steps +/ar/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works /en-US/docs/Learn/CSS/First_steps/How_CSS_works +/ar/docs/Learn/CSS/Introduction_to_CSS/Selectors /en-US/docs/Learn/CSS/Building_blocks/Selectors +/ar/docs/Learn/Getting_started_with_the_web/%D8%A3%D8%B3%D8%A7%D8%B3%D9%8A%D8%A7%D8%AA_%D9%84%D8%BA%D8%A9_%D8%AA%D8%B1%D9%85%D9%8A%D8%B2_%D8%A7%D9%84%D9%86%D8%B5_%D8%A7%D9%84%D9%81%D8%A7%D8%A6%D9%82 /ar/docs/Learn/Getting_started_with_the_web/HTML_basics +/ar/docs/Learn/Getting_started_with_the_web/%D8%A7%D9%84%D8%AA%D8%B9%D8%A7%D9%85%D9%84_%D9%85%D8%B9_%D8%A7%D9%84%D9%85%D9%84%D9%81%D8%A7%D8%AA /ar/docs/Learn/Getting_started_with_the_web/Dealing_with_files +/ar/docs/Learn/Getting_started_with_the_web/%D8%AA%D8%AB%D8%A8%D9%8A%D8%AA_%D8%A7%D9%84%D8%A8%D8%B1%D9%85%D8%AC%D9%8A%D8%A7%D8%AA_%D8%A7%D9%84%D8%A3%D8%B3%D8%A7%D8%B3%D9%8A%D8%A9 /ar/docs/Learn/Getting_started_with_the_web/Installing_basic_software +/ar/docs/Learn/Getting_started_with_the_web/%D9%83%D9%8A%D9%81_%D9%8A%D8%AC%D8%A8_%D8%A3%D9%86_%D9%8A%D8%A8%D8%AF%D9%88_%D9%85%D9%88%D9%82%D8%B9%D9%83 /ar/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like +/ar/docs/Learn/HTML/%D9%85%D9%82%D8%AF%D9%85%D8%A9_%D8%A5%D9%84%D9%89_%D9%84%D8%BA%D8%A9_%D8%AA%D8%B1%D9%85%D9%8A%D8%B2_%D8%A7%D9%84%D9%86%D8%B5_%D8%A7%D9%84%D9%81%D8%A7%D8%A6%D9%82 /ar/docs/Learn/HTML/Introduction_to_HTML +/ar/docs/Learn/HTML/%D9%85%D9%82%D8%AF%D9%85%D8%A9_%D8%A5%D9%84%D9%89_%D9%84%D8%BA%D8%A9_%D8%AA%D8%B1%D9%85%D9%8A%D8%B2_%D8%A7%D9%84%D9%86%D8%B5_%D8%A7%D9%84%D9%81%D8%A7%D8%A6%D9%82/Getting_started /ar/docs/Learn/HTML/Introduction_to_HTML/Getting_started +/ar/docs/Learn/HTML/%D9%85%D9%82%D8%AF%D9%85%D8%A9_%D8%A5%D9%84%D9%89_%D9%84%D8%BA%D8%A9_%D8%AA%D8%B1%D9%85%D9%8A%D8%B2_%D8%A7%D9%84%D9%86%D8%B5_%D8%A7%D9%84%D9%81%D8%A7%D8%A6%D9%82/HTML_text_fundamentals /ar/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +/ar/docs/MDN/Contribute/Guidelines /ar/docs/MDN/Guidelines +/ar/docs/MDN/Contribute/Guidelines/Writing_style_guide /ar/docs/MDN/Guidelines/Writing_style_guide +/ar/docs/MDN/Contribute/Tools /ar/docs/MDN/Tools +/ar/docs/MDN/Contribute/Tools/Deleting_pages /ar/docs/MDN/Tools/Deleting_pages +/ar/docs/MDN/Feedback /ar/docs/MDN/Contribute/Feedback +/ar/docs/MDN/Getting_started /ar/docs/MDN/Contribute/Getting_started +/ar/docs/MDN/User_guide /ar/docs/MDN/Tools +/ar/docs/MDN/User_guide/Deleting_pages /ar/docs/MDN/Tools/Deleting_pages +/ar/docs/Web/%D8%AF%D8%B1%D9%88%D8%B3 /ar/docs/Web/Tutorials +/ar/docs/Web/API/HTMLElement.contentEditable /ar/docs/Web/API/HTMLElement/contentEditable +/ar/docs/Web/Apps /ar/docs/Web/%D8%AA%D8%B7%D8%A8%D9%8A%D9%82%D8%A7%D8%AA +/ar/docs/Web/Guide/HTML /ar/docs/Learn/HTML +/ar/docs/Web/Guide/HTML/%D9%85%D9%82%D8%AF%D9%85%D8%A9 /ar/docs/Learn/HTML/Introduction_to_HTML +/ar/docs/Web/HTML/Element /ar/docs/HTML/Element +/ar/docs/Web/HTML/Element/bdo /ar/docs/HTML/Element/bdo +/ar/docs/Web/HTML/Element/headings_elements /ar/docs/HTML/Element/headings_elements +/ar/docs/Web/HTML/Element/hr /ar/docs/HTML/Element/hr +/ar/docs/Web/HTML/Element/i /ar/docs/HTML/Element/i +/ar/docs/Web/HTML/Element/main /ar/docs/HTML/Element/main +/ar/docs/Web/HTML/Element/span /ar/docs/HTML/Element/span +/ar/docs/Web/HTML/Element/tt /ar/docs/HTML/Element/tt +/ar/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types /ar/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types +/ar/docs/Web/JavaScript/Reference/Global_Objects/%D8%B1%D9%8A%D8%A7%D8%B6%D9%8A%D8%A7%D8%AA /ar/docs/Web/JavaScript/Reference/Global_Objects/Math +/ar/docs/en /en-US/ diff --git a/files/ar/_wikihistory.json b/files/ar/_wikihistory.json new file mode 100644 index 0000000000..b3c0700665 --- /dev/null +++ b/files/ar/_wikihistory.json @@ -0,0 +1,1866 @@ +{ + "Games": { + "modified": "2019-09-11T08:38:03.462Z", + "contributors": [ + "SphinxKnight", + "aminezouhair", + "wbamberg" + ] + }, + "Games/Techniques": { + "modified": "2019-01-17T03:24:22.867Z", + "contributors": [ + "wbamberg" + ] + }, + "Games/Techniques/3D_on_the_web": { + "modified": "2019-03-18T21:28:51.724Z", + "contributors": [ + "wbamberg" + ] + }, + "Games/Techniques/3D_on_the_web/Basic_theory": { + "modified": "2019-03-18T21:28:59.194Z", + "contributors": [ + "HusseinYounis" + ] + }, + "Glossary": { + "modified": "2019-03-23T23:11:22.322Z", + "contributors": [ + "wbamberg", + "ahmadnourallah", + "teoli" + ] + }, + "Glossary/API": { + "modified": "2020-08-25T20:10:54.712Z", + "contributors": [ + "duduindo", + "mcqueen10pr" + ] + }, + "Glossary/Accessibility": { + "modified": "2019-03-18T21:35:58.833Z", + "contributors": [ + "ahmadnourallah" + ] + }, + "Glossary/Algorithm": { + "modified": "2019-03-18T21:36:28.768Z", + "contributors": [ + "ahmadnourallah" + ] + }, + "Glossary/Argument": { + "modified": "2019-03-18T21:36:51.297Z", + "contributors": [ + "ahmadnourallah" + ] + }, + "Glossary/Attribute": { + "modified": "2019-03-18T21:36:29.428Z", + "contributors": [ + "ahmadnourallah" + ] + }, + "Glossary/Bandwidth": { + "modified": "2019-06-11T03:12:16.122Z", + "contributors": [ + "aminezouhair" + ] + }, + "Glossary/Blink": { + "modified": "2019-03-18T21:35:41.170Z", + "contributors": [ + "ahmadnourallah" + ] + }, + "Glossary/Boolean": { + "modified": "2019-03-18T21:31:11.758Z", + "contributors": [ + "mestoo" + ] + }, + "Glossary/Browser": { + "modified": "2019-03-18T21:36:31.049Z", + "contributors": [ + "ahmadnourallah" + ] + }, + "Glossary/Compile": { + "modified": "2019-03-18T21:23:37.200Z", + "contributors": [ + "ahmadnourallah" + ] + }, + "Glossary/Computer_Programming": { + "modified": "2019-03-18T21:16:51.875Z", + "contributors": [ + "ahmadnourallah" + ] + }, + "Glossary/Cookie": { + "modified": "2019-03-18T21:36:16.444Z", + "contributors": [ + "ahmadnourallah" + ] + }, + "Glossary/Copyleft": { + "modified": "2019-03-18T21:35:36.953Z", + "contributors": [ + "ahmadnourallah" + ] + }, + "Glossary/DOM": { + "modified": "2019-03-18T20:40:48.174Z", + "contributors": [ + "moussagigawatt" + ] + }, + "Glossary/DOS_attack": { + "modified": "2019-03-18T21:36:23.407Z", + "contributors": [ + "ahmadnourallah" + ] + }, + "Glossary/Data_structure": { + "modified": "2019-03-18T21:36:26.711Z", + "contributors": [ + "ahmadnourallah" + ] + }, + "Glossary/Decryption": { + "modified": "2019-03-18T21:36:31.371Z", + "contributors": [ + "ahmadnourallah" + ] + }, + "Glossary/Denial_of_Service": { + "modified": "2019-01-17T02:56:58.044Z", + "contributors": [ + "ahmadnourallah" + ] + }, + "Glossary/Forbidden_header_name": { + "modified": "2020-06-22T06:31:52.598Z", + "contributors": [ + "AboAeqab" + ] + }, + "Glossary/Function": { + "modified": "2019-03-18T21:36:11.164Z", + "contributors": [ + "ahmadnourallah" + ] + }, + "Glossary/GPL": { + "modified": "2019-03-18T21:35:39.106Z", + "contributors": [ + "ahmadnourallah" + ] + }, + "Glossary/Google_Chrome": { + "modified": "2019-03-23T23:11:25.083Z", + "contributors": [ + "ahmadnourallah", + "billhiba" + ] + }, + "Glossary/Grid_Areas": { + "modified": "2020-06-28T15:51:15.774Z", + "contributors": [ + "mos528884" + ] + }, + "Glossary/Hyperlink": { + "modified": "2019-03-18T21:35:47.475Z", + "contributors": [ + "ahmadnourallah" + ] + }, + "Glossary/Identifier": { + "modified": "2019-03-18T21:36:09.613Z", + "contributors": [ + "ahmadnourallah" + ] + }, + "Glossary/Mozilla_Firefox": { + "modified": "2019-03-18T21:36:31.912Z", + "contributors": [ + "ahmadnourallah" + ] + }, + "Glossary/OOP": { + "modified": "2019-03-18T21:17:28.449Z", + "contributors": [ + "HeSoKa05" + ] + }, + "Glossary/PHP": { + "modified": "2019-06-12T12:19:18.205Z", + "contributors": [ + "aminezouhair" + ] + }, + "Glossary/Parameter": { + "modified": "2019-03-18T21:36:56.678Z", + "contributors": [ + "ahmadnourallah" + ] + }, + "Glossary/Recursion": { + "modified": "2019-03-18T21:36:11.837Z", + "contributors": [ + "ahmadnourallah" + ] + }, + "Glossary/Rendering_engine": { + "modified": "2019-03-18T21:35:46.725Z", + "contributors": [ + "ahmadnourallah" + ] + }, + "Glossary/Search_engine": { + "modified": "2019-03-18T21:36:28.244Z", + "contributors": [ + "ahmadnourallah" + ] + }, + "Glossary/Semantics": { + "modified": "2020-08-29T02:02:08.247Z", + "contributors": [ + "M.M.J", + "ahmadnourallah" + ] + }, + "Glossary/Server": { + "modified": "2019-03-18T21:36:23.269Z", + "contributors": [ + "ahmadnourallah" + ] + }, + "Glossary/String": { + "modified": "2019-03-18T21:36:08.991Z", + "contributors": [ + "ahmadnourallah" + ] + }, + "Glossary/Tag": { + "modified": "2019-03-18T21:35:59.869Z", + "contributors": [ + "ahmadnourallah" + ] + }, + "Glossary/Variable": { + "modified": "2019-03-18T21:36:36.155Z", + "contributors": [ + "ahmadnourallah" + ] + }, + "Glossary/WAI": { + "modified": "2019-03-18T21:35:55.598Z", + "contributors": [ + "ahmadnourallah" + ] + }, + "Glossary/Wrapper": { + "modified": "2019-03-18T21:36:15.120Z", + "contributors": [ + "ahmadnourallah" + ] + }, + "Glossary/array": { + "modified": "2019-03-18T21:36:12.215Z", + "contributors": [ + "ahmadnourallah" + ] + }, + "Glossary/الحروف": { + "modified": "2019-03-18T20:41:14.582Z", + "contributors": [ + "moussagigawatt" + ] + }, + "Glossary/الخاصية": { + "modified": "2019-03-18T20:41:18.902Z", + "contributors": [ + "moussagigawatt" + ] + }, + "Glossary/الدوال_من_الدرجة_الأولى": { + "modified": "2019-03-18T21:43:51.692Z", + "contributors": [ + "ahmadnourallah" + ] + }, + "Glossary/الكائنات": { + "modified": "2019-03-18T21:23:58.693Z", + "contributors": [ + "ahmadnourallah", + "yagoub76" + ] + }, + "Glossary/المجالات": { + "modified": "2019-03-18T20:58:54.465Z", + "contributors": [ + "laloshify" + ] + }, + "HTML/Element": { + "modified": "2019-09-11T08:42:21.522Z", + "contributors": [ + "SphinxKnight", + "moaz_osama_okasha", + "elzoz531", + "teoli", + "HelmiHB" + ] + }, + "HTML/Element/article": { + "modified": "2020-10-15T22:31:03.274Z", + "contributors": [ + "M.M.J", + "a01273477051" + ] + }, + "HTML/Element/bdo": { + "modified": "2020-10-15T22:02:29.578Z", + "contributors": [ + "SphinxKnight", + "zidanlab" + ] + }, + "HTML/Element/headings_elements": { + "modified": "2020-10-15T22:08:39.845Z", + "contributors": [ + "SphinxKnight", + "Alhakem" + ] + }, + "HTML/Element/span": { + "modified": "2020-10-15T22:05:54.978Z", + "contributors": [ + "SphinxKnight", + "moaz_osama_okasha" + ] + }, + "HTML/Element/tt": { + "modified": "2020-10-15T22:05:53.553Z", + "contributors": [ + "SphinxKnight", + "moaz_osama_okasha" + ] + }, + "Learn": { + "modified": "2020-07-16T22:43:37.457Z", + "contributors": [ + "waleed5544", + "svarlamov", + "ahmadnourallah", + "yaser-alazem", + "atefBB", + "AbuShelbayeh", + "Andrew_Pfeiffer" + ] + }, + "Learn/Accessibility": { + "modified": "2020-07-16T22:39:55.334Z", + "contributors": [ + "ahmadnourallah" + ] + }, + "Learn/Accessibility/What_is_accessibility": { + "modified": "2020-07-16T22:40:02.857Z", + "contributors": [ + "ahmadnourallah" + ] + }, + "Learn/CSS": { + "modified": "2020-07-16T22:25:31.838Z", + "contributors": [ + "MOTZ79567", + "abdallahelmalawy", + "ashrafreda", + "chrisdavidmills" + ] + }, + "Learn/CSS/Building_blocks": { + "modified": "2020-07-16T22:28:06.517Z", + "contributors": [ + "salutis" + ] + }, + "Learn/CSS/Building_blocks/Selectors": { + "modified": "2020-07-16T22:28:34.404Z", + "contributors": [ + "mr0111240" + ] + }, + "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors": { + "modified": "2020-07-16T22:28:38.491Z", + "contributors": [ + "Emory" + ] + }, + "Learn/CSS/CSS_layout": { + "modified": "2020-07-16T22:26:28.954Z", + "contributors": [ + "kalalmohammad", + "MNizam0802" + ] + }, + "Learn/CSS/First_steps": { + "modified": "2020-07-16T22:27:38.309Z", + "contributors": [ + "wasim1772" + ] + }, + "Learn/Common_questions": { + "modified": "2020-07-16T22:35:21.349Z", + "contributors": [ + "ahmadnourallah", + "stephaniehobson" + ] + }, + "Learn/Common_questions/What_is_a_web_server": { + "modified": "2020-07-16T22:35:31.003Z", + "contributors": [ + "ahmadnourallah" + ] + }, + "Learn/Common_questions/كيفية_عمل": { + "modified": "2020-09-14T10:55:57.301Z", + "contributors": [ + "hichamikka", + "mestoo" + ] + }, + "Learn/Front-end_web_developer": { + "modified": "2020-09-23T10:36:40.672Z", + "contributors": [ + "Ghaith_Qublan", + "mohamedalisaleh501" + ] + }, + "Learn/Getting_started_with_the_web": { + "modified": "2020-07-16T22:33:48.981Z", + "contributors": [ + "EngMoathOmar", + "ahmadnourallah", + "cloudresourcemanagergoogleapis", + "chrisdavidmills" + ] + }, + "Learn/Getting_started_with_the_web/Dealing_with_files": { + "modified": "2020-07-16T22:34:31.389Z", + "contributors": [ + "ahmadnourallah", + "jwhitlock" + ] + }, + "Learn/Getting_started_with_the_web/HTML_basics": { + "modified": "2020-07-16T22:34:41.479Z", + "contributors": [ + "aminezouhair", + "ahmadnourallah", + "jwhitlock" + ] + }, + "Learn/Getting_started_with_the_web/How_the_Web_works": { + "modified": "2020-09-01T21:08:17.715Z", + "contributors": [ + "fahad43926375", + "EngMoathOmar", + "ipfinder", + "aminezouhair" + ] + }, + "Learn/Getting_started_with_the_web/Installing_basic_software": { + "modified": "2020-07-16T22:34:05.245Z", + "contributors": [ + "ahmadnourallah", + "jwhitlock" + ] + }, + "Learn/Getting_started_with_the_web/JavaScript_basics": { + "modified": "2020-07-16T22:35:07.787Z", + "contributors": [ + "Mohd-PH", + "zidanlab" + ] + }, + "Learn/Getting_started_with_the_web/What_will_your_website_look_like": { + "modified": "2020-07-16T22:34:13.678Z", + "contributors": [ + "ahmadnourallah", + "jwhitlock" + ] + }, + "Learn/Getting_started_with_the_web/أساسيات_صفحات_الطرز_المتراصة": { + "modified": "2020-07-16T22:34:55.259Z", + "contributors": [ + "aminezouhair", + "sami-assasa", + "ahmadnourallah" + ] + }, + "Learn/HTML": { + "modified": "2020-07-16T22:22:14.487Z", + "contributors": [ + "aminezouhair", + "wasem1772", + "Alihoday", + "Andrew_Pfeiffer" + ] + }, + "Learn/HTML/Forms": { + "modified": "2020-12-06T05:54:22.728Z", + "contributors": [ + "coderclouds2018" + ] + }, + "Learn/HTML/Introduction_to_HTML": { + "modified": "2020-07-16T22:22:44.780Z", + "contributors": [ + "aminezouhair", + "ahmadnourallah", + "jwhitlock" + ] + }, + "Learn/HTML/Introduction_to_HTML/Getting_started": { + "modified": "2020-07-16T22:22:56.623Z", + "contributors": [ + "aminezouhair", + "ahmadnourallah", + "jwhitlock" + ] + }, + "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals": { + "modified": "2020-07-16T22:23:29.319Z", + "contributors": [ + "jwhitlock", + "ahmadnourallah" + ] + }, + "Learn/HTML/Multimedia_and_embedding": { + "modified": "2020-07-16T22:24:23.909Z", + "contributors": [ + "MOTZ79567", + "ezrinjaz" + ] + }, + "Learn/HTML/الجداول": { + "modified": "2020-07-16T22:25:09.678Z", + "contributors": [ + "aminezouhair" + ] + }, + "Learn/HTML/بسيطة_HTML_إنشاء_صفحة": { + "modified": "2020-07-16T22:22:26.344Z", + "contributors": [ + "wbamberg", + "mubarak823", + "mhmdiaa" + ] + }, + "Learn/How_to_contribute": { + "modified": "2020-07-16T22:33:42.427Z", + "contributors": [ + "SphinxKnight", + "ahmadnourallah" + ] + }, + "Learn/JavaScript": { + "modified": "2020-07-16T22:29:36.627Z", + "contributors": [ + "Mohd-PH", + "Roadsky", + "amirmekk", + "chrisdavidmills" + ] + }, + "Learn/JavaScript/First_steps": { + "modified": "2020-07-16T22:29:47.870Z", + "contributors": [ + "Mohd-PH", + "SphinxKnight" + ] + }, + "Learn/JavaScript/First_steps/A_first_splash": { + "modified": "2020-11-17T07:52:07.930Z", + "contributors": [ + "heshamali", + "ibrahim.ham" + ] + }, + "Learn/JavaScript/First_steps/Useful_string_methods": { + "modified": "2020-11-07T10:08:34.284Z", + "contributors": [ + "heshamali", + "GawiSh97" + ] + }, + "Learn/JavaScript/Objects": { + "modified": "2020-07-16T22:31:47.619Z", + "contributors": [ + "aminezouhair", + "ALSULTAN", + "moatazalshabuo", + "chrisdavidmills" + ] + }, + "Learn/JavaScript/Objects/Basics": { + "modified": "2020-07-16T22:31:55.874Z", + "contributors": [ + "Youssef-Belmeskine", + "atefBB" + ] + }, + "Learn/JavaScript/Objects/Inheritance": { + "modified": "2020-07-16T22:32:11.167Z", + "contributors": [ + "Youssef-Belmeskine", + "AbrahemAlhofe", + "MohammedAlaa88" + ] + }, + "Learn/JavaScript/Objects/Object-oriented_JS": { + "modified": "2020-07-16T22:32:04.348Z", + "contributors": [ + "Youssef-Belmeskine", + "atefBB" + ] + }, + "Learn/JavaScript/Objects/Object_prototypes": { + "modified": "2020-07-16T22:32:18.432Z", + "contributors": [ + "Youssef-Belmeskine", + "MohammedAlaa88", + "atefBB" + ] + }, + "Learn/Server-side": { + "modified": "2020-07-16T22:35:55.037Z", + "contributors": [ + "moussagigawatt" + ] + }, + "Learn/Server-side/Django": { + "modified": "2020-07-18T13:31:54.614Z", + "contributors": [ + "tawfik123", + "kruschk" + ] + }, + "Learn/Server-side/Express_Nodejs": { + "modified": "2020-07-16T22:37:50.857Z", + "contributors": [ + "ckashby" + ] + }, + "MDN": { + "modified": "2020-02-19T19:23:57.984Z", + "contributors": [ + "jswisher", + "SphinxKnight", + "aminezouhair", + "wbamberg", + "ahmadnourallah", + "Jeremie", + "MoniV", + "ziyunfei" + ] + }, + "MDN/About": { + "modified": "2019-09-10T08:50:08.705Z", + "contributors": [ + "SphinxKnight", + "wbamberg", + "ahmadnourallah" + ] + }, + "MDN/Community": { + "modified": "2019-03-23T22:39:46.468Z", + "contributors": [ + "wbamberg", + "ahmadnourallah", + "Jeremie", + "1071432726" + ] + }, + "MDN/Community/Whats_happening": { + "modified": "2019-06-11T03:43:32.787Z", + "contributors": [ + "aminezouhair" + ] + }, + "MDN/Contribute": { + "modified": "2019-03-23T23:16:50.906Z", + "contributors": [ + "wbamberg", + "ahmadnourallah", + "Jeremie", + "Mars" + ] + }, + "MDN/Contribute/Feedback": { + "modified": "2020-09-30T17:50:14.200Z", + "contributors": [ + "chrisdavidmills", + "SphinxKnight", + "aminezouhair", + "wbamberg", + "ahmadnourallah" + ] + }, + "MDN/Contribute/Getting_started": { + "modified": "2020-09-30T17:08:48.786Z", + "contributors": [ + "chrisdavidmills", + "wbamberg", + "ahmadnourallah", + "Abu3safeer", + "ihanafieh", + "T9nf" + ] + }, + "MDN/Contribute/Howto": { + "modified": "2019-01-16T19:20:51.257Z", + "contributors": [ + "wbamberg", + "Jeremie", + "Sheppy" + ] + }, + "MDN/Contribute/Howto/Do_a_technical_review": { + "modified": "2019-06-10T14:47:38.844Z", + "contributors": [ + "aminezouhair", + "wbamberg", + "ashqaljnoob" + ] + }, + "MDN/Contribute/Howto/Do_an_editorial_review": { + "modified": "2019-06-15T16:26:58.954Z", + "contributors": [ + "aminezouhair" + ] + }, + "MDN/Contribute/Howto/Report_a_problem": { + "modified": "2020-01-07T12:21:22.751Z", + "contributors": [ + "peterbe", + "aminezouhair" + ] + }, + "MDN/Contribute/Howto/Set_the_summary_for_a_page": { + "modified": "2020-02-14T19:30:29.921Z", + "contributors": [ + "a0m0rajab", + "maherv" + ] + }, + "MDN/Contribute/Howto/Tag": { + "modified": "2019-09-10T11:04:17.206Z", + "contributors": [ + "wasim1772", + "wasem1772" + ] + }, + "MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary": { + "modified": "2019-06-15T16:35:07.831Z", + "contributors": [ + "aminezouhair" + ] + }, + "MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web": { + "modified": "2020-02-28T22:26:02.885Z", + "contributors": [ + "aminezouhair" + ] + }, + "MDN/Contribute/Howto/إنشاء_حساب_على_شبكة_مطوري_موزيلا": { + "modified": "2019-06-11T03:35:08.931Z", + "contributors": [ + "aminezouhair", + "wbamberg", + "ahmadnourallah", + "mhmdiaa", + "Syrian-Guy" + ] + }, + "MDN/Contribute/Howto/كيفية_إنشاء_وتحرير_الصفحات": { + "modified": "2019-03-18T21:28:07.470Z", + "contributors": [ + "AhmedElhatem" + ] + }, + "MDN/Contribute/Localize": { + "modified": "2019-01-16T18:57:05.647Z", + "contributors": [ + "wbamberg", + "Sheppy" + ] + }, + "MDN/Contribute/Localize/صفحات_الترجمة": { + "modified": "2019-12-17T21:16:51.749Z", + "contributors": [ + "wbamberg", + "ahmadnourallah", + "MoniV", + "iamaro", + "MohamedDZ", + "moncef.hammou" + ] + }, + "MDN/Guidelines": { + "modified": "2020-09-30T15:27:52.369Z", + "contributors": [ + "chrisdavidmills", + "wbamberg" + ] + }, + "MDN/Guidelines/Writing_style_guide": { + "modified": "2020-09-30T15:27:53.353Z", + "contributors": [ + "chrisdavidmills", + "jswisher", + "maherv" + ] + }, + "MDN/Kuma": { + "modified": "2019-09-09T15:51:34.712Z", + "contributors": [ + "SphinxKnight", + "wbamberg", + "ahmadnourallah", + "dr-m1991" + ] + }, + "MDN/Tools": { + "modified": "2020-09-30T16:47:53.767Z", + "contributors": [ + "chrisdavidmills", + "wbamberg", + "Jeremie", + "Sheppy" + ] + }, + "MDN/Tools/Deleting_pages": { + "modified": "2020-09-30T16:47:53.745Z", + "contributors": [ + "chrisdavidmills", + "wbamberg", + "Jeremie", + "Bettr", + "iii59300" + ] + }, + "MDN_at_ten": { + "modified": "2019-03-23T22:44:47.432Z", + "contributors": [ + "M.IRAQY999" + ] + }, + "Mozilla": { + "modified": "2019-03-23T23:28:10.569Z", + "contributors": [ + "Daef32", + "Sheppy" + ] + }, + "Mozilla/Add-ons": { + "modified": "2019-09-09T13:12:40.993Z", + "contributors": [ + "SphinxKnight", + "asromre1", + "MGWVc", + "mazenaliyane", + "google", + "hamada7-ym1403", + "viiiiiip123", + "Sheppy" + ] + }, + "Mozilla/Add-ons/WebExtensions": { + "modified": "2020-01-01T18:00:38.391Z", + "contributors": [ + "Anonymous", + "ahmadnourallah", + "ahmedhemada", + "mconca" + ] + }, + "Mozilla/Add-ons/WebExtensions/API": { + "modified": "2019-11-26T22:20:07.365Z", + "contributors": [ + "wbamberg", + "stephaniehobson" + ] + }, + "Mozilla/Add-ons/WebExtensions/API/browsingData": { + "modified": "2020-10-15T22:33:14.238Z", + "contributors": [ + "namma2012" + ] + }, + "Mozilla/Add-ons/WebExtensions/API/contentScripts": { + "modified": "2020-10-15T22:02:46.821Z", + "contributors": [ + "tikooooo" + ] + }, + "Mozilla/Add-ons/WebExtensions/Match_patterns": { + "modified": "2019-03-18T21:03:12.955Z", + "contributors": [ + "kremx80" + ] + }, + "Mozilla/Add-ons/WebExtensions/manifest.json": { + "modified": "2020-10-15T21:59:58.901Z", + "contributors": [ + "wbamberg" + ] + }, + "Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts": { + "modified": "2020-10-15T21:59:55.952Z", + "contributors": [ + "wbamberg", + "ralshammrei" + ] + }, + "Mozilla/Add-ons/WebExtensions/ما_هي_امتدادات_الويب": { + "modified": "2020-01-01T17:57:33.756Z", + "contributors": [ + "Anonymous" + ] + }, + "Mozilla/Developer_guide": { + "modified": "2019-03-23T22:03:05.275Z", + "contributors": [ + "glasserc" + ] + }, + "Mozilla/Developer_guide/Adding_APIs_to_the_navigator_object": { + "modified": "2020-08-11T20:05:10.710Z", + "contributors": [ + "shykhalwadym01" + ] + }, + "Mozilla/Developer_guide/Source_Code": { + "modified": "2020-06-23T10:39:42.136Z", + "contributors": [ + "mohameddz010203" + ] + }, + "Mozilla/Firefox": { + "modified": "2019-09-10T14:57:18.485Z", + "contributors": [ + "SphinxKnight", + "wbamberg", + "ahmadnourallah", + "Benseidseid", + "XMKMX_1937_XMKMX", + "3Li", + "asd996" + ] + }, + "Mozilla/Firefox/Releases": { + "modified": "2020-07-19T01:50:20.887Z", + "contributors": [ + "chrisdavidmills" + ] + }, + "Tools": { + "modified": "2020-07-16T22:44:13.280Z", + "contributors": [ + "SphinxKnight", + "aminezouhair", + "irenesmith", + "hamoody", + "Rami055302" + ] + }, + "Tools/Browser_Console": { + "modified": "2020-07-16T22:35:41.935Z", + "contributors": [ + "ssa918362" + ] + }, + "Tools/Page_Inspector": { + "modified": "2020-08-05T15:30:36.106Z", + "contributors": [ + "jswisher" + ] + }, + "Tools/Page_Inspector/How_to": { + "modified": "2020-08-05T15:30:36.225Z" + }, + "Tools/Storage_Inspector": { + "modified": "2020-07-16T22:36:09.328Z", + "contributors": [ + "7to328" + ] + }, + "Tools/Web_Console": { + "modified": "2020-07-16T22:34:03.927Z", + "contributors": [ + "HeSoKa05" + ] + }, + "Tools/Web_Console/The_command_line_interpreter": { + "modified": "2020-07-16T22:34:18.356Z", + "contributors": [ + "fasol1f" + ] + }, + "Web": { + "modified": "2020-04-16T08:53:18.820Z", + "contributors": [ + "ahmadnourallah", + "hayamgamil26", + "Anonymous", + "alktub", + "aminezouhair", + "mohamed7afezz", + "walidamriou", + "antaraz", + "kadimi", + "ethertank", + "fusionchess" + ] + }, + "Web/API": { + "modified": "2019-03-23T23:12:32.062Z", + "contributors": [ + "ahmadnourallah", + "SafaAlfulaij", + "jehad1123", + "iii59300", + "Ab_sahb2011", + "nickwong" + ] + }, + "Web/API/Attr": { + "modified": "2020-10-15T22:29:41.057Z", + "contributors": [ + "joree20003" + ] + }, + "Web/API/Canvas_API": { + "modified": "2019-03-18T21:38:39.416Z", + "contributors": [ + "SafaAlfulaij" + ] + }, + "Web/API/DOMTokenList": { + "modified": "2020-10-15T22:07:40.998Z", + "contributors": [ + "xfq" + ] + }, + "Web/API/DOMTokenList/length": { + "modified": "2020-10-15T22:07:42.370Z", + "contributors": [ + "GawiSh97" + ] + }, + "Web/API/Document": { + "modified": "2019-07-30T13:32:03.743Z", + "contributors": [ + "alwayslearnedstuff" + ] + }, + "Web/API/Document/designMode": { + "modified": "2019-03-23T22:02:58.144Z", + "contributors": [ + "khaled3afan" + ] + }, + "Web/API/Element": { + "modified": "2019-03-18T21:09:03.057Z", + "contributors": [ + "fscholz", + "fvsch" + ] + }, + "Web/API/Element/className": { + "modified": "2019-03-23T22:07:01.121Z", + "contributors": [ + "Abu3safeer" + ] + }, + "Web/API/Element/closest": { + "modified": "2020-10-15T22:31:36.454Z", + "contributors": [ + "suqbit" + ] + }, + "Web/API/Element/insertAdjacentHTML": { + "modified": "2020-10-15T22:31:15.283Z", + "contributors": [ + "suqbit" + ] + }, + "Web/API/Event": { + "modified": "2019-03-23T23:00:25.185Z", + "contributors": [ + "teoli" + ] + }, + "Web/API/Geolocation": { + "modified": "2019-03-23T22:48:52.907Z", + "contributors": [ + "fscholz" + ] + }, + "Web/API/Geolocation/Using_geolocation": { + "modified": "2019-08-31T16:04:10.213Z", + "contributors": [ + "1043465747", + "elsisi" + ] + }, + "Web/API/Geolocation/Using_geolocation/Using_the_Geolocation_API": { + "modified": "2020-03-22T20:37:24.802Z", + "contributors": [ + "i7cn" + ] + }, + "Web/API/HTMLElement": { + "modified": "2019-03-23T23:00:29.058Z", + "contributors": [ + "teoli" + ] + }, + "Web/API/HTMLElement/contentEditable": { + "modified": "2019-03-23T23:12:35.618Z", + "contributors": [ + "teoli", + "Syrian-Guy" + ] + }, + "Web/API/History_API": { + "modified": "2019-03-23T22:22:50.858Z", + "contributors": [ + "SphinxKnight", + "iJianHuang" + ] + }, + "Web/API/History_API/مثال": { + "modified": "2019-03-23T22:22:46.391Z", + "contributors": [ + "atefBB" + ] + }, + "Web/API/Navigator": { + "modified": "2019-03-23T22:15:21.162Z", + "contributors": [ + "Sheppy" + ] + }, + "Web/API/Navigator.battery": { + "modified": "2019-03-23T23:12:40.096Z", + "contributors": [ + "jsx", + "Syrian-Guy" + ] + }, + "Web/API/Node": { + "modified": "2020-10-15T22:29:49.949Z", + "contributors": [ + "Sheppy" + ] + }, + "Web/API/Node/removeChild": { + "modified": "2020-10-15T22:29:47.795Z", + "contributors": [ + "SphinxKnight", + "bodykabetano" + ] + }, + "Web/API/Window": { + "modified": "2020-10-15T22:32:14.260Z", + "contributors": [ + "ANH25" + ] + }, + "Web/API/Window/DOMContentLoaded_event": { + "modified": "2020-10-15T22:33:25.719Z", + "contributors": [ + "katbi89" + ] + }, + "Web/API/Window/alert": { + "modified": "2020-10-15T22:31:54.660Z", + "contributors": [ + "Sultan-Alrefaei" + ] + }, + "Web/API/XSLTProcessor": { + "modified": "2020-10-15T22:07:58.558Z", + "contributors": [ + "ExE-Boss" + ] + }, + "Web/API/XSLTProcessor/Basic_Example": { + "modified": "2019-03-18T21:28:33.053Z", + "contributors": [ + "EnasMahdy" + ] + }, + "Web/Accessibility": { + "modified": "2020-03-18T03:39:58.995Z", + "contributors": [ + "SphinxKnight", + "ahmadnourallah", + "hasabonassor" + ] + }, + "Web/CSS": { + "modified": "2019-09-11T03:31:55.318Z", + "contributors": [ + "SphinxKnight", + "ahmadnourallah", + "Qlbaz" + ] + }, + "Web/CSS/Attribute_selectors": { + "modified": "2020-10-15T22:10:15.383Z", + "contributors": [ + "zidanlab" + ] + }, + "Web/CSS/CSS_Flexible_Box_Layout": { + "modified": "2020-03-28T04:45:36.291Z", + "contributors": [ + "vnctdj" + ] + }, + "Web/CSS/CSS_Flexible_Box_Layout/المفاهيم_الأساسية_للصندوق_المرن": { + "modified": "2020-03-28T05:18:29.446Z", + "contributors": [ + "Mutazalhawash" + ] + }, + "Web/CSS/CSS_Grid_Layout": { + "modified": "2019-03-18T21:35:22.946Z", + "contributors": [ + "AmineBelmili", + "rachelandrew" + ] + }, + "Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout_arabic": { + "modified": "2019-03-18T21:35:18.134Z", + "contributors": [ + "harchaoui" + ] + }, + "Web/CSS/CSS_Writing_Modes": { + "modified": "2019-03-23T22:03:16.266Z", + "contributors": [ + "Micro-Shadi" + ] + }, + "Web/CSS/Reference": { + "modified": "2019-06-30T14:40:59.845Z", + "contributors": [ + "ESlam247" + ] + }, + "Web/CSS/align-content": { + "modified": "2020-10-17T19:46:08.545Z", + "contributors": [ + "chouaib" + ] + }, + "Web/CSS/order": { + "modified": "2020-10-15T22:25:59.036Z", + "contributors": [ + "CU1KNIGHT" + ] + }, + "Web/CSS/pointer-events": { + "modified": "2020-10-15T22:16:23.258Z", + "contributors": [ + "duduindo", + "AF555" + ] + }, + "Web/CSS/التحول": { + "modified": "2020-10-15T22:06:18.420Z", + "contributors": [ + "mohamadlounnas" + ] + }, + "Web/CSS/التعليقات": { + "modified": "2019-03-23T22:09:00.996Z", + "contributors": [ + "Abu3safeer" + ] + }, + "Web/CSS/العناصر_التي_يمكن_تحريكها_باستخدام_CSS_Transitions": { + "modified": "2019-03-23T22:09:06.742Z", + "contributors": [ + "Abu3safeer" + ] + }, + "Web/Events": { + "modified": "2020-07-05T11:11:44.298Z", + "contributors": [ + "suqbit" + ] + }, + "Web/Guide": { + "modified": "2019-03-23T23:26:08.829Z", + "contributors": [ + "NadhirBoukhenifra", + "kadimi", + "Sheppy" + ] + }, + "Web/Guide/CSS": { + "modified": "2019-03-23T23:26:10.869Z", + "contributors": [ + "Sheppy" + ] + }, + "Web/Guide/CSS/Getting_started": { + "modified": "2019-03-23T22:26:23.175Z", + "contributors": [ + "wjinca" + ] + }, + "Web/Guide/CSS/Getting_started/Readable_CSS": { + "modified": "2019-03-23T22:26:15.891Z", + "contributors": [ + "atefBB", + "Muhnad" + ] + }, + "Web/Guide/CSS/Getting_started/القوائم": { + "modified": "2019-03-23T22:26:05.454Z", + "contributors": [ + "atefBB", + "EmanShaltoutTrend" + ] + }, + "Web/Guide/HTML/HTML5": { + "modified": "2020-10-19T18:49:26.722Z", + "contributors": [ + "moussa32", + "teoli", + ".1234waleed", + "ess_a25", + "John.Smith" + ] + }, + "Web/Guide/HTML/HTML5/HTML5_element_list": { + "modified": "2019-03-23T23:14:56.560Z", + "contributors": [ + "Abu3safeer", + "atefBB", + "mohamedmahmoud", + "teoli", + "Ali.Talib" + ] + }, + "Web/Guide/الرسومات": { + "modified": "2019-03-18T21:43:50.204Z", + "contributors": [ + "ahmadnourallah" + ] + }, + "Web/HTML": { + "modified": "2019-09-11T08:59:54.831Z", + "contributors": [ + "SphinxKnight" + ] + }, + "Web/HTML/Element/input": { + "modified": "2020-10-15T22:35:12.617Z", + "contributors": [ + "chrisdavidmills" + ] + }, + "Web/HTML/Element/input/radio": { + "modified": "2020-10-15T22:35:10.964Z", + "contributors": [ + "mhayajneh" + ] + }, + "Web/HTML_لغة_ترميز_النص_الفائق": { + "modified": "2019-09-11T08:10:23.337Z", + "contributors": [ + "SphinxKnight", + "aminezouhair", + "ahmadnourallah", + "antaraz" + ] + }, + "Web/HTTP": { + "modified": "2019-12-23T16:16:43.680Z", + "contributors": [ + "syednomanfaakhir", + "aminezouhair", + "ahmadnourallah", + "ahmadmayahi" + ] + }, + "Web/HTTP/Basics_of_HTTP": { + "modified": "2019-03-18T21:20:43.883Z", + "contributors": [ + "ExE-Boss" + ] + }, + "Web/HTTP/Basics_of_HTTP/MIME_types": { + "modified": "2019-03-18T21:20:43.648Z", + "contributors": [ + "sideshowbarker" + ] + }, + "Web/HTTP/Basics_of_HTTP/MIME_types/Common_types": { + "modified": "2020-02-28T13:10:36.312Z", + "contributors": [ + "chrisdavidmills", + "SphinxKnight", + "bz-a" + ] + }, + "Web/HTTP/Connection_management_in_HTTP_1.x": { + "modified": "2020-06-22T06:07:59.299Z", + "contributors": [ + "semsm128" + ] + }, + "Web/HTTP/Headers": { + "modified": "2019-12-03T06:31:26.128Z", + "contributors": [ + "Malvoz" + ] + }, + "Web/HTTP/Overview": { + "modified": "2020-10-30T02:06:11.197Z", + "contributors": [ + "gms.2000.9.12" + ] + }, + "Web/JavaScript": { + "modified": "2020-05-08T07:16:04.132Z", + "contributors": [ + "joree20003", + "SphinxKnight", + "abdu56", + "ahmadnourallah", + "zidanlab", + "Boukhtam", + "maherv", + "DevOsamaMohamed", + "Benseidseid", + "kadimi", + "walidov", + "riva7", + "ralshammrei2", + "NISHANTSHRESHTH" + ] + }, + "Web/JavaScript/About_JavaScript": { + "modified": "2020-03-12T19:47:47.486Z", + "contributors": [ + "HeSoKa05" + ] + }, + "Web/JavaScript/Guide": { + "modified": "2020-03-12T19:42:18.289Z", + "contributors": [ + "Benseidseid", + "Naaman", + "SphinxKnight" + ] + }, + "Web/JavaScript/Guide/Control_flow_and_error_handling": { + "modified": "2020-03-12T19:45:33.664Z", + "contributors": [ + "Youssef-Belmeskine" + ] + }, + "Web/JavaScript/Guide/Grammar_and_types": { + "modified": "2020-03-12T19:42:15.788Z", + "contributors": [ + "atefBB", + "Youssef-Belmeskine", + "Benseidseid", + "Naaman", + "jwasily" + ] + }, + "Web/JavaScript/Guide/Introduction": { + "modified": "2020-03-12T19:42:21.553Z", + "contributors": [ + "Youssef-Belmeskine", + "Benseidseid", + "Naaman" + ] + }, + "Web/JavaScript/Guide/Loops_and_iteration": { + "modified": "2020-03-12T19:45:31.602Z", + "contributors": [ + "Youssef-Belmeskine" + ] + }, + "Web/JavaScript/Guide/Regular_Expressions": { + "modified": "2020-03-12T19:47:23.942Z", + "contributors": [ + "Youssef-Belmeskine", + "SafaAlfulaij" + ] + }, + "Web/JavaScript/Guide/Working_with_Objects": { + "modified": "2020-03-12T19:45:29.171Z", + "contributors": [ + "Youssef-Belmeskine", + "SphinxKnight" + ] + }, + "Web/JavaScript/Guide/الدوال": { + "modified": "2020-03-12T19:44:03.918Z", + "contributors": [ + "Youssef-Belmeskine", + "Benseidseid" + ] + }, + "Web/JavaScript/Introduction_to_Object-Oriented_JavaScript": { + "modified": "2020-03-12T19:44:59.681Z", + "contributors": [ + "HeSoKa05", + "Youssef-Belmeskine", + "mustafasalah" + ] + }, + "Web/JavaScript/Reference": { + "modified": "2020-03-12T19:39:44.947Z", + "contributors": [ + "maherv", + "LJHarb" + ] + }, + "Web/JavaScript/Reference/Classes": { + "modified": "2020-10-15T22:05:06.152Z", + "contributors": [ + "rwaldron" + ] + }, + "Web/JavaScript/Reference/Classes/constructor": { + "modified": "2020-10-15T22:05:06.518Z", + "contributors": [ + "MohammedAlaa88" + ] + }, + "Web/JavaScript/Reference/Errors": { + "modified": "2020-03-12T19:48:15.925Z", + "contributors": [ + "Sheppy" + ] + }, + "Web/JavaScript/Reference/Errors/Unexpected_type": { + "modified": "2020-03-12T19:48:14.682Z", + "contributors": [ + "mohamadlounnas" + ] + }, + "Web/JavaScript/Reference/Global_Objects": { + "modified": "2020-03-12T19:39:41.981Z", + "contributors": [ + "SphinxKnight", + "fscholz" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array": { + "modified": "2019-03-23T22:26:28.438Z", + "contributors": [ + "DevOsamaMohamed" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/isArray": { + "modified": "2019-06-23T15:06:41.749Z", + "contributors": [ + "GawiSh97", + "DevOsamaMohamed" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/join": { + "modified": "2019-03-23T22:26:12.736Z", + "contributors": [ + "Abu3safeer", + "DevOsamaMohamed" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/pop": { + "modified": "2019-03-23T22:26:21.251Z", + "contributors": [ + "Dr-Rakcha" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/reverse": { + "modified": "2019-03-23T22:26:07.581Z", + "contributors": [ + "DevOsamaMohamed" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/slice": { + "modified": "2020-10-15T22:31:18.515Z", + "contributors": [ + "suqbit" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date": { + "modified": "2019-03-23T23:09:44.322Z", + "contributors": [ + "GawiSh97", + "bekti", + "fscholz" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/UTC": { + "modified": "2020-10-15T22:07:16.359Z", + "contributors": [ + "GawiSh97" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getDate": { + "modified": "2020-10-15T22:07:16.005Z", + "contributors": [ + "GawiSh97" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/now": { + "modified": "2020-10-15T21:56:36.366Z", + "contributors": [ + "GawiSh97", + "Abu3safeer" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/parse": { + "modified": "2020-10-15T22:07:15.028Z", + "contributors": [ + "GawiSh97" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/setDate": { + "modified": "2020-10-15T22:07:16.408Z", + "contributors": [ + "GawiSh97" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Function": { + "modified": "2020-10-15T22:05:05.412Z", + "contributors": [ + "danielsamuels" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Function/call": { + "modified": "2020-10-15T22:05:04.168Z", + "contributors": [ + "ViNoS-ab", + "Youssef-Belmeskine", + "MohammedAlaa88" + ] + }, + "Web/JavaScript/Reference/Global_Objects/JSON": { + "modified": "2019-03-23T23:01:55.663Z", + "contributors": [ + "Mingun" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map": { + "modified": "2020-10-15T22:31:39.296Z", + "contributors": [ + "mohamed.yahya.zakria73" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math": { + "modified": "2020-10-15T22:14:04.029Z", + "contributors": [ + "SphinxKnight", + "ALSULTAN" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Object": { + "modified": "2020-10-15T22:05:05.541Z", + "contributors": [ + "stmoreau" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Object/constructor": { + "modified": "2020-10-15T22:05:03.728Z", + "contributors": [ + "MohammedAlaa88" + ] + }, + "Web/JavaScript/Reference/Global_Objects/String": { + "modified": "2020-10-15T21:56:27.422Z", + "contributors": [ + "Qrsan", + "fscholz" + ] + }, + "Web/JavaScript/Reference/Global_Objects/String/startsWith": { + "modified": "2020-10-15T22:22:14.192Z", + "contributors": [ + "Mourad_Ouchane" + ] + }, + "Web/JavaScript/Reference/Global_Objects/الارقام": { + "modified": "2020-10-10T09:54:31.841Z", + "contributors": [ + "Flemer" + ] + }, + "Web/JavaScript/Reference/Operators": { + "modified": "2020-12-07T20:30:16.758Z", + "contributors": [ + "Arous" + ] + }, + "Web/JavaScript/Reference/Operators/Destructuring_assignment": { + "modified": "2020-10-15T22:30:09.713Z", + "contributors": [ + "hasheemeg" + ] + }, + "Web/JavaScript/Reference/Operators/Object_initializer": { + "modified": "2020-03-12T19:45:32.164Z", + "contributors": [ + "poode", + "Youssef-Belmeskine" + ] + }, + "Web/JavaScript/Reference/Operators/Operator_Precedence": { + "modified": "2020-03-12T19:49:40.482Z", + "contributors": [ + "suqbit" + ] + }, + "Web/JavaScript/Reference/Operators/new": { + "modified": "2020-10-15T22:33:30.546Z", + "contributors": [ + "noqp312" + ] + }, + "Web/JavaScript/Reference/Operators/this": { + "modified": "2020-10-15T22:29:18.195Z", + "contributors": [ + "h6t9m205" + ] + }, + "Web/JavaScript/Reference/Statements": { + "modified": "2020-03-12T19:44:08.522Z", + "contributors": [ + "fscholz" + ] + }, + "Web/JavaScript/Reference/Statements/return": { + "modified": "2020-11-23T19:27:26.302Z", + "contributors": [ + "skarfstri" + ] + }, + "Web/JavaScript/Reference/الدوال": { + "modified": "2020-03-12T19:44:04.047Z", + "contributors": [ + "Benseidseid" + ] + }, + "Web/JavaScript/Reference/الدوال/get": { + "modified": "2020-10-15T22:32:22.148Z", + "contributors": [ + "abdwfawzy985" + ] + }, + "Web/MathML": { + "modified": "2019-03-23T22:01:47.703Z", + "contributors": [ + "ahmadnourallah" + ] + }, + "Web/SVG": { + "modified": "2019-03-23T23:09:34.687Z", + "contributors": [ + "plgatto" + ] + }, + "Web/SVG/Attribute": { + "modified": "2019-03-23T23:09:27.790Z", + "contributors": [ + "stevenvachon" + ] + }, + "Web/Tutorials": { + "modified": "2019-03-23T22:49:35.256Z", + "contributors": [ + "sami-assasa", + "ahmadnourallah", + "jwhitlock", + "hamza-mostafa", + "antaraz" + ] + }, + "Web/حماية": { + "modified": "2019-09-10T16:31:27.104Z", + "contributors": [ + "SphinxKnight", + "aminezouhair" + ] + }, + "Web/مرجع.": { + "modified": "2020-09-14T07:03:21.633Z", + "contributors": [ + "coderclouds2018", + "ashqaljnoob07", + "Syrian-Guy" + ] + }, + "Web_Development": { + "modified": "2019-03-23T23:25:33.143Z", + "contributors": [ + "ethertank" + ] + }, + "Web_Development/Mobile": { + "modified": "2019-03-23T23:25:26.627Z", + "contributors": [ + "BenB" + ] + }, + "heesfoord007": { + "modified": "2019-03-23T22:50:44.174Z", + "contributors": [ + "heesfoord007" + ] + }, + "أحداث_مكتبة_jQuery": { + "modified": "2019-03-23T23:08:54.898Z", + "contributors": [ + "Syrian-Guy" + ] + }, + "مكتبة_جي_كويري": { + "modified": "2019-03-23T23:08:46.056Z", + "contributors": [ + "Syrian-Guy" + ] + }, + "واصفة_SpellCheck_الجديدة_في_HTML5": { + "modified": "2019-03-23T23:11:43.327Z", + "contributors": [ + "Syrian-Guy" + ] + }, + "واصفة_العنوان_في_HTML": { + "modified": "2019-03-23T23:11:41.974Z", + "contributors": [ + "Syrian-Guy" + ] + } +}
\ No newline at end of file diff --git a/files/ar/archive/beginner_tutorials/index.html b/files/ar/archive/beginner_tutorials/index.html new file mode 100644 index 0000000000..ea5374f1e3 --- /dev/null +++ b/files/ar/archive/beginner_tutorials/index.html @@ -0,0 +1,11 @@ +--- +title: Beginner tutorials +slug: Archive/Beginner_tutorials +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/Beginner_tutorials +--- +<p class="summary">This page includes archived beginners tutorials, from various places around MDN.</p> + +<dl><dt class="landingPageList"><a href="/en-US/docs/Archive/Beginner_tutorials/Using_XBL_from_stylesheets">Creating reusable content with CSS and XBL</a></dt><dd class="landingPageList">This page illustrates how you can use <a href="/en-US/docs/Web/CSS">CSS</a> in Mozilla to improve the structure of complex applications, making code and resources more easily reusable.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Beginner_tutorials/Underscores_in_class_and_ID_Names">Underscores in class and ID Names</a></dt><dd class="landingPageList"><span class="comment">Summary: The use of the underscore character in CSS can lead to major display problems in multiple browsers. Learn why this is so, and how to keep your sites from being bitten by this problem.</span> This technical note examines the use of underscores in CSS, and why they should be generally avoided in most circumstances.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Beginner_tutorials/XML_data">XML data</a></dt><dd class="landingPageList">This page contains an example of how you can use CSS with XML data.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Beginner_tutorials/XUL_user_interfaces">XUL user interfaces</a></dt><dd class="landingPageList">This page illustrates Mozilla's specialized language for creating user interfaces.</dd></dl> diff --git a/files/ar/archive/beginner_tutorials/underscores_in_class_and_id_names/index.html b/files/ar/archive/beginner_tutorials/underscores_in_class_and_id_names/index.html new file mode 100644 index 0000000000..9cb8cb0874 --- /dev/null +++ b/files/ar/archive/beginner_tutorials/underscores_in_class_and_id_names/index.html @@ -0,0 +1,61 @@ +--- +title: الشرطات السفلية (_) في اسماء محددات الاصناف والمعرفات (Class & ID) +slug: Archive/Beginner_tutorials/Underscores_in_class_and_ID_Names +translation_of: Archive/Beginner_tutorials/Underscores_in_class_and_ID_Names +--- +<div class="note" dir="rtl"> +<p><strong>ملاحظة: </strong>لقد تم تحسين دعم المتصفح للشرطة السفلية (_) في CSS بشكل كبير منذ تاريخ نشر هذه المقالة في عام 2001 ولم تعد التوصية التالية دقيقة بالنسبة لمعظم الظروف</p> +</div> + +<p dir="rtl"><span class="comment">Summary: The use of the underscore character in CSS can lead to major display problems in multiple browsers. Learn why this is so, and how to keep your sites from being bitten by this problem.</span> تدرس هذه المذكرة التقنية استخدام الشرطات السفلية (_) في CSS ، ولماذا يجب تجنب استخدامها في معظم الظؤوف</p> + +<p dir="rtl">يعد استخدام الشرطة السفلية (_) في اسماء المتغيرات والدوال (الوظائف) امراً شائعاَ نوعا ما في العديد من لغات البرمجة. على سبيل المثال دالة وظيفتها "الحصول على طول سلسلة نصية" قد تتم تسميتها <code>get_string_length</code> او متحول يمثل عدد الاشخاص الذين قالمو بالتصويت قد يسمى <code>voted_Republican</code> </p> + +<p dir="rtl">نظرا لهذه الحقيقة، غالبا مايحاول المطورين الذين يكتبون CSS استخدام الشرطة السفلية باسلوب مماثل في تسمية المعرفات ومحددات الاصناف (Class & ID). <strong>ولا ينبغي القيام بذلك. </strong>على الرغم من ان الشرطة السفلية (_) مسموح بها تقنيا في اسماء المعرفات ومحددات الاصناف حتى تاريخ كتابة هذه السطور، هناك العديد من الاسباب التاريخة والعملية التي توضح اسباب وجوب تجنب استخدام الشرطة السفلية (_)</p> + +<p dir="rtl">مواصفات CSS1 التي تم اصدرت في شكلها النهائي عام 1996 لا تسمح باستخدام الشرطة السفلية (_) في اسماء المعرفات ومحددات الاصناف مالم تستخدم حرف الهروب (escaped) على النحو التالي:</p> + +<pre>p.urgent\_note {color: maroon;}</pre> + +<p dir="rtl">هذا لم يكن مدعوما جيدا من المتصفحات في ذلك الوقت ومع ذلك هذه الممارسة لم يسبق لها مثيل. </p> + +<p dir="rtl">CSS2 التي تم اصدرت في عام 1998 ايضا منعت استخدام الشرطة السفلية (_) في أسماء المعرفات ومحددات الاصناف ومع ذلك فان تصحيح الاخطاء في المواصفات التي تم اصدارها عام 2001 جعلت استخدام الشرطة السفلية مسموحاً لاول مرة. مما ادى للاسف لتعقيد المشهد المعقد بالفعل </p> + +<h3 dir="rtl" id="Support_realities" name="Support_realities">دعم الحقائق</h3> + +<p dir="rtl">بين الاخطاء في التفيذ والتغيرات في المواصفات، سلوك المتصفحات في ما يتعلق باستخدام الشرطات السفلية معقد الى حد ما.</p> + +<ul dir="rtl"> + <li>Netscape 6.x يسمح بالشرطات السفلية والشرطات السفلية الهاربة (escaped)</li> + <li>Navigator 4.X قام بدعم فرض قيود على استخدام الشرطات السفلية وبالتالي سيقوم بتجاهل اي اسماء معرفات او محددات اصناف تحتوي شرطة سفلية وبذلك لن يتم تطبيق انماط CSS المرتبطة بها. كما انه يتجاهل الشرطات السفلية الهاربة (escaped)</li> + <li>Internet Explorer 4.x and 5.x للويندوز (Microsoft Windows) سمح باستخدام الشرطة السفلية عن طريق الخطأ وكذلك كلا الاصدارين غير متوافقين في هذه النقطة حتى تم نشر تصحيح الاخطاء. وكذلك ينطبق الامر نفسه على كلا الاصدراين للماكنتوش (Mac)</li> + <li>Internet Explorer 6 للويندوز (Microsoft Windows) تم اصداره بعد تصحيح الاخطاء، يسمح بالشرطات السفلية والشرطات السفلية الهاربة (escaped)</li> + <li> + <p>Opera 3.x الى Opera 5.x لا يعترف بالشرطة السفلية ولا الشرطة السفلية الهاربة (ecsaped) حيث انه يتصرف مثل Navigator 4.x في هذا الصدد</p> + </li> +</ul> + +<h3 dir="rtl" id="Recommendation" name="Recommendation">التوصية</h3> + +<p dir="rtl">لان دعم الشرطة السفلية غير متناسق للغاية في المتصفحات الحالية وكذلك الاصدارات القديمة منها، ينصح المؤلفون بشدة بتجبن استخدام الشرطة السفلية في اسماء المعرفات ومحددات الاصناف.</p> + +<p dir="rtl">البديل الشائع لها هو الحرف الواصلة (<code>-</code>) كما في:</p> + +<pre>p.urgent-note {color: maroon;}</pre> + +<p dir="rtl"> يختار العديد من المطورين الكتابة بطريقة حالة الجمل (Camle Case) مثال:</p> + +<pre>p.urgentNote {color: maroon;}</pre> + +<p>If the initial-cap approach is used, however, remember that class and ID names are also supposed to be case-sensitive. See the tech note "<a href="/en-US/docs/Case_Sensitivity_in_class_and_id_Names">Case Sensitivity in <code>class</code> and <code>id</code> Names</a>" for more details.</p> + +<div class="originaldocinfo"> +<h3 dir="rtl" id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3> + +<ul> + <li>Author(s): Eric A. Meyer, Netscape Communications</li> + <li>Last Updated Date: Published 05 Mar 2001</li> + <li>Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.</li> + <li>Note: This reprinted article was originally part of the DevEdge site.</li> +</ul> +</div> diff --git a/files/ar/archive/css3/index.html b/files/ar/archive/css3/index.html new file mode 100644 index 0000000000..6314a611f9 --- /dev/null +++ b/files/ar/archive/css3/index.html @@ -0,0 +1,976 @@ +--- +title: CSS3 +slug: Archive/CSS3 +translation_of: Archive/CSS3 +--- +<p><span class="seoSummary"><strong>Css3 </strong>هو أحدث تطوير للغة أوراق الأنماط المتتالية و تهدف لتوسيع لغة CSS2.1<strong>.</strong></span></p> + +<p>فيها العديد من التحديثات الجديدة المنتظرة ، مثل الزوايا المدورة ، الظلال، تدرج الألوان ، و التحريك، بالأضافة إلى تخطيطات جديدة كالتخطيط المتعدد الأعمدة و تخطيط الصندوق المرن ، و تخطيط الشبكة.</p> + +<p>الأجزاء الاختبارية التي لها سابقة خاصة بالمستعرض يجب إزالتها أو تجنبها في المنتج النهائي، أو استعمالها بحذر لأنه يمكن أن تتغير صيغتها بالمستقبل .</p> + +<h2 id="Modules_and_the_standardization_process">Modules and the standardization process</h2> + +<p>CSS Level 2 needed 9 years, from August 2002 to June 2011 to reach the Recommendation status. This was due to the fact that a few secondary features hold back the whole specification. In order to accelerate the standardization of non-problematic features, the <a class="external" href="http://www.w3.org/blog/CSS/" title="http://www.w3.org/blog/CSS/">CSS Working Group</a> of the W3C, in a decision referred as the <a class="external" href="http://fantasai.inkedblade.net/weblog/2011/inside-csswg/modules" title="http://fantasai.inkedblade.net/weblog/2011/inside-csswg/modules">Beijing doctrine</a>, divided CSS in smaller components called <em>modules</em> . Each of these modules is now an independent part of the language and moves towards standardization at its own pace. While some modules are already W3C Recommendations, other still are early Working Drafts. New modules are also added when new needs are identified.</p> + +<p><a href="/@api/deki/files/6120/=CSS_Modules_and_Snapshots.png" title="CSS_Modules_and_Snapshots.png"><img alt="CSS Modules and Snapshots as defined since CSS3" class="internal lwrap" src="/files/3623/CSS_Modules_and_Snapshots.png" style="float: left; width: 550px;"> </a> Formally, there is no CSS3 standard <em>per se</em> . Each module being standardized independently, the standard CSS consists of CSS2.1 amended and extended by the completed modules, not necessary all with the same level number. At each point of time, a snapshot of the CSS standard can be defined, listing CSS2.1 and the mature modules.</p> + +<p>The W3 consortium periodically publishes such snapshots, like in <a class="external" href="http://www.w3.org/TR/css-beijing/" title="http://www.w3.org/TR/css-beijing/">2007</a> or <a class="external" href="http://www.w3.org/TR/css-2010/" title="http://www.w3.org/TR/css-2010/">2010.</a></p> + +<p>Though today no module with a level greater than 3 is standardized, this will change in the future. Some modules, like Selectors 4 or CSS Borders and Backgrounds Level 4 already have an Editor's Draft, though they haven't yet reached the First Published Working Draft status.</p> + +<h2 id="CSS_modules_status" style="">CSS modules status</h2> + +<h3 id="Stable_modules">Stable modules</h3> + +<p>A few CSS modules are already fairly stable and have reached one of the three recommendation level of the CSSWG: Candidate Recommendation, Proposed Recommendation or Recommendation. These can be used without prefix and are pretty stable, though a few features can still be dropped at the Candidate Recommendation stage.</p> + +<p>These modules extend and amend the CSS2.1 specification which build the core of the specification. Together with it, they are the current snapshot of the CSS specification.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td class="thirdColumn greenBg"><strong>{{ SpecName("CSS3 Colors", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Colors") }} since June 7th, 2011</td> + </tr> + <tr> + <td colspan="2"> + <p>Adds the {{ cssxref("opacity") }} property, and the <code>hsl</code><code>()</code>, <code>hsla()</code>, <code>rgba()</code> and <code>rgb()</code> functions to create {{cssxref("<color>")}} values. It also defines the <code>currentColor</code> keyword as a valid color.</p> + + <p>The <code>transparent</code> color is now a real color (thanks to the support for the alpha channel) and is a now an alias for <code>rgba(0,0,0,0.0)</code> .</p> + + <p>It deprecates the <a href="http://www.w3.org/TR/CSS2/ui.html#system-colors">system-color keywords that shouldn't be used in a production environment anymore</a>.</p> + </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(128,255,128);"><strong>{{ SpecName("CSS3 Selectors", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Selectors") }} since September 29th, 2011</td> + </tr> + <tr> + <td colspan="2"> + <p>Adds:</p> + + <ul> + <li>Substring matching attribute selectors, <code>E[attribute^="value"]</code>, <code>E[attribute$="value"]</code>, <code>E[attribute*="value"]</code> .</li> + <li>New pseudo-classes: {{ cssxref(":target") }}, {{ cssxref(":enabled") }} and {{ cssxref(":disabled") }}, {{ cssxref(":checked") }}, {{ cssxref(":indeterminate") }}, {{ cssxref(":root") }}, {{ cssxref(":nth-child") }} and {{ cssxref(":nth-last-child") }}, {{ cssxref(":nth-of-type") }} and {{ cssxref(":nth-last-of-type") }}, {{ cssxref(":last-child") }}, {{ cssxref(":first-of-type") }} and {{ cssxref(":last-of-type") }}, {{ cssxref(":only-child") }} and {{ cssxref(":only-of-type") }},{{ cssxref(":empty") }}, and {{ cssxref(":not") }}.</li> + <li>Pseudo-elements are now characterized by two colons rather then one: <code>:after</code> becomes {{ cssxref("::after") }}, <code>:before</code> becomes {{ cssxref("::before") }}, <code>:first-letter</code> becomes {{ cssxref("::first-letter") }}, and <code>:first-line</code> becomes {{ cssxref("::first-line") }}.</li> + <li>The new <em>general sibling combinator</em> ( <code>h1~pre</code> ).</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p>The <a class="external" href="http://dev.w3.org/csswg/selectors4/" title="http://dev.w3.org/csswg/selectors4/">next iteration of the Selectors specification</a> is already in progress, though it still hasn't reached the First Public Working Draft stage.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(128,255,128);"><strong>{{ SpecName("CSS3 Namespaces", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Namespaces") }} since September 29th, 2011</td> + </tr> + <tr> + <td colspan="2"> + <p>Adds the support for the XML Namespaces by defining the notion of <em>CSS qualified name</em>, using the ' <code>|</code> ' syntax and adding the {{ cssxref("@namespace") }} CSS at-rule.</p> + </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(128,255,128);"><strong>{{ SpecName("CSS3 Media Queries", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Media Queries") }} since June 19th, 2012</td> + </tr> + <tr> + <td colspan="2"> + <p>Extends the former media type ( <code>print</code>, <code>screen</code>, <code>…</code> ) to a full language allowing <a href="/en/CSS/Media_queries" title="en/CSS/Media_queries">queries on the device media capabilities</a> like <code>only screen and (color)</code> .</p> + + <p>Media queries are not only used in CSS document but also in some attributes of HTML Elements, like the {{ htmlattrxref("media","link") }} attribute of the {{ HTMLElement("link") }} element.</p> + </td> + </tr> + </tbody> +</table> + +<p>The <a href="http://dev.w3.org/csswg/mediaqueries4" title="http://dev.w3.org/csswg/mediaqueries4">next iteration of this specification</a> is in the work, allowing to tailor a Web site regarding the input methods available on the user agent, with new media features like <code>hover</code> or <code>pointer</code>. Detection of EcmaScript support, using the <code>script</code> media features is also proposed.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(128,255,128);"><strong>{{ SpecName("CSS3 Style", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Style") }} since November 7th, 2013</td> + </tr> + <tr> + <td colspan="2">Formally defines the syntax of the content of the HTML <a href="/en/HTML/Global_attributes#attr-style" title="en/HTML/Global_attributes#attr-style"> <code>style</code> </a> global attribute.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Backgrounds", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Backgrounds") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>Adds:</p> + + <ul> + <li>Support, on backgrounds, for any type of {{cssxref("<image>")}}, and not only for <code>uri()</code> defined ones.</li> + <li>Support for multiple background images.</li> + <li>The {{ cssxref("background-repeat") }} <code>space</code> and <code>round</code> values, and for the 2-value syntax of this CSS property.</li> + <li>The {{ cssxref("background-attachment") }} <code>local</code> value.</li> + <li>The CSS {{ cssxref("background-origin") }}, {{ cssxref("background-size") }}, and {{ cssxref("background-clip") }} properties.</li> + <li>Support for curved border corners, with the CSS {{ cssxref("border-radius") }}, {{ cssxref("border-top-left-radius") }}, {{ cssxref("border-top-right-radius") }}, {{ cssxref("border-bottom-left-radius") }}, and {{ cssxref("border-bottom-right-radius") }} properties.</li> + <li>Support for the use of an {{cssxref("<image>")}} as the border with the CSS {{ cssxref("border-image") }}, {{ cssxref("border-image-source") }}, {{ cssxref("border-image-slice") }}, {{ cssxref("border-image-width") }}, {{ cssxref("border-image-outset") }}, and {{ cssxref("border-image-repeat") }} properties.</li> + <li>Support for shadows of the element with the CSS {{ cssxref("box-shadow") }} property.</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p>The <a class="external" href="http://dev.w3.org/csswg/css4-background/" title="http://dev.w3.org/csswg/css4-background/">CSS4 iteration of the Backgrounds and Borders specification</a> is already in progress, though it still hasn't reached the First Public Working Draft stage, it plans to add the ability to clip a border (with the CSS {{ cssxref("border-clip") }}, {{ cssxref("border-clip-top") }}, {{ cssxref("border-clip-right") }}, {{ cssxref("border-clip-bottom") }}, and {{ cssxref("border-clip-left") }} properties) or to control the shape of the border in a corner (using the CSS {{ cssxref("border-corner-shape") }} property).</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Multicol", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Multicol") }}</td> + </tr> + <tr> + <td colspan="2">Adds support for easy multi-column layouts using the CSS {{ cssxref("columns") }}, {{ cssxref("column-count") }}, {{ cssxref("column-fill") }}, {{ cssxref("column-gap") }}, {{ cssxref("column-rule") }}, {{ cssxref("column-rule-color") }}, {{ cssxref("column-rule-style") }}, {{ cssxref("column-rule-width") }}, {{ cssxref("column-span") }}, {{ cssxref("column-width") }}, {{ cssxref("break-after") }}, {{ cssxref("break-before") }}, and {{ cssxref("break-inside") }}.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Speech", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Speech") }}</td> + </tr> + <tr> + <td colspan="2">Defines the <code>speech</code> media type, an aural formatting model and numerous properties specific for speech-rendering user agents.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Images", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Images") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>Defines the {{cssxref("<image>")}} data type.</p> + + <p>Extends the <code>url()</code> syntax to support image slices using media fragments.</p> + + <p>Adds:</p> + + <ul> + <li>The <code>dppx</code> unit to the {{cssxref("<resolution>")}} data type.</li> + <li>The <code>image()</code> function as a more flexible alternative to <code>url()</code> to define an image from an url.<br> + <em><strong>At risk</strong> </em> <strong> <em>:</em> </strong> <em> due to insufficient browser support, standardization of the <code>image()</code> function may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li> + <li>Support for <code>linear-gradient()</code>, <code>repeating-linear-gradient()</code>, <code>radial-gradient()</code> and <code>repeating-radial-gradient()</code>.</li> + <li>The ability to define how a replaced element should fit in its element, using the CSS {{ cssxref("object-fit") }} property.<br> + <em><strong>At risk</strong> </em> <strong> <em>:</em> </strong> <em> due to insufficient browser support, standardization of the {{ cssxref("object-fit") }} and property may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li> + <li>The ability to override the resolution and orientation of an external image using the CSS {{ cssxref("image-resolution") }} and {{ cssxref("image-orientation") }} properties.<br> + <em><strong>At risk</strong> </em> <strong> <em>:</em> </strong> <em> due to insufficient browser support, standardization of the {{ cssxref("image-resolution") }} and {{ cssxref("image-orientation") }} properties may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p>The <a href="#Images_(Level_4)">CSS Image Values and Replaced Content Level 4</a> which will supersede CSS Image Level 3 is in development and is a {{Spec2("CSS4 Images")}}.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220, 255, 220);"><strong>{{ SpecName("CSS3 Values", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Values") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>Makes <code>initial</code> and <code>inherit</code> keywords usable on any CSS property.</p> + + <p>Formally defines the CSS data types of CSS 2.1, that were implicitely defined by their grammar token and some textual precisions.</p> + + <p>Adds:</p> + + <ul> + <li>Definition for new font-relative length units: <code>rem</code> and <code>ch</code> .</li> + <li>Definition for viewport-relative length units: <code>vw</code>, <code>vh</code>, <code>vmax</code>, and <code>vmin</code> .</li> + <li>Precision about the real size of the absolute length units, which are not really absolute, but defined in relation with the <em>reference pixel</em> .</li> + <li>Definition for {{ cssxref("<angle>") }}, {{cssxref("<time>")}}, {{cssxref("<frequency>")}}, {{cssxref("<resolution>")}}.</li> + <li>Normative value to the definition of {{cssxref("<color>")}}, {{cssxref("<image>")}}, and {{ cssxref("<position>") }}.</li> + <li>Definition for the {{ cssxref("calc", "calc()") }}, {{ cssxref("attr", "attr()")}}, and <code>toggle()</code> functional notations.<br> + <em><strong>At risk:</strong> due to insufficient browser support, standardization of the <code>calc()</code>, <code>attr()</code>, and <code>toggle()</code> functional notations may be postponed to </em> <em>the next iteration of this module</em><em>.</em></li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p>Several types definition, like <code><ident></code> and <code><custom-ident></code>, have been deferred to CSS Values and Units Module Level 4.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Flexbox", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Flexbox") }}</td> + </tr> + <tr> + <td colspan="2">Add a flexbox layout to the CSS {{ cssxref("display") }} property and several new CSS properties to control it: {{ cssxref("flex") }}, {{ cssxref("flex-align") }}, {{ cssxref("flex-direction") }}, {{ cssxref("flex-flow") }}, {{ cssxref("flex-item-align") }}, {{ cssxref("flex-line-pack") }}, {{ cssxref("flex-order") }}, {{ cssxref("flex-pack") }}, and {{ cssxref("flex-wrap") }}.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220, 255, 220);"><strong>{{ SpecName("CSS3 Conditional", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Conditional") }}</td> + </tr> + <tr> + <td colspan="2">Adds features for conditional processing of parts of style sheets, conditioned on capabilities of the browser or the document the style sheet is being applied to. It consists mainly in allowing nested at-rules inside {{ cssxref("@media") }} and the adding of a new CSS at-rule, {{ cssxref("@supports") }}, and a new DOM method {{domxref("CSS.supports()")}}.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220, 255, 220);"><strong>{{ SpecName("CSS3 Text Decoration", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Text Decoration") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>Extends:</p> + + <ul> + <li>the CSS {{ cssxref("text-decoration") }} property by making it a shorthand for the CSS {{ cssxref("text-decoration-line") }}, {{ cssxref("text-decoration-color") }}, and {{ cssxref("text-decoration-style") }} properties. And adds the {{ cssxref("text-decoration-skip") }}, and {{ cssxref("text-underline-position") }} properties.</li> + </ul> + + <p>Adds:</p> + + <ul> + <li>Support for East-Asian-script emphasis marks with the CSS {{ cssxref("text-emphasis") }}, {{ cssxref("text-emphasis-style") }}, {{ cssxref("text-emphasis-color") }}, and {{ cssxref("text-emphasis-position") }} properties.</li> + <li>Support for script shadows with the CSS {{ cssxref("text-shadow") }} property.</li> + </ul> + + <p>Precises:</p> + + <ul> + <li>The paint order of the decorations.</li> + </ul> + + <p><em><strong>At risk:</strong> due to insufficient browser support, standardization of the <code>text-decoration-skip</code>, line positioning rules and the ability to place both emphasis marks and ruby above the same base text may be postponed to </em> <em>the next iteration of this module</em><em>.</em></p> + </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Fonts", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Fonts") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>Amends the CSS2.1 Font matching algorithm to be closer to what is really implemented.</p> + + <p>Adds:</p> + + <ul> + <li>Support for downloadable fonts via the CSS {{ cssxref("@font-face") }} at-rule.</li> + <li>The control of the contextual inter-glyph spacing via the CSS {{ cssxref("font-kerning") }} property.</li> + <li>The choice of language-specific glyphs via the CSS {{ cssxref("font-language-override") }} property.</li> + <li>The choice of glyphs with specific OpenType features via the CSS {{ cssxref("font-feature-settings") }} property.</li> + <li>The control of the aspect ratio to use when fallback fonts are selected via the CSS {{ cssxref("font-size-adjust") }} property.</li> + <li>The choice of alternative font faces using the CSS {{ cssxref("font-stretch") }}, {{ cssxref("font-variant-alternates") }}, {{ cssxref("font-variant-caps") }}, {{ cssxref("font-variant-east-asian") }}, {{ cssxref("font-variant-ligatures") }}, {{ cssxref("font-variant-numeric") }}, and {{ cssxref("font-variant-position") }} properties. It also extends the related CSS {{ cssxref("font-variant") }} shorthand property and introduces the {{ cssxref("@font-features-values") }} at-rule.</li> + <li>The control of the automatic generation of an oblique or bold face when none are found via the CSS {{ cssxref("font-synthesis") }} property.</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Cascade", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Cascade") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>Adds:</p> + + <ul> + <li>The <code>initial</code>, <code>unset</code> values for properties.</li> + <li>The CSS {{ cssxref("all") }} property.</li> + <li>The scoping mechanism.</li> + </ul> + + <p>Precises:</p> + + <ul> + <li>Interaction of media-dependent @import statements and style sheet loading requirements.</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Writing Modes", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Writing Modes") }}</td> + </tr> + <tr> + <td colspan="2">Defines the writing modes of both horizontal and vertical scripts and precises how the CSS {{ cssxref("direction") }} and {{ cssxref("unicode-bidi") }} properties interact with the new CSS {{ cssxref("text-orientation") }} property, and extends them where needed.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS Shapes", "", "") }}</strong></td> + <td>{{ Spec2("CSS Shapes") }}</td> + </tr> + <tr> + <td colspan="2">Defines geometric shapes, which can be applied to floats. These shapes describe areas, around which inline content wraps instead of wrapping around the bounding box.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS Masks", "", "") }}</strong></td> + <td>{{ Spec2("CSS Masks") }}</td> + </tr> + <tr> + <td colspan="2">Defines a way for partially or fully hiding portions of visual elements. It describes how to use another graphical element or image as a luminance or alpha mask.</td> + </tr> + </tbody> +</table> + +<h3 id="Modules_in_the_refining_phase">Modules in the refining phase</h3> + +<p>Specifications that are deemed to be in the <em>refining phase</em> are already fairly stable. Though changes are still expected, they shouldn't create incompatibilities with current implementations; they should mainly define behavior in edge cases.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("Web Animations", "", "") }}</strong></td> + <td>{{ Spec2("Web Animations") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Counter Styles", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Counter Styles") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("Compositing", "", "") }}</strong></td> + <td>{{ Spec2("Compositing") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Syntax", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Syntax") }}</td> + </tr> + <tr> + <td colspan="2">Precises how charsets are determined; minor changes in parsing and tokenization algorithms.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS Will Change", "", "") }}</strong></td> + <td>{{ Spec2("CSS Will Change") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Transitions", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Transitions") }}</td> + </tr> + <tr> + <td colspan="2">Allows the definition of transitions effects between two properties values by adding the CSS {{ cssxref("transition") }}, {{ cssxref("transition-delay") }}, {{ cssxref("transition-duration") }}, {{ cssxref("transition-property") }}, and {{ cssxref("transition-timing-function") }} properties.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Animations", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Animations") }}</td> + </tr> + <tr> + <td colspan="2">Allows the definition of animations effects by adding the CSS {{ cssxref("animation") }}, {{ cssxref("animation-delay") }},{{ cssxref("animation-direction") }}, {{ cssxref("animation-duration") }}, {{ cssxref("animation-fill-mode") }}, {{ cssxref("animation-iteration-count") }}, {{ cssxref("animation-name") }}, {{ cssxref("animation-play-state") }}, and {{ cssxref("animation-timing-function") }} properties, as well as the {{ cssxref("@keyframes") }} at-rule.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Transforms", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Transforms") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>Adds:</p> + + <ul> + <li>the support of bi-dimensional transforms to be applied to any element using the CSS {{ cssxref("transform") }} and {{ cssxref("transform-origin") }} properties. The supported transforms are: <code>matrix</code><code>()</code>, <code>translate()</code>, <code>translateX()</code>, <code>translateY()</code>, <code>scale()</code>, <code>scaleX()</code>, <code>scaleY()</code>, <code>rotate()</code>, <code>skewX()</code>, and <code>skewY()</code>.</li> + <li>the support of tri-dimensional transforms to be applied to any element by adding the CSS {{ cssxref("transform-style") }}, {{ cssxref("perspective") }}, {{ cssxref("perspective-origin") }}, and {{ cssxref("backface-visibility") }} properties and extended the {{ cssxref("transform") }} property with the following transforms are: <code>matrix</code> <code>3d()</code>, <code>translate3d()</code>, <code>translateZ()</code>, <code>scale3d()</code>, <code>scaleZ()</code>, <code>rotate3d()</code>, <code>rotateX</code><code>()</code>, <code>rotateY</code><code>()</code>, <code>rotateZ()</code>, and <code>perspective()</code>.</li> + </ul> + + <p><em><strong>Note:</strong> this specification is a merge of CSS 2D-Transforms, CSS 3D-Transforms and SVG transforms. </em></p> + </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255, 255, 220);"><strong>{{ SpecName("CSS3 Fragmentation", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Fragmentation") }}</td> + </tr> + <tr> + <td colspan="2">Defines how partitions of a Web page should happen, that is page, column breaks, and widows and orphans handling. + <p>Adds:</p> + + <ul> + <li>Support for defining the behavior of decorations, that is borders and background colors or images, when a box is breaked (at a page, column or line-break) with the CSS {{ cssxref("box-decoration-break") }} property.</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Text", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Text") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>Extends:</p> + + <ul> + <li>the CSS {{ cssxref("text-transform") }} property with the value <code>full-width</code>.</li> + <li>the CSS {{ cssxref("text-align") }} property with the value <code>start</code>, <code>end</code>, <code>start end</code>, and <code>match-parent</code> for a better support of documents with multiple directionalities of text.</li> + <li>the CSS {{ cssxref("text-align") }} property with a {{cssxref("<string>")}} value to align on that character. This is useful to align number on the decimal point.</li> + <li>the CSS {{ cssxref("word-spacing") }} and {{ cssxref("letter-spacing") }} properties with range constraints to control flexibility in justification.</li> + </ul> + + <p>Adds:</p> + + <ul> + <li>Control on how whitespaces are displayed using the CSS {{ cssxref("text-space-collapse") }} and {{ cssxref("tab-size") }} properties.</li> + <li>Control on line breaks and word boundaries using the CSS {{ cssxref("line-break") }}, {{ cssxref("word-break") }}, {{ cssxref("hyphens") }}, {{ cssxref("text-wrap") }}, {{ cssxref("overflow-wrap") }}, and {{ cssxref("text-align-last") }} properties.</li> + <li>Control on how justification is happening, in order to support more type of scripts, using the CSS {{ cssxref("text-justify") }} property.</li> + <li>Control on edge effect using the CSS {{ cssxref("text-indent") }} and {{ cssxref("hanging-punctuation") }} properties.</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p>A few features present in early CSS Text Level 3 draft have being <a class="external" href="http://dev.w3.org/csswg/css3-text/#recent-changes" title="http://dev.w3.org/csswg/css3-text/#recent-changes">postponed to the next iteration of this module</a> .</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Variables", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Variables") }}</td> + </tr> + <tr> + <td colspan="2">Defines a mechanism allowing to define variables in CSS.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("Compositing", "", "") }}</strong></td> + <td>{{ Spec2("Compositing") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<h3 id="Modules_in_the_revising_phase">Modules in the revising phase</h3> + +<p>Modules that are in the revising phase are much less stable than those in the refining phase. Often the syntax is still under scrutiny and may evolve a lot, in a non-compatible way. Alternative syntaxes are tested and often implemented.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,160,100);"><strong>{{ SpecName("CSS3 Basic UI", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Basic UI") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>Adds:</p> + + <ul> + <li>The ability to tweak the box model using the CSS {{ cssxref("box-sizing") }} property.<br> + <strong><em>At risk:</em> </strong> <em> due to insufficient browser support, standardization of the <code>padding</code><code>-box</code> value may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li> + <li>Allow the styling of forms according their content using the CSS {{ cssxref(":indeterminate") }}, {{ cssxref(":default") }}, {{ cssxref(":valid") }}, {{ cssxref(":invalid") }}, {{ cssxref(":in-range") }}, {{ cssxref(":out-of-range") }}, {{ cssxref(":required") }}, {{ cssxref(":optional") }}, {{ cssxref(":read-only") }}, and {{ cssxref(":read-write") }} pseudo-classes and the {{ cssxref("::value") }}, {{ cssxref("::choices") }}, {{ cssxref("::repeat-item") }}, and {{ cssxref("::repeat-index") }} pseudo-elements.<br> + <em><strong>At risk:</strong> due to insufficient browser support, standardization of the pseudo-elements {{ cssxref("::value") }}, {{ cssxref("::choices") }}, {{ cssxref("::repeat-item") }}, and {{ cssxref("::repeat-index") }} may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li> + <li>Support for icons, defined by the CSS {{ cssxref("icon") }} property simultaneously with the new <code>icon</code> value of the CSS {{ cssxref("content") }} property.<br> + <em><strong>At risk:</strong> due to insufficient browser support, standardization of the {{ cssxref("icon") }} property and the <code>icon</code> value may be postponed to CSS4. </em></li> + <li>Support for the CSS {{ cssxref("outline-offset") }} property giving more control on the position of the outline.</li> + <li>Support for the CSS {{ cssxref("resize") }} property allowing Web authors to control if and how elements should be resized.</li> + <li>Support for the CSS {{ cssxref("text-overflow") }} property defining how text overflows, if needed.<br> + <em><strong>At risk:</strong> due to insufficient browser support, the 2-value syntax of this property as well as the support for {{cssxref("<string>")}} values may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li> + <li>The ability to define the hotspot of a cursor as well as the new <code>none</code>, <code>context-menu</code>, <code>cell</code>, <code>vertical-text</code>, <code>alias</code>, <code>copy</code>, <code>no-drop</code>, <code>not-allowed</code>, <code>nesw-</code><code>resize</code>, <code>nwse-</code><code>resize</code>, <code>col-resize</code>, <code>row-resize</code>, <code>all-scroll</code>, <code>zoom-in</code>, <code>zoom-out</code>, extending the {{ cssxref("cursor") }} property.</li> + <li>The ability to specify the sequential navigation order (that is the <em>tabbing order</em> ) using the CSS {{ cssxref("nav-index") }}, {{ cssxref("nav-up") }}, {{ cssxref("nav-right") }}, {{ cssxref("nav-left") }}, {{ cssxref("nav-down") }} properties.<br> + <em><strong>At risk:</strong> due to insufficient browser support, standardization of the navigation properties may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li> + <li>The ability to control the usage of an IME editor, using the CSS {{ cssxref("ime-mode") }} property.<br> + <em><strong>At risk:</strong> due to insufficient browser support, standardization of the {{ cssxref("ime-mode") }} property may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p>An early list of what could be in the next iteration of the CSS Basic User Interface Module is <a class="external" href="http://wiki.csswg.org/spec/css4-ui" title="http://wiki.csswg.org/spec/css4-ui">available</a>.</p> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,160,100);"><strong>{{ SpecName("CSS3 Grid", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Grid") }}</td> + </tr> + <tr> + <td colspan="2">Add a grid layout to the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display" title=""><code>display</code></a> property and several new CSS properties to control it: {{cssxref("grid")}}, {{cssxref("grid-area")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-flow")}}, {{cssxref("grid-auto-position")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-column")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row")}}, {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-template")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-template-rows")}}, and {{cssxref("grid-template-columns")}}.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,160,100);"><strong>{{ SpecName("CSS3 Box Alignment", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Box Alignment") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,160,100);"><strong>{{ SpecName("CSS3 Paged Media", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Paged Media") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,160,100);"><strong>{{ SpecName("CSSOM View", "", "") }}</strong></td> + <td>{{ Spec2("CSSOM View") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,160,100);"><strong>{{ SpecName("CSS4 Selectors", "", "") }}</strong></td> + <td>{{ Spec2("CSS4 Selectors") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<h3 id="Modules_in_the_exploring_phase">Modules in the exploring phase</h3> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS4 Images", "", "") }}</strong></td> + <td>{{ Spec2("CSS4 Images") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>Extends:</p> + + <ul> + <li>the <code>image()</code> functional notation to describe the directionality of the image (<code>rtl</code> or <code>ltr</code>), allowing for bidi-sensitive images.</li> + <li>the {{ cssxref("image-orientation") }} property by adding the keyword <code>from-image</code>, allowing to follow EXIF data stored into images to be considered.</li> + </ul> + + <p>Adds:</p> + + <ul> + <li>the <code>image-set()</code> functional notation to allow the definition to equivalent images at different resolution allowing for resolution-negotiated selection of images.</li> + <li>the <code>element()</code> functional notation allowing the use of part of the page as image.</li> + <li>the <code>cross-fade()</code> functional notation allowing to refer to intermediate images when transitioning between two images and defines the interpolation between two images.</li> + <li>the <code>conic-gradient()</code> and <code>repeating-conic-gradient()</code> functional notation describing a new type of gradient.</li> + <li>the {{cssxref("image-rendering")}} property that allow to define how resize of the object should be handled.</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Device", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Device") }}</td> + </tr> + <tr> + <td colspan="2">Adds a new at-rule, {{ cssxref("@viewport") }}, allowing to specify the size, zoom factor, and orientation of the viewport that is used as the base for the initial containing block.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 GCPM", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 GCPM") }}</td> + </tr> + <tr> + <td colspan="2">Adds the ability to tailor printed version of a document by allowing to control header, footer but also references tables like indexes or tables of content.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS Exclusions", "", "") }}</strong></td> + <td>{{ Spec2("CSS Exclusions") }}</td> + </tr> + <tr> + <td colspan="2">Extends the floats mechanism to define exclusion regions in any positioning scheme. Adds the notion of shapes, in which content must flows.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Lists", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Lists") }}</td> + </tr> + <tr> + <td colspan="2">Extends the list counter mechanism so that list markers can be styled and Web developers can define new list counter schemes.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Regions", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Regions") }}</td> + </tr> + <tr> + <td colspan="2">Defines a new mechanism allowing content to flow across, eventually non-contiguous, multiple areas called regions.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Device", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Device") }}</td> + </tr> + <tr> + <td colspan="2">Adds a new at-rule, {{ cssxref("@viewport") }}, allowing to specify the size, zoom factor, and orientation of the viewport that is used as the base for the initial containing block.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("Filters 1.0", "", "") }}</strong></td> + <td>{{ Spec2("Filters 1.0") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Template", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Template") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Sizing", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Sizing") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS Line Grid", "", "") }}</strong></td> + <td>{{ Spec2("CSS Line Grid") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Positioning", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Positioning") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Ruby", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Ruby") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSSOM", "", "") }}</strong></td> + <td>{{ Spec2("CSSOM") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Overflow", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Overflow") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Font Loading", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Font Loading") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Display", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Display") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS Scope", "", "") }}</strong></td> + <td>{{ Spec2("CSS Scope") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS4 Media Queries", "", "") }}</strong></td> + <td>{{ Spec2("CSS4 Media Queries") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS Non-element Selectors", "", "") }}</strong></td> + <td>{{ Spec2("CSS Non-element Selectors") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("Geometry Interfaces", "", "") }}</strong></td> + <td>{{ Spec2("Geometry Interfaces") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Inline", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Inline") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<h3 id="Modules_in_the_rewriting_phase">Modules in the rewriting phase</h3> + +<p>Modules that are in the rewriting phase are outdated and require to be rewritten. The syntax is still under scrutiny and may evolve a lot, in a non-compatible way. Alternative syntaxes are tested and often implemented.</p> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F33;"><strong>{{ SpecName("CSS3 Box", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Box") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F33;"><strong>{{ SpecName("CSS3 Content", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Content") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F33;"><strong>{{ SpecName("CSS3 Inline Layout", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Inline Layout") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<p> </p> diff --git a/files/ar/archive/index.html b/files/ar/archive/index.html new file mode 100644 index 0000000000..4f4a70c023 --- /dev/null +++ b/files/ar/archive/index.html @@ -0,0 +1,21 @@ +--- +title: Archive of obsolete content +slug: Archive +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive +--- +<p>Here at MDN, we try to avoid outright deleting content that might be useful to people targeting legacy platforms, operating systems, and browsers. Perhaps your target audience is people that are using older hardware, for example, and can't upgrade to the latest and greatest browsers. Or for "reasons," your company is required to use very old software and you need to build Web content that runs on that software. Or perhaps you're just curious about the history of an obsolete feature or API, and how it worked.</p> + +<p>There are many reasons older documentation can be useful. So, we've established this area into which we can archive older documentation. Material in this Archived content zone should <strong>not</strong> be used for building new Web sites or apps for modern browsers. It's here for historical reference only.</p> + +<div class="note"> +<p><strong>Note to writers:</strong> We need to try to keep the subpages here organized instead of all dumped into one large folder. Try to create subtrees for categories of material. Also, only move pages here that are <strong>extremely</strong> obsolete. If anyone might realistically need the information in a living product, it may not be appropriate to move it here. In general, it may be best to discuss it in the <a href="https://chat.mozilla.org/#/room/#mdn:mozilla.org">MDN Web Docs chat room</a> before moving content here.</p> +</div> + +<p>{{SubpagesWithSummaries}}</p> + +<h2 id="Subnav">Subnav</h2> + +<p>{{ListSubpages("/en-US/docs/Archive", 2, 0, 1)}}</p> diff --git a/files/ar/archive/mdn/index.html b/files/ar/archive/mdn/index.html new file mode 100644 index 0000000000..9e550840e3 --- /dev/null +++ b/files/ar/archive/mdn/index.html @@ -0,0 +1,20 @@ +--- +title: MDN Archive +slug: Archive/MDN +tags: + - Archive + - MDN + - NeedsTranslation + - TopicStub +translation_of: Archive/MDN +--- +<p>{{MDNSidebar}}</p> + +<div class="blockIndicator obsolete"> +<p><strong>Obsolete</strong><br> + This documentation is obsolete.</p> +</div> + +<p>The documentation listed below is archived, obsolete material about MDN itself.</p> + +<p>{{LandingPageListSubpages}}</p> diff --git a/files/ar/archive/meta_docs/index.html b/files/ar/archive/meta_docs/index.html new file mode 100644 index 0000000000..52de2c8447 --- /dev/null +++ b/files/ar/archive/meta_docs/index.html @@ -0,0 +1,12 @@ +--- +title: MDN "meta-documentation" archive +slug: Archive/Meta_docs +tags: + - Archive + - MDN + - NeedsTranslation + - TopicStub +translation_of: Archive/Meta_docs +--- +<p>Here you'll find archived "meta-documentation"; that is, documentation about how to write documentation on MDN. The articles here are obsolete and should no longer be referenced; we are retaining them here for reference while we migrate some content to new places, but very little of this is useful.</p> +<p>{{LandingPageListSubpages}}</p> diff --git a/files/ar/archive/mozilla/index.html b/files/ar/archive/mozilla/index.html new file mode 100644 index 0000000000..132253aacf --- /dev/null +++ b/files/ar/archive/mozilla/index.html @@ -0,0 +1,8 @@ +--- +title: Archived Mozilla and build documentation +slug: Archive/Mozilla +translation_of: Archive/Mozilla +--- +<p>In progress. These articles are archived, obsolete documents about Mozilla, Gecko, and the process of building Mozilla projects.</p> + +<p>{{SubpagesWithSummaries}}</p> diff --git a/files/ar/archive/mozilla/marketplace/index.html b/files/ar/archive/mozilla/marketplace/index.html new file mode 100644 index 0000000000..ded4fbc136 --- /dev/null +++ b/files/ar/archive/mozilla/marketplace/index.html @@ -0,0 +1,161 @@ +--- +title: Firefox Marketplace +slug: Archive/Mozilla/Marketplace +tags: + - Apps + - Beginner + - Firefox OS + - Intro + - Landing + - Marketplace + - NeedsTranslation + - TopicStub + - 'l10n:priority' +translation_of: Archive/Mozilla/Marketplace +--- +<p class="summary">The Firefox Marketplace is an open and non-proprietary online marketplace for web apps. <span class="seoSummary">In this zone you'll find all the information you need to prepare and publish apps on the Firefox Marketplace. Find guidance on how to make apps successful, delivery options, publishing and updating apps, and the libraries and APIs to make use of Marketplace features.</span></p> + +<p>Mozilla is bringing its core values — openness, freedom, user choice — to the world of app publishing.</p> + +<p>Using standard Web technologies, languages, and tools, the <a href="https://marketplace.firefox.com/">Firefox Marketplace</a> enables you to publish <a href="/en-US/Apps">Open Web Apps</a>. These apps can be packaged, running within Firefox OS, or hosted on your own web server. Published apps are available to users of Firefox OS phones wherever they are in the world. Users discover your apps easily in Firefox Marketplace using the featured apps section, app categories, and powerful search. Users are then able to install free apps instantly, or buy paid apps with the growing support for credit card payments and operator billing.</p> + +<div class="topicpage-table"> +<div class="section"> +<h2 id="Preparing_for_success"><a href="/en-US/Marketplace/Prepare">Preparing for success</a></h2> + +<p>Whether you're creating apps for pleasure or profit, you'll want people to discover, use, and enjoy them. This section explains how to spread the word and build communities of satisfied users.</p> + +<h2 id="Publication_options"><a href="/en-US/Marketplace/Options">Publication options</a></h2> + +<p>Packaged or Hosted, that is the question. Find out about delivering your app content and the options for making your apps available on Android devices and desktops, in addition to Firefox OS.</p> + +<h2 id="Publishing_apps"><a href="/en-US/Marketplace/Publishing/Introduction">Publishing apps</a></h2> + +<p>Unleash your apps on the waiting world. Find out how to get your apps on Firefox Marketplace, including the processes for submitting your apps, the review process, updating your apps, monitoring their performance, and reviewing user feedback.</p> +</div> + +<div class="section"> +<h2 id="Tools_for_app_development">Tools for app development</h2> + +<dl> + <dt><a href="/en-US/Marketplace/APIs">Firefox Marketplace Libraries and APIs</a></dt> + <dd>Get an overview and find links to the libraries and APIs available to add features to your Marketplace apps.</dd> + <dt><a href="/en-US/Apps/Tools_and_frameworks/App_developer_tools">App developer tools</a></dt> + <dd>Find a complete list of the tools you can use to make Open Web App development efficient and fun.</dd> + <dt><a href="/en-US/docs/Tools/WebIDE">WebIDE</a></dt> + <dd>Your primary tool to test, deploy, and debug <a href="https://developer.mozilla.org/en-US/Firefox_OS">Firefox OS</a> apps using the <a href="https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> or a real Firefox OS device.</dd> +</dl> +</div> +</div> + +<div class="blockIndicator communitybox" dir="ltr"> +<div class="column-container"> +<h2 id="Join_the_Marketplace_community">Join the Marketplace community</h2> + +<div class="column-half"> +<div class="communitysubhead">Choose your preferred method for joining the discussion:</div> + +<ul class="communitymailinglist"> + <li><a href="https://lists.mozilla.org/listinfo/dev-marketplace">Mailing list</a></li> + <li><a href="https://twitter.com/Boot2Gecko">Twitter</a></li> + <li><a href="http://stackoverflow.com/questions/tagged/firefox-os">Stack Overflow</a></li> + <li><a href="http://groups.google.com/group/mozilla.dev.marketplace">Newsgroup</a></li> + <li><a href="http://groups.google.com/group/mozilla.dev.marketplace/feeds">RSS feed</a></li> +</ul> +</div> + +<div class="column-half"> +<ul class="communitycontact"> + <li><strong>IRC: </strong><a href="irc://irc.mozilla.org/marketplace">#marketplace</a> <span class="smaller">(<a href="https://wiki.mozilla.org/IRC">learn more</a>)</span></li> + <li><strong>Contribute: </strong><a href="https://wiki.mozilla.org/Marketplace/Contributing/ThisMonth" title="Discover what you can do to contribute regularly to the Marketplace project">Marketplace this month</a></li> +</ul> +</div> +</div> +</div> + +<h2 id="Subnav">Subnav</h2> + +<section id="Quick_Links"> +<ol> + <li class="toggle"> + <details><summary><a href="/en-US/Marketplace/Prepare">Prepare for success</a></summary> + + <ol> + <li><a href="/en-US/Marketplace/Prepare/Introduction">Introduction</a></li> + <li><a href="/en-US/Marketplace/Prepare/Deciding_what_to_build">Deciding what to build</a></li> + <li><a href="/en-US/Marketplace/Prepare/Getting_to_know_your_users">Getting to know your users</a></li> + <li><a href="/en-US/Marketplace/Prepare/Choosing_your_business_model">Choosing your business model</a></li> + <li><a href="/en-US/Marketplace/Prepare/Localizing_your_apps">Localizing your apps</a></li> + <li><a href="/en-US/Marketplace/Prepare/Promoting_your_app">Promoting your app</a></li> + <li><a href="/en-US/Marketplace/Prepare/Creating_your_community">Creating your community</a></li> + </ol> + </details> + </li> + <li class="toggle"> + <details><summary><a href="/en-US/Marketplace/Options">Your publication options</a></summary> + <ol> + <li><a href="/en-US/Marketplace/Options/Introduction">Introduction</a></li> + <li><a href="/en-US/Marketplace/Options/Packaged_apps">Packaged apps</a></li> + <li><a href="/en-US/Marketplace/Options/Hosted_apps">Hosted apps</a></li> + <li><a href="/en-US/Marketplace/Options/Packaged_or_hosted">Packaged or hosted?</a></li> + <li><a href="/en-US/Marketplace/Options/Mobile_optimized_websites">Mobile-optimized websites</a></li> + <li><a href="/en-US/Marketplace/Options/Self_publishing">Publish apps yourself</a></li> + </ol> + </details> + </li> + <li class="toggle"> + <details><summary><a href="/en-US/Marketplace/Publishing">App publishing overview</a></summary> + <ol> + <li><a href="/en-US/Marketplace/Publishing/Introduction">Introduction</a></li> + <li><a href="/en-US/Marketplace/Publishing/Submission_checklist">Submission checklist</a></li> + <li><a href="/en-US/Marketplace/Publishing/Marketplace_review_criteria" title="An explanation of the criteria an app must meet in order to be published on the Firefox Marketplace">Marketplace review criteria</a></li> + <li><a href="/en-US/Marketplace/Publishing/Marketplace_showcase_criteria">Marketplace showcase criteria</a></li> + <li><a href="/en-US/Marketplace/Publishing/Adding_a_subdomain" title="For security reasons, each app must have its own domain (or subdomain) on the Web. This article covers how to go about creating a subdomain for your app.">Adding a subdomain for an app</a></li> + <li><a href="/en-US/Marketplace/Publishing/Policies_and_Guidelines">Policies and Guidelines</a> + <ol> + <li><a href="/en-US/Marketplace/Publishing/Policies_and_Guidelines/Introduction">Introduction</a></li> + <li><a href="/en-US/Marketplace/Publishing/Policies_and_Guidelines/Marketplace_screenshot_criteria" title="Some guidelines on how to create an effective screenshot for marketplace submission">Marketplace screenshot criteria</a></li> + <li><a href="/en-US/Marketplace/Publishing/Policies_and_Guidelines/Privacy_policies" title="Your users' privacy is very important, so you need to develop and adhere to a reasonable privacy policy to engender their trust. This article provides a guide to developing privacy policies.">Privacy policy</a></li> + <li><a href="/en-US/Marketplace/Publishing/Policies_and_Guidelines/Testing_and_troubleshooting">App testing and troubleshooting</a></li> + </ol> + </li> + </ol> + </details> + </li> + <li class="toggle"> + <details><summary><a href="/en-US/Marketplace/Publishing/Submit">Submit your app</a></summary> + <ol> + <li><a href="/en-US/Marketplace/Publishing/Submit/Overview">Overview</a></li> + <li><a href="/en-US/Marketplace/Publishing/Submit/Sign-in_to_your_developer_account" title="This step-by-step guide will help you successfully submit your app to the Firefox Marketplace.">Step 1: Sign-in</a></li> + <li><a href="/en-US/Marketplace/Publishing/Submit/Load_your_app">Step 2: Load app</a></li> + <li><a href="/en-US/Marketplace/Publishing/Submit/Enter_your_apps_details">Step 3: Listing details</a></li> + <li><a href="/en-US/Marketplace/Publishing/Submit/Next_steps">Step 4: Next steps</a></li> + <li><a href="/en-US/Marketplace/Publishing/Submit/Rating_Your_Content">Step 5: App rating</a></li> + <li><a href="/en-US/Marketplace/Publishing/Submit/Define_your_team">Step 6: Define team members</a></li> + <li><a href="/en-US/Marketplace/Publishing/Submit/View_your_listing">Step 7: View listing</a></li> + <li><a href="/en-US/Marketplace/Publishing/Submit/Edit_other_localizations">Step 8: Edit other localizations</a></li> + </ol> + </details> + </li> + <li class="toggle"> + <details><summary><a href="/en-US/Marketplace/Publishing/Managing_your_apps">Managing and updating published apps</a></summary> + <ol> + <li><a href="/en-US/Marketplace/Publishing/Managing_your_apps/Introduction_Managing_your_apps">Introduction</a></li> + <li><a href="/en-US/Marketplace/Publishing/Managing_your_apps/Status___Versions">Your app's status</a></li> + <li><a href="/en-US/Marketplace/Publishing/Updating_apps" title="Information about how both hosted and packaged app updates are handled, and what you need to do to ensure that your app properly supports updating.">Updating apps</a></li> + <li><a href="/en-US/Marketplace/Publishing/Managing_your_apps/App_Statistics">App Stats</a></li> + </ol> + </details> + </li> + <li class="toggle"> + <details><summary><a href="/en-US/docs/Mozilla/Marketplace/Add-on_submission">Add-on submission</a></summary> + <ol> + <li><a href="/en-US/docs/Mozilla/Marketplace/Add-on_submission">Add-on submission overview</a></li> + <li><a href="/en-US/docs/Mozilla/Marketplace/Add-on_submission/Review_criteria">Add-on review criteria</a></li> + </ol> + </details> + </li> + <li><a href="/en-US/Marketplace/APIs">Libraries and APIs</a></li> + <li><a href="/en-US/Marketplace/FAQ">Firefox Marketplace FAQ</a></li> +</ol> +</section> diff --git a/files/ar/archive/mozilla/marketplace/publishing/submit/index.html b/files/ar/archive/mozilla/marketplace/publishing/submit/index.html new file mode 100644 index 0000000000..a6e3468169 --- /dev/null +++ b/files/ar/archive/mozilla/marketplace/publishing/submit/index.html @@ -0,0 +1,10 @@ +--- +title: Submit +slug: Archive/Mozilla/Marketplace/Publishing/Submit +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/Mozilla/Marketplace/Publishing/Submit +--- +<p>This section describes the process for submitting an app to Firefox Marketplace</p> +<p>Residual details: <a href="/en-US/Marketplace/Publishing/Submit/Submitting_an_app">https://developer.mozilla.org/en-US/Marketplace/Publishing/Submit/Submitting_an_app</a></p> diff --git a/files/ar/archive/mozilla/marketplace/publishing/submit/rating_your_content/index.html b/files/ar/archive/mozilla/marketplace/publishing/submit/rating_your_content/index.html new file mode 100644 index 0000000000..8e4fbb5d91 --- /dev/null +++ b/files/ar/archive/mozilla/marketplace/publishing/submit/rating_your_content/index.html @@ -0,0 +1,121 @@ +--- +title: Obtaining a rating for your app +slug: Archive/Mozilla/Marketplace/Publishing/Submit/Rating_Your_Content +translation_of: Archive/Mozilla/Marketplace/Publishing/Submit/Rating_Your_Content +--- +<div class="warning"> +<p><font><font>هذه الصفحة يخضع للصيانة.</font></font></p> +</div> + +<div class="summary"> +<p><font><font>تمت موزيلا شراكة مع </font></font><a href="http://globalratings.com"><font><font>التقييم التحالف العمر الدولي</font></font></a><font><font> (IARC) لتشمل تصنيفات المحتوى المرتبط بالعمر جنبا إلى جنب مع جميع التطبيقات. </font><font>لأن موزيلا يهتم المستخدمين ويعتقد أن المستخدمين يجب أن تتاح الفرصة لتقرر أي محتوى غير مناسب لهم سيطلب من جميع التطبيقات في السوق فايرفوكس ليكون لها تصنيف IARC. </font><font>بينما نحن نحب كل من التطبيقات، التزامنا لهذه المبادرة يتطلب أي التطبيق أو اللعبة التي لم يكن لديك هذا التصنيف لشطبها من السوق بعد الموعد النهائي. </font><font>موزيلا قد مدد dealine إلى 15 مايو 2014 للسماح للمطورين متسع من الوقت لتحديث التطبيقات عبر حرة IARC أداة التصنيف.</font></font></p> +</div> + +<h2 id="حول_أداة_IARC_التقييم"><font><font>حول أداة IARC التقييم</font></font></h2> + +<p><font><font>IARC، وهو جهد تعاوني بين لوحات التصنيف الدولية، أدخلت أداة تقييم كحل لتعيين تصنيفات المحتوى إلى العالمية، وتطبيقات موزعة رقميا والألعاب. </font><font>عن طريق ملء استمارة بسيطة، يمكنك الحصول على التسميات تصنيف الفورية لجميع لوحات التصنيف المشاركة. </font><font>هذا لا يساعد فقط على تثقيف المستخدمين حول المحتوى، ولكن أيضا يقلل بشكل كبير من التكاليف والمتاعب المرتبطة بالحصول على مختلف تصنيفات المحتوى العالمي بشكل فردي.</font></font></p> + +<h2 id="أنظمة_التصنيف_الدولية_المعتمدة"><font><font>أنظمة التصنيف الدولية المعتمدة</font></font></h2> + +<p><font><font>باستخدام معالج تصنيف واحد، يتم إنشاء تصنيفات المحتوى للأنظمة والدول تصنيف متعددة والمناطق.</font></font></p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col"><font><font>نظام التقييم</font></font></th> + <th scope="col"><font><font>الدول المعتمدة</font></font></th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="http://culturadigital.br/classind/"><font><font>Classificação Indicativa </font></font></a></td> + <td><font><font>البرازيل</font></font></td> + </tr> + <tr> + <td><a href="http://www.esrb.org/"><font><font>ESRB</font></font></a></td> + <td><font><font>كندا، المكسيك، الولايات المتحدة الأمريكية</font></font></td> + </tr> + <tr> + <td><a href="http://www.pegi.info"><font><font>PEGI</font></font></a></td> + <td><font><font>النمسا، الدنمارك، هنغاريا، لاتفيا، والنرويج، وسلوفينيا، بلجيكا، استونيا، أيسلندا، ليتوانيا، بولندا، اسبانيا، بلغاريا، فنلندا، ايرلندا، لوكسمبورغ، البرتغال، السويد، قبرص، فرنسا، إسرائيل، مالطا، رومانيا، سويسرا، الجمهورية التشيكية ، اليونان، إيطاليا، هولندا، جمهورية سلوفاكيا، المملكة المتحدة</font></font></td> + </tr> + <tr> + <td><a href="http://usk.de/"><font><font>USK</font></font></a></td> + <td><font><font>ألمانيا</font></font></td> + </tr> + <tr> + <td><a href="https://www.globalratings.com/ratings_guide.aspx"><font><font>عام</font></font></a></td> + <td><font><font>تستخدم لجميع دول أخرى</font></font></td> + </tr> + </tbody> +</table> + +<h2 id="ماذا_في_تقييم_المحتوى؟"><font><font>ماذا في تقييم المحتوى؟</font></font></h2> + +<p><font><font>يوفر نظام تصنيف المستخدمين مع ثلاثة أنواع من المعلومات:</font></font></p> + +<ul> + <li><font><font>الحد الأدنى لسن الموصى بها - وهذا قد تختلف من بلد وثقافة.</font></font></li> + <li><font><font>واصفات المحتوى - وهذا يوفر معلومات حول أي محتوى يتضمن التطبيق التي قد تكون مصدر قلق لبعض المستخدمين. </font><font>ويمكن أن تشمل هذه المعلومات على العنف، ما يشير إلى تعاطي الكحول أو المخدرات، وعناصر مخيفة، والقمار حقيقية أو بالمحاكاة، الخ</font></font></li> + <li><font><font>عناصر تفاعلية - وهذا يوفر تفاصيل أي تفاعل المستخدم ميزات يحتوي التطبيق، مثل تبادل المعلومات الشخصية، وتقاسم مواقعها، ضمن التطبيق مشتريات وتحميل المحتوى أو مرافق الشبكات الاجتماعية.</font></font></li> +</ul> + +<p><font><font>عملية تقييم مجانية للمطورين، ويستغرق سوى بضع دقائق، وتتكامل مع عملية تقديم فايرفوكس السوق ومطور لوحة أجهزة القياس. </font><font>قبل أن يعاد النظر في التطبيق، يجب أن يكون لديها تصنيف. </font><font>للمستخدمين رؤية تقييم ملائم التطبيق لمنطقتهم على صفحة تفاصيل التطبيق، ويمكن معرفة المزيد من المعلومات ينبغي لها أن تختار لمعرفة المزيد.</font></font></p> + +<h2 id="الحصول_على_تقييم_المحتوى_للتطبيق_الخاص_بك"><font><font>الحصول على تقييم المحتوى للتطبيق الخاص بك</font></font></h2> + +<p><font><font>وقد وفرت IARC أداة مجانية لعبة التقييم التي هي بسيطة وبالنسبة لمعظم التطبيقات، ويأخذ أقل من خمس دقائق. </font><font>في هذا القسم سوف نستعرض هذه العملية.</font></font></p> + +<div class="note"> +<p><strong><font><font>ملاحظة</font></font></strong><font><font> : نحن للأسف لا يمكن أن تقبل شهادات تقدير من الأنظمة الأخرى. </font><font>إذا التطبيق الخاص بك بالفعل على تقييم عام من نظام آخر سوف لا تزال بحاجة للذهاب من خلال عملية شهادة IARC.</font></font></p> +</div> + +<ol> + <li><font><font>تسجيل الدخول إلى الموقع المطور فايرفوكس السوق. </font><font>لا يجوز الوصول إلى أداة تقييم عند تسجيل الدخول في كمطور.</font></font></li> + <li> + <p><font><font>الوصول إلى أداة IARC التقييم خلال عملية التقديم:</font></font></p> + + <p><img alt="يوضح مكان في تدفق تقديم التطبيق حيث التقييم يمكن إدخالها." src="https://mdn.mozillademos.org/files/6579/submission_flow.png" style="border-style: solid; border-width: 1px; height: 239px; width: 200px;"></p> + + <p><font><font>أو من لوحة ديف:</font></font></p> + + <p><img alt="" src="https://mdn.mozillademos.org/files/6623/from_nav_bar.png" style="border-style: solid; border-width: 1px; height: 199px; width: 200px;"></p> + </li> + <li> + <p><font><font>بدء عملية التقييم:</font></font></p> + + <p><img alt="" src="https://mdn.mozillademos.org/files/6583/start_the_rating_process.png" style="border-style: solid; border-width: 1px; height: 242px; width: 600px;"></p> + + <p><font><font>أو إدخال المعلومات الخاصة بك للحصول على تصنيف القائمة:</font></font></p> + + <p><img alt="" src="https://mdn.mozillademos.org/files/6585/enter_existing_rating_info.png" style="border-style: solid; border-width: 1px; height: 276px; width: 600px;"></p> + </li> + <li> + <p><font><font>ملء استبيان قصير:</font></font></p> + + <p><img alt="" src="https://mdn.mozillademos.org/files/6587/questions.png" style="border-style: solid; border-width: 1px; height: 725px; width: 600px;"></p> + </li> + <li> + <p><font><font>إضافة معلومات إضافية حول التطبيق الخاص بك:</font></font></p> + + <p><img alt="" src="https://mdn.mozillademos.org/files/6589/additional_info.png" style="height: 637px; width: 589px;"></p> + </li> + <li> + <p><font><font>المعاينة والتأكد من المعلومات تصويتك:</font></font></p> + + <p><img alt="" src="https://mdn.mozillademos.org/files/6591/confirm_info.png" style="border-style: solid; border-width: 1px; height: 865px; width: 400px;"></p> + </li> + <li> + <p><font><font>العودة إلى لوحة القيادة المطور ويجب أن نرى من المعلومات تصويتك. </font><font>كنت على استعداد للذهاب!</font></font></p> + </li> +</ol> + +<div class="note"> +<p><strong><font><font>ملاحظة</font></font></strong><font><font> : سوف تتلقى رسالة بريد إلكتروني مع شهادة التصنيف الخاص بك ورمز الأمان. </font><font>يرجى الاحتفاظ بنسخة لسجلاتك.</font></font></p> +</div> + +<h2 id="المزيد_من_المعلومات"><font><font>المزيد من المعلومات</font></font></h2> + +<p><font><font>إذا كان لديك أسئلة حول عملية التصنيف، وكيفية الإجابة، أو إذا كنت تعتقد تصويتك غير صحيح، يرجى إرسال بريد إلكتروني فريق IARC في </font></font><a href="mailto:dev-questions@globalratings.com"><font><font>dev-questions@globalratings.com</font></font></a><font><font> . </font><font>تتوفر معلومات إضافية حول أيضا </font></font><a href="http://globalratings.com/"><font><font>تصنيفات الموقع العالمي</font></font></a><font><font> .</font></font></p> + +<p><font><font>إذا كان لديك أي أسئلة أخرى، يمكنك الحصول على اتصال مع فريق الاستعراض التطبيق موزيلا في </font></font><a href="https://groups.google.com/forum/#!forum/mozilla.appreview" title="appreview@lists.mozilla.org"><font><font>mozilla.appreview</font></font></a><font><font> .</font></font></p> diff --git a/files/ar/archive/mozilla/xul/index.html b/files/ar/archive/mozilla/xul/index.html new file mode 100644 index 0000000000..7aa892890b --- /dev/null +++ b/files/ar/archive/mozilla/xul/index.html @@ -0,0 +1,82 @@ +--- +title: XUL +slug: Archive/Mozilla/XUL +translation_of: Archive/Mozilla/XUL +--- +<div class="callout-box"><strong><a href="/en-US/docs/XUL_Tutorial" title="en-US/docs/XUL_Tutorial">XUL Tutorial</a></strong><br> +A guided tutorial that will help you get started with XUL, originally from XULPlanet.</div> + +<div> +<p><span id="result_box" lang="ar"><span class="hps">XML</span></span><span lang="ar"> <span class="hps">(واجهة</span> <span class="hps">XML</span> <span class="hps">العضو</span> <span class="hps">اللغة</span><span>) هو</span> <span class="hps">القائم على اللغة</span> <span class="hps">XML</span> <span class="hps">موزيلا</span> <span class="hps">لبناء واجهات</span> <span class="hps">المستخدم</span> <span class="hps">من التطبيقات</span> <span class="hps">مثل فايرفوكس</span><span>.</span> <span class="hps">يستخدم مصطلح</span> <span class="hps">كسول</span> <span class="hps">أحيانا للإشارة</span> <span class="hps">إلى منصة</span> <span class="hps">موزيلا</span> <span class="atn hps">كاملة (</span><span>تطبيقات</span> <span class="hps">مثل</span> <span class="hps">XUL</span> <span class="hps">هي</span> <span class="hps">التطبيقات التي تستخدم</span> <span class="hps">كسول</span> <span class="hps">والمكونات الأخرى</span> <span class="hps">من</span> <span class="hps">النظام الأساسي</span><span>)</span><span>.</span></span></p> + +<p><a href="/en-US/docs/XUL_controls" title="en-US/docs/XUL_controls">XUL Controls</a> lists some of the common controls provided by XUL.</p> +</div> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Documentation">Documentation</h2> + + <dl> + <dt><strong><a href="/en-US/docs/XUL_Tutorial" title="en-US/docs/XUL_Tutorial">XUL Tutorial</a></strong></dt> + <dd>A guided tutorial that will help you get started with XUL, originally from XULPlanet.</dd> + <dt><a href="/en-US/docs/XUL_Reference" title="en-US/docs/XUL_Reference">XUL Reference</a></dt> + <dd>XUL elements, attributes, properties, methods, and event handlers.</dd> + <dt><a href="/en-US/docs/XUL_controls" title="en-US/docs/XUL_controls">XUL Controls</a></dt> + <dd>A quick list of all of the available XUL controls.</dd> + <dt><a href="/en-US/docs/The_Joy_of_XUL" title="en-US/docs/The_Joy_of_XUL">The Joy of XUL</a></dt> + <dd>Describes the key features and components of XUL.</dd> + <dt><a href="/en-US/docs/XUL/PopupGuide" title="en-US/docs/XUL/PopupGuide">Menus and Popups Guide</a></dt> + <dd>A guide on using menus and popup panels.</dd> + <dt><a href="/en-US/docs/XUL/Template_Guide" title="en-US/docs/XUL/Template_Guide">Template Guide</a></dt> + <dd>A detailed guide on XUL templates, which is a means of generating content from a datasource.</dd> + <dt><a href="/en-US/docs/DragDrop/Drag_and_Drop" title="Drag and Drop">Drag and Drop</a></dt> + <dd>How to perform drag and drop operations.</dd> + <dt><a href="/en-US/docs/XUL_Overlays" title="en-US/docs/XUL_Overlays">Overlays</a></dt> + <dd>Overlays are used to describe extra content for the UI. They provide a powerful mechanism for extending and customizing existing XUL applications.</dd> + </dl> + + <dl> + <dt>XUL Periodic Table</dt> + <dd>This collection of XUL demos used to be available as a web page, but can no longer be viewed in Firefox since support for <a href="/en-US/docs/Remote_XUL" title="/en-US/docs/Remote_XUL">Remote XUL</a> was disabled. There is a XULRunner application containing the XUL Periodic Table which can be opened with Gecko based browsers. <a href="https://github.com/matthewkastor/XULRunner-Examples" title="https://github.com/matthewkastor/XULRunner-Examples">You can get it here</a>. See: <a href="/en-US/docs/XULRunner_tips#Using_Firefox_3_to_run_XULRunner_applications" title="/en-US/docs/XULRunner_tips#Using_Firefox_3_to_run_XULRunner_applications">XULRunner_tips#Using_Firefox_3_to_run_XULRunner_applications</a> for instructions on running XULRunner apps in Firefox.</dd> + <dt>Changes to XUL</dt> + <dd>New XUL features and changes to existing features are included in the <a href="/en-US/docs/Mozilla/Firefox/Releases" title="/en-US/docs/Mozilla/Firefox/Releases">Firefox developer release notes</a>.</dd> + </dl> + + <p><span class="alllinks"><a href="/en-US/docs/tag/XUL" title="tag/XUL">View All...</a></span></p> + </td> + <td> + <h2 class="Community" id="Community">Community</h2> + + <ul> + <li>View Mozilla forums...{{ DiscussionList("dev-tech-xul", "mozilla.dev.tech.xul") }}</li> + <li><a class="link-irc" href="irc://irc.mozilla.org/xul">#xul on irc.mozilla.org</a></li> + </ul> + + <h2 class="Tools" id="Tools">Tools</h2> + + <ul> + <li><a class="external" href="/en-US/docs/XUL_Explorer" title="en-US/docs/XUL_Explorer">XUL Explorer</a> (a lightweight XUL IDE)</li> + <li><a href="https://github.com/matthewkastor/XULExplorer" title="https://github.com/matthewkastor/XULExplorer">XULExplorer</a> (Patched version of XUL explorer)</li> + <li><a class="external" href="http://ted.mielczarek.org/code/mozilla/extensiondev/">Extension developer's extension</a> (featuring a Live XUL Editor)</li> + <li><a class="external" href="http://forum.addonsmirror.net/index.php?showtopic=751" title="http://forum.addonsmirror.net/index.php?showtopic=751">XULRef sidebar</a></li> + <li><a class="external" href="http://www.getfirebug.com/">Firebug</a></li> + <li><a href="/en-US/docs/DOM_Inspector" title="en-US/docs/DOM_Inspector">DOM Inspector</a></li> + <li><a class="external" href="http://www.spket.com/">Spket IDE</a>, IDE for XUL/XBL</li> + <li><a class="external" href="http://www.amplesdk.com" title="http://www.amplesdk.com/">Ample SDK</a>, (Cross-browser XUL renderer in JavaScript/HTML)</li> + </ul> + + <p><span class="alllinks"><a href="/en-US/docs/tag/tools" title="tag/tools">View All...</a></span></p> + + <h2 class="Related_Topics" id="Related_Topics">Related Topics</h2> + + <ul> + <li><a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a>, <a href="/en-US/docs/XBL" title="en-US/docs/XBL">XBL</a>, <a href="/en-US/docs/CSS" title="en-US/docs/CSS">CSS</a>, <a href="/en-US/docs/RDF" title="en-US/docs/RDF">RDF</a>, <a href="/en-US/docs/Extensions" title="en-US/docs/Extensions">Extensions</a>, <a href="/en-US/docs/XULRunner" title="en-US/docs/XULRunner">XULRunner</a></li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p> </p> diff --git a/files/ar/archive/mozilla/xulrunner/getting_started_with_xulrunner/index.html b/files/ar/archive/mozilla/xulrunner/getting_started_with_xulrunner/index.html new file mode 100644 index 0000000000..558d7c8163 --- /dev/null +++ b/files/ar/archive/mozilla/xulrunner/getting_started_with_xulrunner/index.html @@ -0,0 +1,266 @@ +--- +title: الشروع في العمل مع XULRunner +slug: Archive/Mozilla/XULRunner/Getting_started_with_XULRunner +translation_of: Archive/Mozilla/XULRunner/Getting_started_with_XULRunner +--- +<p>{{ Next("Windows and menus in XULRunner") }}</p> + +<p><span class="short_text" id="result_box" lang="ar"><span class="hps">يستكشف هذا المقال </span></span><a href="https://developer.mozilla.org/en-US/docs/The_Mozilla_platform" title="/en-US/docs/The_Mozilla_platform">منصة موزيلا </a><span id="result_box" lang="ar"><span class="hps">من خلال بناء</span> <span class="hps">تطبيقات سطح المكتب</span> <span class="hps">الأساسي</span> <span class="hps">باستخدام</span> </span><a href="https://developer.mozilla.org/en-US/docs/XULRunner" title="/en-US/docs/XULRunner">XULRunner</a><span lang="ar"><span>. </span></span><span class="short_text" id="result_box" lang="ar"><span class="hps">وبالنظر إلى أن</span> <span class="hps">فايرفوكس</span><span>، طائر الرعد، </span></span>وغيرها من التطبيقات المتعددة المكتوبة باستخدام المنصة، فهي رهان آمن أنه يمكن استخدامها لبناء التطبيق الأساسي. <span id="result_box" lang="ar"><span class="hps">هناك</span> <span class="hps">مقال</span> <span class="hps">مع اتباع نهج</span> <span class="hps">أكثر تعقيدا ل</span><span>بناء تطبيقات</span> <span class="hps">XULRunner</span> <span class="hps">في </span></span><a href="https://developer.mozilla.org/en-US/docs/Creating_XULRunner_Apps_with_the_Mozilla_Build_System">إنشاء تطبيقات XULRunner مع موزيلا بناء النظام. </a><span id="result_box" lang="ar"><span class="hps">إذا</span> <span class="hps">كنت بحاجة إلى تغيير</span> <span class="hps">XULRunner</span> <span class="hps">نفسه</span> <span class="hps">أو</span> <span class="hps">دمجه</span> <span class="hps">مع</span> <span class="hps">ثنائيات</span> <span class="hps">الخارجية</span> <span class="hps">قد تحتاج إلى</span> <span class="hps">قراءة</span> <span class="hps">هذه المقال.</span></span><span lang="ar"><span> </span></span><span class="short_text" lang="ar"><span class="hps"> </span></span></p> + +<h2 id="Step_1:_Download_XULRunner" name="Step_1:_Download_XULRunner"><span class="short_text" id="result_box" lang="ar"><span class="hps">الخطوة 1</span><span>: تحميل</span> <span class="hps">XULRunner</span></span></h2> + +<p><span id="result_box" lang="ar"><span class="hps">يمكنك العثور على</span> <span class="hps">رابط التحميل</span> <span class="hps">في الصفحة</span> <span class="hps">الرئيسية</span> <a href="https://developer.mozilla.org/en-US/docs/XULRunner">XULRunner</a> <span class="hps">هنا</span> <span class="hps">على</span> <span class="hps">MDN</span><span>. </span></span>ومنذ حين أننا لا نخلق أي مكون من مكونات XPCOM الثنائية، نحن بحاجة فقط لتنزيل وتثبيت حزمة وقت التشغيل XULRunner، وليس <a href="https://developer.mozilla.org/en-US/docs/Gecko_SDK">SDK</a>.</p> + +<p>تحميل XULRunner لـ ويندوز هو ملف مضغوط، ليس مناسباً تثبيته. كمطور، أنا أحب فكرة أن XULRunner يكون فقط ملفات غير مضغوطة على الجهاز الخاص بي. وأنا على افتراض أنها لا تحتاج إلى ربط في نظام ويندوز الخاص بي، وهذا شيء جيد. وهذا يعني أيضا أن XULRunner هو قابل للحمل كذلك، إذا كنت طورت التطبيقات الخاصة بك لتكون محمولة يمكنك أن تحملها وتحولها على محرك أقراص أو مزامنتها في السحابة.</p> + +<p><span id="result_box" lang="ar"><span class="hps">يتم توزيع</span> <span class="hps">نسخة ماك</span> <span class="hps">من</span> <span class="hps">XULRunner</span> <span class="hps">كأرشيف</span> <span class="hps">tar.bz2</span><span>.</span> <span class="hps">يمكنك استخراج</span> <span class="hps">هذه</span> <span class="hps">إلى أي مكان</span> <span class="hps">تريد، </span></span>لكن هناك العديد من المواضيع في الوثائق التي من شأنها أن نفترض أن لديك هذا مثبت في <code>\Library\Frameworks</code>.</p> + +<p>في أوبونتو سطح المكتب ومشتقاته (Xubuntu, Kubuntu, ...)، من الإصدار 11.10 (Oneiric Ocelot)، لم تعد تحتفظ بـ XULRunner وغير موجود في مستودع أوبونتو. لذلك، ربما تحتاج إلى تجميع XULRunner يدوياً أو تحميل الأفراج ثنائي من خادم FTP موزيلا. ولتحقيق ذلك، يجب تشغيل السكربيت التالي في كل مرة ترغب بتثبيت نسخة جديدة:</p> + +<div class="note"><code>FIREFOX_VERSION=`grep -Po "\d{2}\.\d+" /usr/lib/firefox/platform.ini`<br> +ARCH=`uname -p`<br> +XURL=https://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/$FIREFOX_VERSION/runtimes/xulrunner-$FIREFOX_VERSION.en-US.linux-$ARCH.tar.bz2<br> +cd /opt<br> +sudo sh -c "wget -O- $XURL | tar -xj"<br> +sudo ln -s /opt/xulrunner/xulrunner /usr/bin/xulrunner<br> +sudo ln -s /opt/xulrunner/xpcshell /usr/bin/xpcshell </code></div> + +<p>يمكنك أيضاً حفظ السكربيت إلى ملف لتوفير العناء عليك. ملاحظة: إذا كنت تستخدم Firefox build من مستودع Ubuntuzilla، استبدال <code>/usr/lib/firefox/platform.ini مع </code> <code>/opt/firefox/platform.ini</code>.</p> + +<h2 id="Step_2:__Install_XULRunner" name="Step_2:__Install_XULRunner"><span class="short_text" id="result_box" lang="ar"><span class="hps">الخطوة 2</span><span>: تثبيت</span> <span class="hps">XULRunner</span></span></h2> + +<p>على ويندوز، فك الأرشيف في مكان معقول. I فكه إلى ملف جديد في (<code>C:\program files\xulrunner</code> folder).</p> + +<p>على ماك، استخراج الأرشيف tar.bz2، الذي يحتوي على XULRunner كما XUL.Framework. نسخ هذا إلى ( <code>/Library/Frameworks</code> directory)، أو موقع آخر من اختيارك.</p> + +<p>على لينكس، تحتاج فقط إلى فك الأرشيف إذا كنت تستخدم ما قبل الأفراج XULRunner.</p> + +<div class="note"> +<p>في جميع النظم يجب عليك فك الملف <a href="https://developer.mozilla.org/en-US/docs/Mozilla/About_omni.ja_(formerly_omni.jar)">omni.ja</a> إلى الدليل على سبيل المثال وألقاء نظرة عبى محتوياته لترى كم هي مدهشة! ولفعل ذلك عليك تغير أمتداد الملف إلى (zip) و أستخدام أداة الضفط العادية لأستخراج الملفات وفتحه. محتويات omni.ja المتاحة لتطبيقات XULRunner هي التي تجعل من الممكن لبناء تطبيقات مذهلة بسهولة!</p> +</div> + +<h2 id="Step_3:_Create_the_application_folder_structure" name="Step_3:_Create_the_application_folder_structure"><span class="short_text" id="result_box" lang="ar"><span class="hps">الخطوة 3</span><span>:</span> <span class="hps">إنشاء هيكل</span> <span class="hps">مجلد التطبيق</span></span></h2> + +<p>حان الوقت للبدء بمثال بسيط وكشف هيكل التطبيق shell. ونسميها XUL "مرحباً بالعالم" <span id="result_box" lang="ar"><span class="hps">إذا كنت تريد. وكل ما تراه أدناه</span> <span class="hps">يمكن العثور عليها في</span> <span class="hps">وثائق</span> <a href="https://developer.mozilla.org/en-US/docs/XULRunner">XULRunner</a> <span class="hps">هنا</span> <span class="hps">على</span> <span class="hps">MDN</span> <span class="hps">بمزيد</span> <span class="hps">من التفاصيل</span><span>.</span></span></p> + +<div class="note"> +<p><strong>تلميح</strong>: تخطي إلى الأمام وتحميل نموذج التطبيق، يمكنك تجربة ذلك و أنت تتابع هذا البرنامج التعليمي. يمكنك تنزيل عينة التطبيق من <a href="https://github.com/matthewkastor/XULRunner-Examples" title="https://github.com/matthewkastor/XULRunner-Examples">https://github.com/matthewkastor/XULRunner-Examples</a>. يرجى مواصلة القراءة لمعرفة "ما"، "لماذا" و "كيف" بناء أجزاء التطبيق في XULRunner.</p> +</div> + +<p>On Windows, I created the root in a new <code>c:\program files\myapp</code> folder, but you can create it wherever you like, using whatever OS you like. The same application structure is used on Windows, Mac and Linux. Here is the subfolder structure:</p> + +<pre>+ myapp/ +| ++-+ chrome/ +| | +| +-+ content/ +| | | +| | +-- main.xul +| | | +| | +-- main.js +| | +| +-- chrome.manifest +| ++-+ defaults/ +| | +| +-+ preferences/ +| | +| +-- prefs.js +| ++-- application.ini +| ++-- chrome.manifest +</pre> + +<p>Notice that there are 5 files in the folder structure: <code>application.ini</code>, <code>chrome.manifest (2)</code>, <code>prefs.js</code>, and <code>main.xul</code>. The <code>/chrome/chrome.manifest</code> file is optional, but might be useful for backward compatibility. See the note below.</p> + +<div class="note"> +<p>For more details on the structure of installable bundles in general see: <a href="/en-US/docs/Bundles" title="/en-US/docs/Bundles">Structure of an installable bundle</a>.</p> +</div> + +<div class="note"><strong>Note:</strong> In XULRunner 2.0, the chrome.manifest is now used to register XPCOM components in addition to its previous uses. Part of this change means the <code>/chrome/chrome.manifest</code> is no longer considered the "root" manifest. XULRunner will not check that folder location for a root-level <code>chrome.manifest</code>. You need to move your existing chrome.manifest to the application root folder, remembering to update the relative paths within the file. You could also just create a new application root-level manifest that includes the <code>/chrome/chrome.manifest</code>, which is what this tutorial will do.</div> + +<h2 id="Step_4:_Set_up_application.ini" name="Step_4:_Set_up_application.ini">Step 4: <code>Set up application.ini</code></h2> + +<p>The<code> <a href="/en-US/docs/XUL_Application_Packaging" title="/en-US/docs/XUL_Application_Packaging">application.ini</a> </code>file acts as the XULRunner entry point for your application. It specifies how your application intends to use the XULRunner platform as well as configure some information that XULRunner uses to run your application. Here is mine:</p> + +<pre>[App] +Vendor=XULTest +Name=myapp +Version=1.0 +BuildID=20100901 +ID=xulapp@xultest.org + +[Gecko] +MinVersion=1.8 +MaxVersion=200.* +</pre> + +<div class="note"><strong>Note:</strong> The <code>MinVersion</code> and <code>MaxVersion</code> fields indicate the range of Gecko versions your application is compatible with; make sure that you set them so that the version of XULRunner you're using is in that range, or your application won't work.</div> + +<div class="note"><strong>Note</strong>: Make sure your application name is lowercase and longer than 3 characters</div> + +<h2 id="Step_5:_Set_up_the_chrome_manifest" name="Step_5:_Set_up_the_chrome_manifest">Step 5: Set up the chrome manifest</h2> + +<p>The <a href="/en-US/docs/Chrome_Registration" title="/en-US/docs/Chrome_Registration">chrome manifest</a> file is used by XULRunner to define specific URIs which in turn are used to locate application resources. This will become clearer when we see how the “chrome://” URI is used. Application chrome can be in a single or a few JAR files or uncompressed as folders and files. I am using the uncompressed method for now. Here is the <code>chrome/chrome.manifest</code>:</p> + +<pre class="eval"> content myapp content/ +</pre> + +<p>As mentioned in Step 3, the default location of the <code>chrome.manifest</code> has changed in XULRunner 2.0, so we also need a simple <code>chrome.manifest</code> in the <strong>application</strong> root which will include the the manifest in our <strong>chrome</strong> root. Here is the application root <code>chrome.manifest</code>:</p> + +<pre>manifest chrome/chrome.manifest</pre> + +<h2 id="Step_6:_Set_up_preferences" name="Step_6:_Set_up_preferences">Step 6: Set up preferences</h2> + +<p>The <a href="/en-US/docs/Mozilla/Preferences/A_brief_guide_to_Mozilla_preferences" title="/en-US/docs/Mozilla/Preferences/A_brief_guide_to_Mozilla_preferences">prefs.js</a> file tells XULRunner the name of the XUL file to use as the main window. Here is mine:</p> + +<pre class="eval">pref("toolkit.defaultChromeURI", "<span class="external">chrome://myapp/content/main.xul</span>"); + +/* debugging prefs, disable these before you deploy your application! */ +pref("browser.dom.window.dump.enabled", true); +pref("javascript.options.showInConsole", true); +pref("javascript.options.strict", true); +pref("nglayout.debug.disable_xul_cache", true); +pref("nglayout.debug.disable_xul_fastload", true); +</pre> + +<p>XULRunner specific preferences include:</p> + +<dl> + <dt><code><a href="/en-US/docs/toolkit.defaultChromeURI" title="/en-US/docs/toolkit.defaultChromeURI">toolkit.defaultChromeURI</a></code></dt> + <dd>Specifies the default window to open when the application is launched.</dd> + <dt><code><a href="/en-US/docs/toolkit.defaultChromeFeatures" title="/en-US/docs/toolkit.defaultChromeFeatures">toolkit.defaultChromeFeatures</a></code></dt> + <dd>Specifies the features passed to <code><a href="/en-US/docs/DOM:window.open" title="/en-US/docs/DOM:window.open">window.open()</a></code> when the main application window is opened.</dd> + <dt><code><a href="/en-US/docs/toolkit.singletonWindowType" title="/en-US/docs/toolkit.singletonWindowType">toolkit.singletonWindowType</a></code></dt> + <dd>Allows configuring the application to allow only one instance at a time.</dd> +</dl> + +<div class="note"> +<p>The toolkit preferences are described in further detail in <a href="/en-US/docs/XULRunner/Specifying_Startup_Chrome_Window" title="/en-US/docs/XULRunner/Specifying_Startup_Chrome_Window">XULRunner:Specifying Startup Chrome Window</a>.</p> + +<p>The debugging preferences are discussed in <a href="/en-US/docs/Debugging_a_XULRunner_Application" title="/en-US/docs/Debugging_a_XULRunner_Application">Debugging a XULRunner Application</a></p> +</div> + +<h2 id="Step_7:_Create_some_XUL" name="Step_7:_Create_some_XUL">Step 7: Create some XUL</h2> + +<p>Finally, we need to create a simple <a href="/en-US/docs/XUL/window" title="/en-US/docs/XUL/window">XUL window</a>, which is described in the file <code>main.xul</code>. Nothing fancy here, just the minimum we need to make a window. No menus or anything.</p> + +<p>main.xul:</p> + +<pre><?xml version="1.0"?> + +<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> + +<window id="main" title="My App" width="300" height="300" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + + <script type="application/javascript" src="chrome://myapp/content/main.js"/> + + <caption label="Hello World"/> + <separator/> + <button label="More >>" oncommand="showMore();"/> + <separator/> + <description id="more-text" hidden="true">This is a simple XULRunner application. XUL is simple to use and quite powerful and can even be used on mobile devices.</description> + +</window> +</pre> + +<div class="note"><strong>Note:</strong> Make sure there is no extra whitespace at the beginning of the XML/XUL file</div> + +<p>The application also has a JavaScript file. Most XUL applications will include some external JavaScript, so the sample application does too, just to show how to include it into the XUL file.</p> + +<p>main.js:</p> + +<pre>function showMore() { + document.getElementById("more-text").hidden = false; +} +</pre> + +<div class="note"> +<p>For more information about XUL see: <a href="/en-US/docs/XUL" title="/en-US/docs/XUL">XUL</a>.</p> + +<p>For information about mixing HTML elements into your XUL read <a href="/en-US/docs/XUL/Tutorial/Adding_HTML_Elements" title="/en-US/docs/XUL/Tutorial/Adding_HTML_Elements">Adding HTML Elements</a>.</p> +</div> + +<h2 id="Step_8:_Run_the_application" name="Step_8:_Run_the_application">Step 8: Run the application</h2> + +<p>The moment of truth. We need to get XULRunner to launch the bare-bones application.</p> + +<h3 id="Windows">Windows</h3> + +<p>From a Windows command prompt opened to the <code>myapp</code> folder, we should be able to execute this:</p> + +<pre class="eval"> C:\path\to\xulrunner.exe application.ini +</pre> + +<p>Of course, if you opted to install xulrunner then you could simply do</p> + +<pre><span style="font-family: courier new,andale mono,monospace; line-height: normal;">%ProgramFiles%\xulrunner.exe application.ini</span></pre> + +<p><span style="font-size: 14px; line-height: 1.572;">or on 64 bit systems</span></p> + +<pre><span style="font-family: courier new,andale mono,monospace; line-height: normal;">%ProgramFiles(x86)%\xulrunner.exe application.ini</span></pre> + +<div class="note"> +<p><span style="font-size: 14px; line-height: 1.572;"><strong>Note</strong>: you can also install your application when you're finished debugging it. See <a href="/en-US/docs/XUL_Application_Packaging" title="/en-US/docs/XUL_Application_Packaging">XUL Application Packaging</a> for details.</span></p> +</div> + +<h3 id="Mac">Mac</h3> + +<p>On the Mac, before you can run a XULRunner application with everything intact, you must install it using the <code>--install-app</code> xulrunner commandline flag. Installing the application creates an OS X application bundle:</p> + +<pre class="eval"> /Library/Frameworks/XUL.framework/xulrunner-bin --install-app /<path>/<to>/myapp.zip +</pre> + +<p>Once installed, you can run the application:</p> + +<pre class="eval"> /Library/Frameworks/XUL.framework/xulrunner-bin "/Applications/Finkle/TestApp.app/Contents/Resources/application.ini" +</pre> + +<p>You may run it without installing (but with the menu bar and dock icon missing) in OS X by typing:</p> + +<pre>/Library/Frameworks/XUL.framework/xulrunner-bin "/<full path>/TestApp/application.ini" +</pre> + +<div class="note"> +<p>Note: The full path is required or a "Error: couldn't parse application.ini."-message will be returned.</p> +</div> + +<p>This might also be simplified using a very simple shell script (i call mine "run.sh"):</p> + +<pre>#!/bin/sh +/Library/Frameworks/XUL.framework/xulrunner-bin `pwd`/application.ini +</pre> + +<h3 id="Linux">Linux</h3> + +<p>On Ubuntu, you can run the application from a terminal. First change into the <code>\myapp</code> folder, then start the application by:</p> + +<pre class="eval"> xulrunner application.ini +</pre> + +<p>You should now see a window that looks something like this. This particular screenshot is from Ubuntu 10.</p> + +<p><img alt="myapp-screenshot.png" class="default internal" src="/@api/deki/files/4679/=myapp-screenshot.png"></p> + +<h3 id="Alternative:_Use_Firefox3_-app_to_run_XUL_apps" name="Alternative:_Use_Firefox3_-app_to_run_XUL_apps">Alternative: Run XUL apps with Firefox</h3> + +<p>With Firefox 3 and later, you can tell the Firefox executable to run a XUL application from the command line. The XUL application will run instead of the Firefox browser that normally starts. This is similar to starting a XUL app using XULRunner. See <a href="/en/XULRunner_tips#Using_Firefox_to_run_XULRunner_applications" title="en/XULRunner_tips#Using_Firefox_to_run_XULRunner_applications">Using Firefox to run XULRunner applications</a>. This does not work if Firefox itself was installed as a XUL app - you need to use the installed XULRunner directly.</p> + +<h2 id="Further_Reading">Further Reading:</h2> + +<p>There are many things you can do with XULRunner. Before you get too far into things you might want to read the <a href="/en-US/docs/XULRunner_tips" title="/en-US/docs/XULRunner_tips">XULRunner tips</a> article. Also, throughout this tutorial you've been introduced to various bits of the <a href="/en-US/docs/Toolkit_API" title="/en-US/docs/Toolkit_API">Toolkit API</a> and it may help you to get familiar with it. Once you've got an application that's ready for the world you'll love our article titled <a href="/en-US/docs/XULRunner/Deploying_XULRunner_1.8" title="/en-US/docs/XULRunner/Deploying_XULRunner_1.8">Deploying XULRunner</a>.</p> + +<p>For now, click the "next" link to learn about windows and menus in XULRunner!</p> + +<p>{{ Next("Windows and menus in XULRunner") }}</p> + +<div class="originaldocinfo"> +<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2> + +<ul> + <li>Author: Mark Finkle, October 2, 2006</li> +</ul> +</div> + +<p>{{ languages( { "ja": "ja/Getting_started_with_XULRunner", "ko": "ko/Getting_started_with_XULRunner" } ) }}</p> diff --git a/files/ar/archive/mozilla/xulrunner/index.html b/files/ar/archive/mozilla/xulrunner/index.html new file mode 100644 index 0000000000..76fc75584f --- /dev/null +++ b/files/ar/archive/mozilla/xulrunner/index.html @@ -0,0 +1,88 @@ +--- +title: XULRunner +slug: Archive/Mozilla/XULRunner +tags: + - NeedsTranslation + - NeedsUpdate + - TopicStub + - XUL + - XULRunner +translation_of: Archive/Mozilla/XULRunner +--- +<div class="callout-box"><strong><a href="/en-US/docs/Getting_started_with_XULRunner" title="Getting_started_with_XULRunner">Getting Started with XULRunner</a></strong><br> +A short introduction to XULRunner.</div> + +<div><span class="seoSummary"><strong>XULRunner</strong> is a Mozilla runtime package that can be used to bootstrap <a href="/en-US/docs/XUL" title="XUL">XUL</a>+<a href="/en-US/docs/XPCOM" title="XPCOM">XPCOM</a> applications that are as rich as Firefox and Thunderbird. It provides mechanisms for installing, upgrading, and uninstalling these applications.</span> XULRunner also provides <code>libxul</code>, a solution which allows the embedding of Mozilla technologies in other projects and products.</div> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 id="Releases" name="Releases">Releases</h2> + + <div class="note"> + <p>Until version 41, XULRunner could be <a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/latest" title="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/">downloaded from ftp.mozilla.org</a>.</p> + + <p>Firefox (from version 3) ships with a private XULRunner package, which can run any compatible XULRunner application using the <code>-app</code> switch: <em><code>firefox -app application.ini</code> is equivalent to <code>xulrunner -app application.ini</code></em></p> + + <p><a href="/en-US/docs/XULRunner/Old_Releases" title="XULRunner/Old_Releases">Older builds</a> are also available.</p> + </div> + + <h2 id="Overview" name="Overview">Overview</h2> + + <ul> + <li>{{ interwiki('wikimo', 'XULRunner', 'Development Plan') }}</li> + <li><a href="/en-US/docs/XULRunner/What_XULRunner_Provides" title="XULRunner/What_XULRunner_Provides">What XULRunner Provides</a></li> + <li><a href="/en-US/docs/XULRunner_FAQ" title="XULRunner_FAQ">XULRunner FAQ</a></li> + <li>Nightly builds: <a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/nightly/latest-trunk/">unstable-trunk</a></li> + </ul> + + <h2 class="Documentation" id="Documentation" name="Documentation">Documentation</h2> + + <dl> + <dt><a href="/en-US/docs/Getting_started_with_XULRunner" title="Getting_started_with_XULRunner">Getting Started with XULRunner</a></dt> + <dd>Short tutorial on building desktop applications with XULRunner.</dd> + <dt><a href="/en-US/docs/XUL_Tutorial" title="XUL Tutorial">XUL Tutorial</a></dt> + <dd>Once you have a working XULRunner application, use the XUL tutorial to expand it into a fantastic XUL application.</dd> + <dt><a href="/en-US/docs/XULRunner_tips" title="XULRunner_tips">XULRunner tips</a></dt> + <dd>A collection of tips for working with XULRunner.</dd> + <dt><a href="/en-US/docs/XULRunner/Deploying_XULRunner_1.8" title="XULRunner/Deploying_XULRunner_1.8">Deploying XULRunner</a></dt> + <dd>An introduction on how to package your application with XULRunner.</dd> + <dt><a href="/en-US/docs/XULRunner_Hall_of_Fame" title="XULRunner_Hall_of_Fame">XULRunner Hall of Fame</a></dt> + <dd>Tracks all available applications based on XULRunner.</dd> + <dt><a href="/en-US/docs/Developer_Guide/Build_Instructions" title="Build_Documentation">Build Documentation</a></dt> + <dd>Learn how to get the source and build it.</dd> + <dt><a href="/en-US/docs/Debugging_a_XULRunner_Application" title="Debugging_a_XULRunner_Application">Debug Documentation</a></dt> + <dd>Steps to configure Venkman to debug your App</dd> + <dt><a class="external" href="http://zenit.senecac.on.ca/wiki/index.php/XULRunner_Guide">XULRunner Guide</a></dt> + <dd>A fairly complete, but outdated, introduction and tutorial for XULRunner which collates much of the documentation found here.</dd> + </dl> + + <p><span class="alllinks"><a href="/en-US/docs/tag/XULRunner" title="tag/XULRunner">View all...</a></span></p> + </td> + <td> + <h2 class="Community" id="Community" name="Community">Community</h2> + + <ul> + <li>View Mozilla forums... {{ DiscussionList("dev-platform", "mozilla.dev.platform") }}</li> + <li><a class="link-irc" href="irc://irc.mozilla.org/#xulrunner">#xulrunner on irc.mozilla.org</a></li> + <li><a href="/en-US/docs/XULRunner/Community" title="XULRunner/Community">Other community links...</a></li> + </ul> + + <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related topics</h2> + + <ul> + <li><a href="/en-US/docs/XUL" title="XUL">XUL</a></li> + </ul> + + <h2 id="See_also" name="See_also">See also</h2> + + <ul> + <li><a class="external" href="http://www.kodewerx.org/wiki/A_Brief_Introduction_To_XULRunner:_Part_1" title="http://www.kodewerx.org/wiki/A_Brief_Introduction_To_XULRunner:_Part_1">A brief introduction to XULRunner</a></li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p> </p> diff --git a/files/ar/archive/themes/index.html b/files/ar/archive/themes/index.html new file mode 100644 index 0000000000..a440be2e7a --- /dev/null +++ b/files/ar/archive/themes/index.html @@ -0,0 +1,11 @@ +--- +title: Themes +slug: Archive/Themes +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/Themes +--- +<p>Archived theme documentation.</p> + +<p>{{Listsubpages("/en-US/docs/Archive/Themes", 10)}}</p> diff --git a/files/ar/building_a_theme/index.html b/files/ar/building_a_theme/index.html new file mode 100644 index 0000000000..e254bb4ce8 --- /dev/null +++ b/files/ar/building_a_theme/index.html @@ -0,0 +1,189 @@ +--- +title: Building a Theme +slug: Building_a_Theme +translation_of: Archive/Themes/Building_a_Theme +--- +<h3 class="editable" dir="rtl" id="مقدمة"><strong>مقدمة</strong></h3> +<h4 dir="rtl" id="هذه_الدورة_ستقدم_لكم_الخطوات_المطلوبة_لبناء_نموذجية_لمتصفح_فيرافوكس._واحد_سيقوم_بتحديثات_لون_الخلفية_وشريط_الأدوات_في_فيرافوكس.">هذه الدورة ستقدم لكم الخطوات المطلوبة لبناء نموذجية لمتصفح فيرافوكس. واحد سيقوم بتحديثات لون الخلفية وشريط الأدوات في فيرافوكس.</h4> +<div class="note" dir="rtl"> + <p><strong>ملاحظة: هذه الدورة مخصصة حول بناء سمة لإصدارات فيرافوكس 29 وأعلى، وهناك محاور أخرى لبناء الإصدارات السابقة من فيرافوكس. إنظر:</strong></p> + <p style="text-align: center;"><a class="internal" href="https://developer.mozilla.org/docs/Creating_a_Skin_for_Firefox_Getting_Started" title="en/Creating a Skin for Firefox//Getting Started">Creating a Skin for Firefox</a></p> +</div> +<div id="section_2"> + <h4 class="editable" dir="rtl" id="إعداد_بيئة_التطوير"><strong>إعداد بيئة التطوير</strong></h4> + <p dir="rtl">السمات وملحقات الحزم والموزعة في ملفات ZIP أو <a href="https://developer.mozilla.org/docs/Bundles" rel="internal">Bundles</a> ،من خلال ملف الملحقة XPI (تقرأ"<em>zippy") </em></p> + <p dir="rtl">مثال عن المحتوى داخل ملف نموذجي لـ XPI الخاص بسمة نموذجية:</p> + <pre class="eval">example.xpi: + /<a href="/Add-ons/Install_Manifests" rel="internal">install.rdf</a> + /<a href="/docs/Chrome_Registration" rel="internal">chrome.manifest</a> + /preview.png + /icon.png + /chrome/ + browser/ + communicator/ + global/ + mozapps/ + +</pre> + <p dir="rtl">سنقوم ببناء</p> + <p dir="rtl">We'll want to create a file structure similar to the one above for our tutorial, so let's begin by creating a folder for your theme somewhere on your hard disk (e.g. <code>C:\themes\my_theme\</code> or <code>~/themes/my_theme/</code>). Inside your new theme folder, create two new empty text files, one called <code>chrome.manifest</code> and the other called <code>install.rdf</code>. The file <code>preview.png</code> is shown as a preview of the theme in the themes panel of the add-ons window. The file <code>icon.png</code> is used as an icon in the same panel. We'll leave both of them out for now, unless you have something picked out that you want to use.</p> + <p>The remaining directories will be extracted from the default theme. First, you'll want to create a directory somewhere. <strong>Copy</strong> your Firefox installation's <code>omni.ja</code> into this directory. The location differs by operating system:</p> + <p><strong>Linux:</strong> <code>/usr/lib/MozillaFirefox/chrome/classic.jar</code> <em>or</em> <code>/usr/lib/firefox-*.*.*/omni.ja</code></p> + <p><strong>Windows:</strong> <code>\Program Files\Mozilla Firefox\omni.ja</code></p> + <p><strong>Mac OS X: </strong><code>/Applications/Firefox.app/Contents/MacOS/omni.ja</code></p> + <p>Now, open (or unzip) this file into the directory you created. It contains several folders, <code>modules</code>, <code>jssubloader</code> and others. The files we will be needing are located under the <code>chrome\toolkit\skin\classic</code> folder.</p> + <p>Create a folder called <code>chrome</code>in your theme's folder. Next, the contents of the following directories to their respective folders into the folder.</p> + <ol> + <li><code>global</code> to <code>chrome/global</code></li> + <li><code>mozapps</code> to <code>chrome/mozapps</code></li> + </ol> + <p>Now that you've copied the <code>global</code> and <code>mozapps</code> folders, a handful of other folders from the <code>browser/omni.ja</code> archive are required. It is located in the browser folder in the location mentioned above. The files we will be needing from the browser/omni.ja archive are located under <code>chrome/browser/skin/classic</code>.</p> + <p>Copy the contents of the following directories to their respective folders. This gives us a base set of styles to work with.</p> + <ol> + <li><code>browser</code> to <code>chrome/browser/</code></li> + <li><code>communicator</code> to <code>chrome/communicator/</code></li> + </ol> + <p>You should end up with this directory structure:</p> + <pre><ext path>/ + /install.rdf + /chrome.manifest + /chrome/ + browser/ + communicator/ + global/ + mozapps/ +</pre> + <p>After this, it would be a good idea to read the article <a href="/Add-ons/Setting_up_extension_development_environment" rel="internal">Setting up extension development environment</a> and follow the directions there. It's especially important to install the <a class="internal" href="/en/DOM_Inspector" title="en/DOM Inspector">DOM Inspector</a>, which we'll be using in later steps.</p> +</div> +<div id="section_3"> + <h4 class="editable" id="Create_the_Install_Manifest"><span>Create the Install Manifest</span></h4> + <p>Open the file called <code><a href="/Add-ons/Install_Manifests" rel="internal">install.rdf</a></code> that you created at the top of your extension's folder hierarchy and put this inside:</p> + <pre class="eval"><?xml version="1.0"?> + +<RDF xmlns="<a class="external" href="http://www.w3.org/1999/02/22-rdf-syntax-ns#" rel="freelink">http://www.w3.org/1999/02/22-rdf-syntax-ns#</a>" + xmlns:em="<a class="external" href="http://www.mozilla.org/2004/em-rdf#" rel="freelink">http://www.mozilla.org/2004/em-rdf#</a>"> + + <Description about="urn:mozilla:install-manifest"> + <em:id><strong><a class="link-mailto" href="mailto:sample@example.net" rel="external nofollow" title="mailto:sample@example.net">sample@example.net</a></strong></em:id> + <em:version><strong>1.0</strong></em:version> + <em:type><strong>4</strong></em:type> + + <!-- Target Application this theme can install into, + with minimum and maximum supported versions. --> + <em:targetApplication> + <Description> + <em:id><strong>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</strong></em:id> + <em:minVersion><strong>29.0</strong></em:minVersion> + <em:maxVersion>32<strong>.*</strong></em:maxVersion> + </Description> + </em:targetApplication> + + <!-- Front End MetaData --> + <em:name><strong>My Theme</strong></em:name> + <em:internalName><strong>sample</strong></em:internalName> + <em:description><strong>A test extension</strong></em:description> + <em:creator><strong>Your Name Here</strong></em:creator> + <em:homepageURL><strong><a class="external" href="http://www.example.com/" rel="freelink">http://www.example.com/</a></strong></em:homepageURL> + </Description> +</RDF> +</pre> + <ul> + <li><strong><a class="link-mailto" href="mailto:sample@example.net" rel="external nofollow" title="mailto:sample@example.net">sample@example.net</a></strong> - the ID of the extension. This is a value you come up with to identify your extension in email address format (note that it should not be <em>your</em> email). Make it unique. You could also use a GUID. NOTE: This parameter MUST be in the format of an email address, although it does NOT have to be a valid email address. (example.example.example)</li> + <li><strong>4</strong> - the type of the add-on. '4' declares that it is installing a theme. If you were to install an extension it would be 2 (see <a href="/Add-ons/Install_Manifests#type" rel="internal">Install Manifests#type</a> for other type codes).</li> + <li><strong>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</strong> - Firefox's application ID.</li> + <li><strong>29.0</strong> - the exact version number of the earliest version of Firefox you're saying this extension will work with. Never use a * in a minVersion, it almost certainly will not do what you expect it to.</li> + <li><strong>32.*</strong> - the maximum version of Firefox you're saying this extension will work with. Set this to be no newer than the newest currently available version! In this case, "32.*" indicates that the extension works with Firefox 32 and any subsequent 32.x release. Themes are compatible by default, unless you set strict compatibility mode for your theme.</li> + </ul> + <p>If you get a message that the install.rdf is malformed, it is helpful to load it into firefox using the File->Open File command and it will report XML errors to you.</p> + <p>See <a href="/Add-ons/Install_Manifests" rel="internal">Install Manifests</a> for a complete listing of the required and optional properties.</p> + <p>Save the file.</p> +</div> +<div id="section_4"> + <h4 class="editable" id="Styling_the_Browser's_UI_with_CSS">Styling the Browser's UI with CSS</h4> + <p>Firefox's user interface is written in XUL and JavaScript. <a href="/docs/Mozilla/Tech/XUL" rel="internal">XUL</a> is an XML grammar that provides user interface widgets like buttons, menus, toolbars, trees, etc. User actions are bound to functionality using JavaScript. These XUL elements are styled using <a class="internal" href="/en/CSS" title="en/CSS">CSS</a>. If you don't know CSS, it's going to be a steep learning curve, and you may want to try some HTML-based tutorials to start with.</p> + <p>The browser UI has absolutely no styling on its own - if you try to start up with an empty theme, Firefox will be unusable, as the button elements will be drawn as plain text. This is why we copied the default styles in the setup step.</p> + <p>When writing a theme, the easiest way to determine what CSS selectors you need to write is to use the DOM Inspector which you should have installed in the setup step. You can use this to inspect any element in a web page or an XUL document, which makes it invaluable for themes.</p> + <h4 class="editable" id="Updating_the_toolbar's_Styling">Updating the toolbar's Styling</h4> + <div class="note"> + <p><strong>Note</strong> In Firefox 4.0 and up, the highlight feature of DOM Inspector is broken. To workaround this, disable Hardware Acceleration in Firefox' Options.</p> + </div> + <p>Open up the DOM Inspector now (located under the "Tools" menu), and go to "File->Inspect Chrome Document". This will be a menu containing all the XUL documents currently open in Firefox.<br> + Pick the first document with a web page title, like "Firefox Start Page" and select it.</p> + <p>For this tutorial, we're going to update the background color of the toolbars. Select the node finding tool (the arrow-plus-box in the top-left corner of the DOM Inspector), and click on any unused space on a toolbar. This should select a node of type "xul:toolbar" in the DOM Inspector.</p> + <p>From here, you can play around with various different stylings for the toolbar and associated elements. By default, the right pane should show the DOM node, which has useful styling information like the CSS class and node id. The element itself is of id <code>navigator-toolbox</code>, with no idea. To change its style within our theme, we need to write a selector rule to select this class.</p> + <p>Open up the file <code>chrome/browser/browser.css</code> in your theme. Search this file for the <code>#navigator-toolbox</code> selector, and add a<code> background: orange; </code>rule to it.</p> + <p>Save the file.</p> +</div> +<div id="section_6"> + <h4 class="editable" id="Chrome_URIs"><span>Chrome URIs</span></h4> + <p>Next, we have to tell Firefox where to find the theme files for your theme. CSS, XUL, and other files are part of "<a href="/docs/Chrome_Registration" rel="internal">Chrome Packages</a>" - bundles of user interface components which are loaded via <code><a class="external" rel="external nofollow" title="chrome://">chrome://</a></code> URIs. Rather than load the browser from disk using a <code><a class="external" rel="external nofollow" title="file://">file://</a></code> URI (since the location of Firefox on the system can change from platform to platform and system to system), Mozilla developers came up with a solution for creating URIs to content that the installed add-on knows about.</p> + <p>The browser window is: <code><a class="external" rel="external nofollow" title="chrome://browser/content/browser.xul">chrome://browser/content/browser.xul</a></code>. Try typing this URL into the location bar in Firefox!</p> + <p>Chrome URIs consist of several components:</p> + <ul> + <li>Firstly, the <strong>URI scheme</strong> (<code>chrome</code>) which tells Firefox's networking library that this is a Chrome URI. It indicates that the content of the URI should be handled as a (<code>chrome</code>). Compare (<code>chrome</code>) to (<code>http</code>) which tells Firefox to treat the URI as a web page.</li> + <li>Secondly, a package name (in the example above, <code><strong>browser</strong></code>) which identifies the bundle of user interface components.</li> + <li>Thirdly, the type of data being requested. There are three types: <code>content</code> (XUL, JavaScript, XBL bindings, etc. that form the structure and behavior of an application UI), <code>locale</code> (DTD, .properties files etc that contain strings for the UI's <a href="/docs/Glossary/Localization" rel="internal">localization</a>), and <code>skin</code> (CSS and images that form the <a href="/Add-ons/Themes" rel="internal">theme</a> of the UI)</li> + <li>Finally, the path of a file to load.</li> + </ul> + <p>So, <code><a class="external" rel="external nofollow" title="chrome://foo/skin/bar.png">chrome://foo/skin/bar.png</a></code> loads the file <code>bar.png</code> from the <code>foo</code> theme's <code>skin</code> section.</p> + <p>When you load content using a Chrome URI, Firefox uses the Chrome Registry to translate these URIs into the actual source files on disk (or in JAR packages).</p> +</div> +<div id="section_7"> + <h4 class="editable" id="Create_a_Chrome_Manifest"><span>Create a Chrome Manifest</span></h4> + <p>The Chrome Manifest is the file that maps these Chrome URIs to your theme's files. For more information on Chrome Manifests and the properties they support, see the <a href="/docs/Chrome_Registration" rel="internal">Chrome Manifest</a> Reference.</p> + <p>Open the file called <strong>chrome.manifest</strong> that you created alongside the <code>chrome</code> directory at the root of your extension's source folder hierarchy.</p> + <p>Add in this code:</p> + <pre class="eval">skin browser sample chrome/browser/ +skin communicator sample chrome/communicator/ +skin global sample chrome/global/ +skin mozapps sample chrome/mozapps/ +</pre> + <p><strong>Don't forget the</strong><strong> trailing slash, "<code>/</code>"!</strong> Without it, the package won't be registered. The third column needs to match your theme's <strong>internalName</strong> value from the install manifest above.</p> + <p>This maps skin directories to locations within your theme. For example, the line <code>skin browser sample skin/browser/</code> means "when the user has the <code>sample</code> theme selected, use the directory <code>browser/</code> to look up skins for the <code>browser</code> package." More concisely, this means that the URL <a class="external" title="chrome://browser/skin/some/path/file.css">chrome://browser/skin/some/path/file.css</a> will look for a file <code>browser/some/path/file.css</code> in your theme's root directory.</p> + <p>Save the file.</p> +</div> +<div id="section_9"> + <h4 class="editable" id="Test"><span>Test</span></h4> + <p>First, we need to tell Firefox about your theme. During the development phase for Firefox versions 2.0 and higher, you can point Firefox to the folder where you are developing the theme, and it'll load it up every time you restart Firefox.</p> + <ol> + <li>Locate your <a class="external" href="http://kb.mozillazine.org/Profile_folder" rel="external nofollow" title="http://kb.mozillazine.org/Profile_folder">profile folder</a> and beneath it the profile you want to work with (e.g. <code>Firefox/Profiles/<profile_id>.default/</code>).</li> + <li>Open the <code>extensions/</code> folder, creating it if need be.</li> + <li>Create a new text file and put the full path to your development folder inside (e.g. <code>C:\themes\my_theme\</code> or <code>~/themes/my_theme/)</code>. Windows users should retain the OS' slash direction, and <em>everyone</em> should remember to <strong>include</strong> a closing slash and <strong>remove</strong> any trailing spaces.</li> + <li>Save the file with the id of your theme as its name (e.g. <code><a class="link-mailto" href="mailto:sample@example.net" rel="external nofollow" title="mailto:sample@example.net">sample@example.net</a></code>). No file extension.</li> + </ol> + <p>Now you should be ready to test your theme!</p> + <p>Start Firefox. Firefox will detect the text link to your theme directory and install the theme. Your theme will not be active the first time you install, and you will need to click "Enable" and restart before you can see your change. After it restarts this second time, you should see the background color of the toolbars is displayed in orange now.</p> + <p>You can now go back and make additional changes to your css files, close and restart Firefox, and see the updates.</p> +</div> +<div id="section_10"> + <h4 class="editable" id="Package"><span>Package</span></h4> + <p>Now that your theme works, you can <a href="/Add-ons/Extension_Packaging" rel="internal">package</a> it for deployment and installation.</p> + <p>Zip up the <strong>contents</strong> of your theme's folder (not the theme folder itself), and rename the zip file to have a .xpi extension. In Windows, you can do this easily by selecting all the files and subfolders in your extension folder, right click and choose "Send To -> Compressed (Zipped) Folder". A .zip file will be created for you. Just rename it and you're done!</p> + <p>On Mac OS or Linux, you can use the command-line zip tool:</p> + <pre class="eval">zip -r my_theme.xpi install.rdf chrome.manifest browser communicator global mozapps +</pre> + <p>Or, if you have 7-Zip installed, you can use that for zipping it up:</p> + <pre class="eval">7z a -tzip my_theme.xpi chrome chrome.manifest +</pre> + <p><strong>Note:</strong> The command-line tool will <strong>update</strong> an existing zip file, not replace it - so if you have files you've deleted from your theme, be sure to remove the <code>.xpi </code>file before running the zip command again.</p> + <p>Now upload the .xpi file to your server, making sure it's served as <code>application/x-xpinstall</code>. You can link to it and allow people to download and install it. For the purposes of just testing our .xpi file we can just drag it into the Add-ons Manager via "Tools -> Add-ons Manager", or open it using "File -> Open File...".</p> + <div id="section_11"> + <h5 class="editable" id="Installing_from_a_web_page"><span>Installing from a web page</span></h5> + <p>There are a variety of ways you can install extensions from web pages, including direct linking to the XPI files and using the InstallTrigger object. Extension and web authors are encouraged to use the <a href="/docs/Installing_Extensions_and_Themes_From_Web_Pages" rel="internal"> InstallTrigger method</a> to install XPIs, as it provides the best experience to users.</p> + </div> + <div id="section_12"> + <h5 class="editable" id="Using_addons.mozilla.org"><span>Using addons.mozilla.org</span></h5> + <p>Mozilla Add-ons is a distribution site where you can host your theme for free. Your theme will be hosted on Mozilla's mirror network to guarantee your download even though it might be very popular. Mozilla's site also provides users easier installation, and will automatically make your newer versions available to users of your existing versions when you upload them. In addition, Mozilla Add-ons allows users to comment and provide feedback on your theme. It is highly recommended that you use Mozilla Add-ons to distribute your themes!</p> + <p>Visit <a class="external" href="https://addons.mozilla.org/developers/" rel="external nofollow" title="http://addons.mozilla.org/developers/">https://addons.mozilla.org/developers/</a> to create an account and begin distributing your themes!</p> + <p><em>Note:</em> Your theme will be passed faster and downloaded more if you have a good description and some screenshots of the theme in action.</p> + </div> +</div> +<div id="section_21"> + <div id="section_23"> + <ul> + <li><a class="internal" href="/Add-ons/Themes" title="en/Themes">Themes</a></li> + </ul> + <p>______________________________</p> + </div> +</div> +<p> </p> diff --git a/files/ar/games/index.html b/files/ar/games/index.html new file mode 100644 index 0000000000..8bf9ec3ff9 --- /dev/null +++ b/files/ar/games/index.html @@ -0,0 +1,98 @@ +--- +title: Games development +slug: Games +tags: + - Apps + - Game Development + - Gamedev + - Games + - HTML5 Games + - JavaScript Games + - NeedsTranslation + - TopicStub + - Web +translation_of: Games +--- +<div>{{GamesSidebar}}</div> + +<div class="summary"> +<p dir="rtl"><span class="seoSummary">الألعاب هي واحدة من أكثر أنشطة الكمبيوتر شعبية.تصل التقنيات الحديثة باستمرار لتتمكن من تطوير ألعاب أفضل وأكثر قوة حيث يمكن تشغيلها في أي متصفح ويب متوافق مع المعايير.</span></p> +</div> + +<div>{{EmbedGHLiveSample("web-tech-games/index.html", '100%', 820)}}</div> + +<div class="column-container"> +<div class="column-half"> +<h2 dir="rtl" id="تطوير_ألعاب_الويب">تطوير ألعاب الويب</h2> + +<p dir="rtl"></p> + +<p dir="rtl">مرحبًا بك في مركز تطوير ألعاب MDN! في هذا المجال من الموقع ، نوفر موارد لمطوري الويب الراغبين في تطوير الألعاب. ستجد العديد من البرامج التعليمية والمقالات المفيدة في القائمة الرئيسية على اليسار ، لذلك لا تتردد في الاستكشاف.</p> + +<p dir="rtl">لقد قمنا أيضًا بتضمين قسم مرجعي حتى تتمكن من العثور بسهولة على معلومات حول جميع واجهات برمجة التطبيقات الأكثر شيوعًا المستخدمة في تطوير اللعبة.</p> + +<p dir="rtl"></p> + + + +<div class="note" dir="rtl">ملاحظة: يعتمد إنشاء الألعاب على الويب على عدد من تقنيات الويب الأساسية مثل HTML و CSS و JavaScript. تعتبر <a href="https://developer.mozilla.org/en-US/docs/Learn">منطقة التعلم</a> مكانًا جيدًا للبدء في الأساسيات.</div> +</div> + +<div class="column-half"> +<h2 id="Port_native_games_to_the_Web">Port native games to the Web</h2> + +<p>If you are a native developer (for example writing games in C++), and you are interested in how you can port your games over to the Web, you should learn more about our <a href="http://kripken.github.io/emscripten-site/index.html">Emscripten</a> tool — this is an LLVM to JavaScript compiler, which takes LLVM bytecode (e.g. generated from C/C++ using Clang, or from another language) and compiles that into <a href="/en-US/docs/Games/Tools/asm.js">asm.js</a>, which can be run on the Web.</p> + +<p>To get started, see:</p> + +<ul> + <li><a href="http://kripken.github.io/emscripten-site/docs/introducing_emscripten/about_emscripten.html">About Emscripten</a> for an introduction including high-level details.</li> + <li><a href="http://kripken.github.io/emscripten-site/docs/getting_started/downloads.html">Download and Install</a> for installing the toolchain.</li> + <li><a href="http://kripken.github.io/emscripten-site/docs/getting_started/Tutorial.html">Emscripten Tutorial</a> for a tutorial to teach you how to get started.</li> +</ul> +</div> +</div> + +<div class="column-container"> +<div class="column-half"> +<h2 dir="rtl" id="أمثلة">أمثلة</h2> + +<p dir="rtl">للحصول على قائمة من أمثلة ألعاب الويب. انظر <a href="https://developer.mozilla.org/en-US/docs/Games/Examples">صفحة الأمثلة</a> لدينا. أيضا تحقق من <a href="https://games.mozilla.org/">games.mozilla.org</a> لمزيد من الموارد المفيدة!</p> +</div> +</div> + +<h2 id="See_also">See also</h2> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="http://buildnewgames.com/">Build New Games</a></dt> + <dd>A collaborative site featuring a large number of open web game development tutorials. Has not been very active recently, but still holds some nice resources.</dd> + <dt><a href="http://creativejs.com/">Creative JS</a></dt> + <dd>A collection of impressive JavaScript techniques and experiments, not specific to games, but helpful nonetheless. Has not been very active recently, but still holds some nice resources.</dd> + <dt><a href="http://gameprogrammingpatterns.com/">Game programming patterns</a></dt> + <dd>An online book, written by Bob Nystrom, which discusses programming patterns in the context of game development with the aim of helping game developers produce more effective and efficient code.</dd> + <dt><a href="http://gamedevjsweekly.com/">Gamedev.js Weekly</a></dt> + <dd>Weekly newsletter about HTML5 game development, sent every Friday. Contains the latest articles, tutorials, tools and resources.</dd> + <dt><a href="http://www.html5gamedevs.com/">HTML5 Game Devs Forum</a></dt> + <dd>Forums for developers, framework creators and publishers. Ask questions, get feedback and help others.</dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="http://html5gameengine.com/">HTML5 Game Engine</a></dt> + <dd>List of the most popular HTML5 game frameworks along with their rating, features and samples.</dd> + <dt><a href="http://www.jsbreakouts.org/">JSBreakouts</a></dt> + <dd>Compare JavaScript Breakout clones in different frameworks to help you choose the right one for you.</dd> + <dt><a href="http://gamedevelopment.tutsplus.com/">Tuts+ Game Development</a></dt> + <dd>Tutorials and articles about game development in general.</dd> + <dt><a href="http://html5devstarter.enclavegames.com/">HTML5 Gamedev Starter</a></dt> + <dd>Starter for the new game developers, a curated list of links to various, useful resources around the web.</dd> + <dt><a href="http://js13kgames.com/">js13kGames</a></dt> + <dd>JavaScript coding competition for HTML5 game developers with the file size limit set to 13 kilobytes. All the submitted games are available in a readable form on GitHub.</dd> + <dt><a href="https://hacks.mozilla.org/category/games/">Mozilla Hacks blog</a></dt> + <dd>Games category on the Mozilla Hacks blog containing interesting gamedev related articles.</dd> +</dl> +</div> +</div> diff --git a/files/ar/games/techniques/3d_on_the_web/basic_theory/index.html b/files/ar/games/techniques/3d_on_the_web/basic_theory/index.html new file mode 100644 index 0000000000..502a63c9f9 --- /dev/null +++ b/files/ar/games/techniques/3d_on_the_web/basic_theory/index.html @@ -0,0 +1,126 @@ +--- +title: شرح نظرية ثلاثية الابعاد الأساسية +slug: Games/Techniques/3D_on_the_web/Basic_theory +translation_of: Games/Techniques/3D_on_the_web/Basic_theory +--- +<div dir="rtl">{{GamesSidebar}}</div> + +<p dir="rtl">This article explains all of the basic theory that's useful to know when you are getting started working with 3D.</p> + +<h2 dir="rtl" id="نظام_الاحداثيات_الديكارتي"><a name="_Toc522014861">نظام الاحداثيات الديكارتي</a></h2> + +<p dir="rtl">ثلاثي الابعاد بشكل أساسي هو عبارة عن تمثيل للأشكال في مساحة ثلاثية الابعاد مع نظام احداثي يستخدم لحساب موضع الاشكال.</p> + +<p dir="rtl">يستخدم <span dir="LTR">WebGL</span> نظام الاحداثيات الديكارتي حيث يشير <span dir="LTR">x</span> الى محور السينات (اليمين) ويشير <span dir="LTR">y</span> الى محور الصادات (للأعلى) ويشير <span dir="LTR">z</span> الى محور الزينات (خارج الشاشة) كما هو موضح بالشكل التالي:<img alt="Coordinate system" src="https://mdn.mozillademos.org/files/13326/mdn-games-3d-coordinate-system.png" style="height: 338px; width: 600px;"></p> + +<h2 dir="rtl" id="الكائنات"><a name="_Toc522014862">الكائنات </a></h2> + +<p dir="rtl">تسمى النقطة التي تمثل الكائن في الفضاء بـِ الرأس <span dir="LTR">vertices</span> والتي تمثل موقع الكائن. كل نقطة لها عدة سمات وهي:</p> + +<ol dir="rtl"> + <li>الموقع: يحدد من خلال نقطة ثلاثية الابعاد <span dir="LTR">x y z</span>.</li> + <li>اللون: يحمل قيمة مكونة من أربعة خانات وهي: قيمة اللون الأحمر وقيمة اللون الأخضر وقيمة اللون الأزرق وقيمة الشفافية التي تتراوح ما بين 0.0 و1.0.</li> + <li>الاتجاه.</li> + <li>البنية <span dir="LTR">texture</span>: وهي عبارة عن صورة ثنائية الابعاد تستخدم لتعبئة أحد السطوح بدلا من اللون.</li> +</ol> + +<p dir="rtl"> </p> + +<p dir="rtl"><img alt="Cube" src="https://mdn.mozillademos.org/files/13324/mdn-games-3d-cube.png" style="height: 265px; width: 600px;"></p> + +<p dir="rtl"> </p> + +<p dir="RTL">فمثلا: الكائن أعلاه (مكعب) يحتوي على 8 رؤوس مختلفة في الفضاء <span dir="LTR">v<sub>0</sub>,v<sub>1</sub>,v<sub>2</sub>,v<sub>3</sub>,v<sub>4</sub>,v<sub>5</sub>,v<sub>6</sub>,v<sub>7</sub></span> وعلى 6 سطوح (أوجه) كل منها مكون من 4 نقاط.</p> + +<ul dir="rtl"> + <li>عندما نقوم بتوصيل النقاط فإننا نقوم على انشاء حواف <span dir="LTR">edge</span> المكعب.</li> + <li>الهندسة <span dir="LTR">geometry</span> تبنى من خلال الرؤوس <span dir="LTR">vertices</span> والسطوح <span dir="LTR">faces</span> بينما المادة <span dir="LTR">materials</span> تتمثل في البنية <span dir="LTR">texture</span> والتي تكون اما لون أو صورة.</li> + <li>عندما نقوم بتوصيل الهندسة بالمادة فإننا نحصل على الشبكة <span dir="LTR">mesh</span>.</li> +</ul> + +<p dir="rtl"> </p> + +<h2 dir="rtl" id="Rendering_pipeline">Rendering pipeline</h2> + +<p dir="rtl">يتم معالجة الجرافيك من خلال أخذ الكائنات ثلاثية الابعاد والتي يتم انشاءها من العناصر الأولية (نقطة، مثلث، خط) باستخدام الرؤوس ومن ثم حساب الأجزاء <span dir="LTR">fragments</span> وعرضها على الشاشة (ثنائية الابعاد) بوحدة البيكسل <span dir="LTR">pixel</span>.</p> + +<p dir="rtl"><img alt="Rendering pipeline" src="https://mdn.mozillademos.org/files/13334/mdn-games-3d-rendering-pipeline.png" style="height: 225px; width: 600px;"></p> + +<p dir="rtl"> </p> + +<p dir="RTL">المصطلحات المستخدمة في الرسمة أعلاه هي كالتالي:</p> + +<ol dir="rtl"> + <li>العنصر البدائي <span dir="LTR">primitive</span>: والذي يتكون من الرؤوس والتي تكون اما مثلث أو نقطة أو خط.</li> + <li>الجزء <span dir="LTR">fragment</span>: وهو اسقاط ثلاثي الابعاد لبيكسل والذي يحمل نفس السمات المميزة لكل بيكسل.</li> + <li>البيكسل <span dir="LTR">pixel</span>: نقطة على الشاشة ثنائية الابعاد والتي تحمل قيمة لون <span dir="LTR">RGBA</span>.</li> +</ol> + +<p dir="rtl"> </p> + +<h2 dir="rtl" id="معالجة_الرؤوس">معالجة الرؤوس</h2> + +<p dir="rtl">يتم معالجة الرؤوس من خلال جمع المعلومات حول كل رأس على حدا في العنصر البدائي وتعيين احداثياتها في المساحة ثلاثية الابعاد للمشاهد ليراها. وتشبه المعالجة طريقة أخذ صورة لمشهد أنت قمت باعداه (وضع الأشياء بمكانها المناسب ومن ثم تهيئة الكمرة ومن ثم أخذ الصورة).<img alt="Vertex processing" src="https://mdn.mozillademos.org/files/13336/mdn-games-3d-vertex-processing.png" style="height: 338px; width: 600px;"></p> + +<p dir="rtl"> </p> + +<p dir="RTL">هناك أربع مراحل لهذه العملية:</p> + +<ol dir="rtl"> + <li>ترتيب المكونات <span dir="LTR">objects</span> والتي تسمى تحويل النموذج <span dir="LTR">modal transformation</span>.</li> + <li><span dir="RTL">تحويل العرض </span>view transformation<span dir="RTL"> والذي يعتني بالموضع وتحديد اتجاه الكمرة في الفضاء ثلاثي الابعاد حيث يتم ضبط الكمرة من خلال ثلاثة متغيرات وهي الموقع والاتجاه والتوجيه.</span><br> + </li> +</ol> + +<p dir="rtl"><img alt="Camera" src="https://mdn.mozillademos.org/files/13322/mdn-games-3d-camera.png" style="height: 225px; width: 600px;"></p> + +<ol dir="rtl" start="3"> + <li>تحويل الاسقاط projection transformation والذي يدعى أيضا تحويل المنظور perspective transformation حيث يعتني بإعداد ما يمكن رؤيته بواسطة الكمرة من خلال اعداد مجال الرؤية ونسبة العرض الى الارتفاع aspect ratio والقرب والبعد.</li> +</ol> + +<p dir="rtl"><img alt="Camera settings" src="https://mdn.mozillademos.org/files/13320/mdn-games-3d-camera-settings.png" style="height: 338px; width: 600px;"></p> + +<p dir="rtl"> </p> + +<ol dir="rtl" start="4"> + <li> تحويل إطار العرض <span dir="LTR">viewport transformation</span> والذي يهتم بكل المخرجات في طريقة عرض الجرافيك على الشاشة.</li> +</ol> + +<p dir="rtl"> </p> + +<p dir="rtl"> </p> + +<h2 dir="rtl" id="المسح_المجالي">المسح المجالي</h2> + +<p dir="rtl">يتم بالمسح المجالي تحويل الاشكال الأولية الناتجة عن توصيل الرؤوس الى مجموعة من الأجزاء fragments (اسقاطات ثلاثية الابعاد للبيكسلات ثنائية الابعاد) حيث يتم محاذاتها مع شبكة البيكسل.<img alt="Rasterization" src="https://mdn.mozillademos.org/files/13332/mdn-games-3d-rasterization.png" style="height: 338px; width: 600px;"></p> + +<p dir="rtl"> </p> + +<h2 dir="rtl" id="معالجة_الجزء">معالجة الجزء</h2> + +<p dir="rtl">ترتكز معالجة الأجزاء على البنية <span dir="LTR">texture</span> والإضاءة حيث تقوم بحساب الألوان النهائية استنادًا إلى المعلمات المحددة.</p> + +<p dir="rtl"><img alt="Fragment processing" src="https://mdn.mozillademos.org/files/13328/mdn-games-3d-fragment-processing.png" style="height: 338px; width: 600px;"></p> + +<h3 dir="rtl" id="الإضاءة">الإضاءة</h3> + +<p dir="rtl">الألوان التي نراها على الشاشة هي نتيجة تفاعل مصدر ضوء مع ألوان سطح مادة الكائن. الضوء قد يمتص أو قد ينعكس تبعا لذلك.</p> + +<p dir="rtl"> </p> + +<p dir="RTL">هناك أربع أنواع أساسية من الإضاءة:</p> + +<ul dir="rtl"> + <li dir="RTL">ضوء اتجاهي <span dir="LTR">Diffuse</span> بعيد مثل الشمس.</li> + <li dir="RTL">نقطة ضوئية <span dir="LTR">Specular</span> مثل مصباح الإضاءة في الغرفة.</li> + <li dir="RTL">ضوء محيطي <span dir="LTR">Ambient</span> وهو ضوء ثابت ينعكس على كل شيء.</li> + <li dir="RTL">ضوء اشعاعي <span dir="LTR">Emissive</span> وهو الضوء المنبعث مباشرة من الكائن.</li> +</ul> + +<h2 dir="rtl" id="مخرجات_الدمج">مخرجات الدمج</h2> + +<p dir="rtl">أثناء مرحلة معالجة المخرجات يتم تحويل جميع أجزاء الأوليات من الفضاء ثلاثي الابعاد الى شبكة ثنائية الابعاد من البيكسلات ثم تطبع على الشاشة. أيضا يتم تطبيق بعض المعالجات من أجل تجاهل بعض المعلومات الغير مطلوبة مثل الكائنات الغير مرئية أو الأجزاء خارج الشاشة أو الكائنات التي تقع خلف كائنات أخرى.</p> + +<p dir="rtl"><img alt="Output merging" src="https://mdn.mozillademos.org/files/13330/mdn-games-3d-output-merging.png" style="height: 338px; width: 600px;"></p> + +<p dir="rtl"> </p> diff --git a/files/ar/games/techniques/3d_on_the_web/index.html b/files/ar/games/techniques/3d_on_the_web/index.html new file mode 100644 index 0000000000..3944c617c6 --- /dev/null +++ b/files/ar/games/techniques/3d_on_the_web/index.html @@ -0,0 +1,113 @@ +--- +title: 3D games on the Web +slug: Games/Techniques/3D_on_the_web +tags: + - Games + - Graphics + - NeedsContent + - NeedsExample + - NeedsTranslation + - TopicStub + - WebGL + - WebVR + - three.js +translation_of: Games/Techniques/3D_on_the_web +--- +<div>{{GamesSidebar}}</div><p class="summary">For rich gaming experiences on the Web the weapon of choice is WebGL, which is rendered on HTML {{htmlelement("canvas")}}. WebGL is basically an OpenGL ES 2.0 for the Web — it's a JavaScript API providing tools to build rich interactive animations and of course also games. You can generate and render dynamic 3D graphics with JavaScript that is hardware accelerated.</p> + +<h2 id="Documentation_and_browser_support">Documentation and browser support</h2> + +<p>The <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> project documentation and specification is maintained by the <a href="https://www.khronos.org/">Khronos Group</a>, not the W3C as with most of the Web APIs. Support on modern browsers is very good, even on mobile, so you don't have to worry about that too much. The main browsers are all supporting WebGL and all you need to focus on is optimizing the performance on the devices you use.</p> + +<p>There's an ongoing effort on releasing WebGL 2.0 (based on OpenGL ES 3.0) in the near future, which will bring many improvements and will help developers build games for the modern Web using current, powerful hardware.</p> + +<h2 id="Explaining_basic_3D_theory">Explaining basic 3D theory</h2> + +<p>The basics of 3D theory centers around shapes represented in a 3D space, with a coordinate system being used to calculate their positions. See our <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Basic_theory">Explaining basic 3D theory</a> article for all the information you need.</p> + +<h2 id="Advanced_concepts">Advanced concepts</h2> + +<p>You can do a lot more with WebGL. There are some advanced concepts which you should dive into and learn more about — like shaders, collision detection, or the latest hot topic — virtual reality on the web.</p> + +<h3 id="Shaders">Shaders</h3> + +<p>It's worth mentioning shaders, which are a separate story on their own. Shaders use GLSL, a special OpenGL Shading Language with syntax similar to C that is executed directly by the graphics pipeline. They can be split into Vertex Shaders and Fragment Shaders (or Pixel Shaders) — the former transforms shape positions to real 3D drawing coordinates, while the latter computes rendering colors and other attributes. You should definitely check out <a href="/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders">GLSL Shaders</a> article to learn more about them.</p> + +<h3 id="Collision_Detection">Collision Detection</h3> + +<p>It's hard to imagine a game without the collision detection — we always need to work out when something is hitting something else. We have information available for your to learn from:</p> + +<ul> + <li><a href="/en-US/docs/Games/Techniques/2D_collision_detection">2D collision detection</a></li> + <li><a href="/en-US/docs/Games/Techniques/3D_collision_detection">3D collision detection</a></li> +</ul> + +<h3 id="WebVR">WebVR</h3> + +<p>The concept of virtual reality is not new, but it's storming onto the web thanks to hardware advancements such as the <a href="https://www.oculus.com/en-us/rift/">Oculus Rift</a>, and the (currently experimental) <a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a> for capturing information form VR hardware and making it available for use in JavaScript applications. For more, read <a href="/en-US/docs/Games/Techniques/3D_on_the_web/WebVR">WebVR — Virtual Reality for the Web</a>.</p> + +<p>There's also the <a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">Building up a basic demo with A-Frame</a> article showing you how easy it is to build 3D environments for virtual reality using the <a href="http://aframe.io/">A-Frame</a> framework.</p> + +<h2 id="The_rise_of_libraries_and_frameworks">The rise of libraries and frameworks</h2> + +<p>Coding raw WebGL is fairly complex, but you'll want to get to grips with it in the long run, as your projects get more advanced (see our <a href="/en-US/docs/Web/API/WebGL_API">WebGL documentation</a> to get started.) For real world projects you'll probably also make use of a framework to speed up development and help you manage the project you're working on. Using a framework for 3D games also helps optimize the performance as a lot is taken care of by the tools you use, so you can focus on building the game itself.</p> + +<p>The most popular JavaScript 3D library is <a href="http://threejs.org/">Three.js</a>, a multi-purpose tool that makes common 3D techniques simpler to implement. There are other popular game development libraries and frameworks worth checking too; <a href="https://aframe.io">A-Frame</a>, <a href="https://playcanvas.com/">PlayCanvas</a> and <a href="http://www.babylonjs.com/">Babylon.js</a> are among the most recognizable ones with rich documentation, online editors and active communities.</p> + +<h3 id="Building_up_a_basic_demo_with_A-Frame">Building up a basic demo with A-Frame</h3> + +<p>A-Frame is a web framework for building 3D and VR experiences. Under the hood, it is a three.js framework with a declarative entity-component pattern, meaning we can build scenes with just HTML. See the <a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">Building up a basic demo with A-Frame</a> subpage for the step-by-step process of creating the demo.</p> + +<h3 id="Building_up_a_basic_demo_with_Babylon.js">Building up a basic demo with Babylon.js</h3> + +<p><span class="seosummary">Babylon.js is one of the most popular 3D game engines used by developers. As with any other 3D library it provides built-in functions to help you implement common 3D functionality more quickly. See the <a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js">Building up a basic demo with Babylon.js</a> subpage for the basics of using Babylon.js, including setting up a development environment, structuring the necessary HTML, and writing the JavaScript code.</span></p> + +<h3 id="Building_up_a_basic_demo_with_PlayCanvas">Building up a basic demo with PlayCanvas</h3> + +<p>PlayCanvas is a popular 3D WebGL game engine open sourced on GitHub, with an editor available online and good documentation. See the <a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas">Building up a basic demo with PlayCanvas</a> subpage for high level details, and further articles showing how to create demos using the PlayCanvas library, and the online editor.</p> + +<h3 id="Building_up_a_basic_demo_with_Three.js">Building up a basic demo with Three.js</h3> + +<p>Three.js, as any other library, gives you a huge advantage: instead of writing hundreds of lines of WebGL code to build anything interesting you can use built-in helper functions to do it a lot easier and faster. See the <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Building up a basic demo with Three.js</a> subpage for the step-by-step process of creating the demo.</p> + +<h3 id="Other_tools">Other tools</h3> + +<p>Both <a href="http://unity3d.com/">Unity</a> and <a href="https://www.unrealengine.com/">Unreal</a> can export your game to <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> with <a href="/en-US/docs/Games/Tools/asm.js">asm.js</a>, so you're free to use their tools and techniques to build games that will be exported to the web.</p> + +<p><img alt="" src="http://end3r.github.io/MDN-Games-3D/A-Frame/img/shapes.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<h2 id="Where_to_go_next">Where to go next</h2> + +<p>With this article we just scratched the surface of what's possible with currently available technologies. You can build immersive, beautiful and fast 3D games on the Web using WebGL, and the libraries and frameworks build on top of it.</p> + +<h3 id="Source_code">Source code</h3> + +<p>You can find all the source code for this series <a href="http://end3r.github.io/MDN-Games-3D/">demos on GitHub</a>.</p> + +<h3 id="APIs">APIs</h3> + +<ul> + <li><a href="/en-US/docs/Web/API/Canvas_API">Canvas API</a></li> + <li><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a></li> + <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a></li> +</ul> + +<h3 id="Frameworks">Frameworks</h3> + +<ul> + <li><a href="http://threejs.org/">Three.js</a></li> + <li><a href="https://github.com/WhitestormJS/whs.js">Whitestorm.js</a> (based on Three.js)</li> + <li><a href="https://playcanvas.com/">PlayCanvas</a></li> + <li><a href="http://www.babylonjs.com/">Babylon.js</a></li> + <li><a href="http://aframe.io/">A-Frame</a></li> +</ul> + +<h3 id="Tutorials">Tutorials</h3> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Building up a basic demo with Three.js</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Whitestorm.js">Building up a basic demo with Whitestorm.js</a></li> + <li><a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas">Building up a basic demo with PlayCanvas</a></li> + <li><a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js">Building up a basic demo with Babylon.js</a></li> + <li><a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">Building up a basic demo with A-Frame</a></li> +</ul> diff --git a/files/ar/games/techniques/index.html b/files/ar/games/techniques/index.html new file mode 100644 index 0000000000..66edeebd82 --- /dev/null +++ b/files/ar/games/techniques/index.html @@ -0,0 +1,32 @@ +--- +title: Techniques for game development +slug: Games/Techniques +tags: + - Games + - Guide + - NeedsTranslation + - TopicStub +translation_of: Games/Techniques +--- +<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/Games")}}</div> + +<div class="summary"> +<p><span class="seoSummary">This page lists essential core techniques for anyone wanting to develop games using open web technologies.</span></p> +</div> + +<dl> + <dt><a href="/en-US/docs/Games/Techniques/Async_scripts">Using async scripts for asm.js</a></dt> + <dd>Especially when creating medium to large-sized games, async scripts are an essential technique to take advantage of, so that your game's JavaScript can be compiled off the main thread and be cached for future game running, resulting in a significant performance improvement for your users. This article explains how.</dd> + <dt><a href="/en-US/docs/Apps/Developing/Optimizing_startup_performance" title="/en-US/docs/Apps/Developing/Optimizing_startup_performance">Optimizing startup performance</a></dt> + <dd>How to make sure your game starts up quickly, smoothly, and without appearing to lock up the user's browser or device.</dd> + <dt><a href="/en-US/docs/Games/WebRTC_data_channels" title="/en-US/docs/Games/WebRTC_data_channels">Using WebRTC peer-to-peer data channels</a></dt> + <dd>In addition to providing support for audio and video communication, WebRTC lets you set up peer-to-peer data channels to exchange text or binary data actively between your players. This article explains what this can do for you, and shows how to use libraries that make this easy.</dd> + <dt><a href="/en-US/docs/Games/Techniques/Efficient_animation_for_web_games">Efficient animation for web games</a></dt> + <dd>This article covers techniques and advice for creating efficient animation for web games, with a slant towards supporting lower end devices such as mobile phones. We touch on CSS transitions and CSS animations, and JavaScript loops involving {{ domxref("window.requestAnimationFrame") }}.</dd> + <dt><a href="/en-US/docs/Games/Techniques/Audio_for_Web_Games">Audio for Web Games</a></dt> + <dd>Audio is an important part of any game — it adds feedback and atmosphere. Web-based audio is maturing fast, but there are still many browser differences to negotiate. This article provides a detailed guide to implementing audio for web games, looking at what works currently across as wide a range of platforms as possible.</dd> + <dt><a href="/en-US/docs/Games/Techniques/2D_collision_detection">2D collision detection</a></dt> + <dd>A concise introduction to collision detection in 2D games.</dd> + <dt><a href="/en-US/docs/Games/Techniques/Tilemaps">Tilemaps</a></dt> + <dd>Tiles are a very popular technique in 2D games for building the game world. These articles provide an introduction to tilemaps and how to implement them with the Canvas API.</dd> +</dl> diff --git a/files/ar/glossary/accessibility/index.html b/files/ar/glossary/accessibility/index.html new file mode 100644 index 0000000000..38f2f02832 --- /dev/null +++ b/files/ar/glossary/accessibility/index.html @@ -0,0 +1,32 @@ +--- +title: إتاحة +slug: Glossary/Accessibility +tags: + - إتاحة + - مسرد +translation_of: Glossary/Accessibility +--- +<p dir="rtl">تشير <em><a href="https://ar.wikipedia.org/wiki/%D8%A5%D8%AA%D8%A7%D8%AD%D8%A9">الإتاحة</a> الويبيّة</em> (Web Accessibility) إلى أفضل الممارسات المُستخدمة لإبقاء المواقع قابلة للاستخدام بغض النظر عن الإعاقات (أو القيود) الجسديّة والتقنيّة. عُرِفَت ونُقِشَت الإتاحة الويبيّة رسمياً في رابطة الويب العالمية (W3C) خلال {{Glossary("WAI","مبادرة الإتاحة الويبيّة")}} (WAI).</p> + +<h2 dir="rtl" id="المزيد_من_التفاصيل">المزيد من التفاصيل</h2> + +<h3 dir="rtl" id="معلومات_عامة">معلومات عامة</h3> + +<ul dir="rtl"> + <li><a href="/ar/docs/Web/Accessibility">مصادر عن الإتاحة في شبكة مطوري موزيلا</a></li> + <li>مقالة عن <a href="https://ar.wikipedia.org/wiki/%D8%B3%D9%87%D9%88%D9%84%D8%A9_%D8%A7%D9%84%D8%AA%D8%B5%D9%81%D8%AD">سهولة التصفح</a> في الموسوعة الحرَّة</li> +</ul> + +<h3 dir="rtl" id="تعلم_الإتاحة">تعلم الإتاحة</h3> + +<ul dir="rtl"> + <li>موقع "<a href="http://webaim.org/" rel="external">Web Accessibility In Mind</a>"</li> +</ul> + +<h3 dir="rtl" id="مراجع_تقنية">مراجع تقنية</h3> + +<ul dir="rtl"> + <li><a href="/ar/docs/Web/Accessibility/ARIA">توثيقات تقنية ARIA في شبكة مطوري موزيلا</a></li> + <li><a href="http://www.w3.org/WAI/">الصفحة الرئيسية لمبادرة الإتاحة الويبيّة</a></li> + <li><a href="http://www.w3.org/TR/wai-aria/">توثيقات تقنية WAI-ARIA</a></li> +</ul> diff --git a/files/ar/glossary/algorithm/index.html b/files/ar/glossary/algorithm/index.html new file mode 100644 index 0000000000..e3dbdbfd5f --- /dev/null +++ b/files/ar/glossary/algorithm/index.html @@ -0,0 +1,32 @@ +--- +title: خوارزمية +slug: Glossary/Algorithm +tags: + - مسرد +translation_of: Glossary/Algorithm +--- +<p dir="rtl">الخوارزميّة هي مجموعة من الخطوات المتكاملة لتنفيذ مهمة معينة.</p> + +<p dir="rtl">بتعبير آخر، الخوارزميّة هي وسيلة لوصف طريقة (أسلوب) لحل مشكلة ما ليُمكِن حلها، لاحقاً، بشكل متكرر (أي مهما تكررت المشكلة يُمكِن استخدام هذه الخوارزميّة لحلها دوماً) سواءً من قبل الآلات أو البشر. يقيّم علماء الحاسوب كفاءة الخوارزميّة من خلال مفهوم "<a href="https://www.cs.cmu.edu/~adamchik/15-121/lectures/Algorithmic%20Complexity/complexity.html">التعقيد الخوارزمي</a>" أو "Big O".</p> + +<p dir="rtl">على سبيل المثال:</p> + +<ul dir="rtl"> + <li>وصفة الطعام هي مثال بسيط على خوارزميّة يُمكِن تنفيذها من قبل البشر.</li> + <li>غالباً ما تُستخدم خوارزميّة الفرز (sorting algorithm) في البرمجة لشرح كيفيّة فرز الآلات للبيانات.</li> +</ul> + +<h2 dir="rtl" id="المزيد_من_التفاصيل">المزيد من التفاصيل</h2> + +<h3 dir="rtl" id="معلومات_عامة">معلومات عامة</h3> + +<ul dir="rtl"> + <li>مقالة عن <a href="https://ar.wikipedia.org/wiki/%D8%AE%D9%88%D8%A7%D8%B1%D8%B2%D9%85%D9%8A%D8%A9">الخوارزمية</a> في الموسوعة الحرَّة</li> +</ul> + +<h3 dir="rtl" id="مراجع_تقنيّة">مراجع تقنيّة</h3> + +<ul dir="rtl"> + <li><a href="https://www.toptal.com/developers/sorting-algorithms">شروحات عن خوارزميات الفرز</a></li> + <li><a href="http://bigocheatsheet.com/">شروحات عن التعقيد الخوارزمي</a> (algorithmic complexity)</li> +</ul> diff --git a/files/ar/glossary/api/index.html b/files/ar/glossary/api/index.html new file mode 100644 index 0000000000..84fa067677 --- /dev/null +++ b/files/ar/glossary/api/index.html @@ -0,0 +1,23 @@ +--- +title: API +slug: Glossary/API +translation_of: Glossary/API +--- +<p>API (واجهة برمجة التطبيقات) هي مجموعة من الميزات والقواعد الموجودة داخل برنامج (التطبيق) مما يتيح التفاعل معها من خلال البرامج - بدلاً من واجهة مستخدم بشرية. يمكن اعتبار واجهة برمجة التطبيقات عقد بسيط (الواجهة) بين التطبيق الذي يقدمها والعناصر الأخرى، مثل برامج أو أجهزة خارجية.</p> + +<p>في تطوير الويب، تعد واجهة برمجة التطبيقات عادةً مجموعة من ميزات التعليمات البرمجية (على سبيل المثال. {{glossary("method","methods")}}، {{Glossary("property","properties")}}، events and {{Glossary("URL", "URLS")}} التي يمكن للمطور استخدامها في تطبيقاتها للتفاعل مع مكونات مستعرض ويب الخاص بالمستخدم، أو البرامج/الأجهزة الأخرى على كمبيوتر المستخدم، أو مواقع ويب أو خدمات خارجية.</p> + +<p>على سبيل المثال:</p> + +<p>يمكن استخدام getUserMedia API للاستيلاء على الصوت والفيديو من كاميرا ويب للمستخدم ، والتي يمكن استخدامها بعد ذلك بأي طريقة يحبها المطور ، على سبيل المثال ، تسجيل الفيديو والصوت ، وبثه إلى مستخدم آخر في مؤتمر عبر الهاتف ، أو التقاط الصور الثابتة من الفيديو.<br> + يمكن استخدام واجهة برمجة تطبيقات تحديد الموقع الجغرافي لاسترداد معلومات الموقع من أي خدمة متاحة للمستخدم على أجهزتهم (مثل GPS) ، والتي يمكن استخدامها بعد ذلك بالاقتران مع واجهات برمجة التطبيقات لخرائط Google لرسم موقع المستخدم على خريطة مخصصة على سبيل المثال وإظهارها لما هي مناطق الجذب السياحي في منطقتهم.<br> + يمكن استخدام واجهات برمجة تطبيقات تويتر لاسترداد البيانات من حسابات المستخدم على تويتر، على سبيل المثال، لعرض أحدث تغريداتهم على صفحة ويب.<br> + يمكن استخدام واجهة برمجة تطبيقات "رسوم الويب" لتحريك أجزاء صفحة ويب — على سبيل المثال، لجعل الصور تتحرك أو تستدير.</p> + +<h5 id="التعرف_على_المزيد_المعرفة_العامة">التعرف على المزيد المعرفة العامة</h5> + +<p>{{Interwiki("wikipedia", "Application_programming_interface", "API")}} على ويكيبيديا</p> + +<h5 id="المرجع_التقني">المرجع التقني</h5> + +<p>مرجع واجهة برمجة تطبيقات ويب</p> diff --git a/files/ar/glossary/argument/index.html b/files/ar/glossary/argument/index.html new file mode 100644 index 0000000000..18c1671651 --- /dev/null +++ b/files/ar/glossary/argument/index.html @@ -0,0 +1,23 @@ +--- +title: مُعطى +slug: Glossary/Argument +tags: + - جافاسكربت + - مسرد +translation_of: Glossary/Argument +--- +<p dir="rtl"><strong>المُعطى</strong> (بالإنجليزيَّة: Argument)هو {{glossary("value", "قيمة")}} ({{Glossary("primitive", "أوليَّة")}} أو {{Glossary("object", "كائنيَّة")}}) تُمرَّر إلى الدالة كمُدخَل.</p> + +<h2 dir="rtl" id="المزيد_من_التفاصيل">المزيد من التفاصيل</h2> + +<h3 dir="rtl" id="معلومات_عامة">معلومات عامة</h3> + +<ul dir="rtl"> + <li><a class="external external-icon" href="http://en.wikipedia.org/wiki/Parameter_%28computer_programming%29#Parameters_and_arguments" rel="noopener">الفرق بين الوسيط والمُعطى</a> في الموسوعة الحرَّة</li> +</ul> + +<h3 dir="rtl" id="مراجع_تقنيّة">مراجع تقنيّة</h3> + +<ul dir="rtl"> + <li>الكائن {{jsxref("Functions/arguments","arguments")}} في لغة {{glossary("JavaScript", "الجافاسكربت")}}</li> +</ul> diff --git a/files/ar/glossary/array/index.html b/files/ar/glossary/array/index.html new file mode 100644 index 0000000000..f250d38a45 --- /dev/null +++ b/files/ar/glossary/array/index.html @@ -0,0 +1,31 @@ +--- +title: مصفوفة +slug: Glossary/array +tags: + - جافاسكربت + - مسرد +translation_of: Glossary/array +--- +<p dir="rtl"><strong>المصفوفة</strong> هي مجموعة مرتبة من البيانات (إما {{Glossary("primitive", "بدائية")}} أو {{Glossary("object", "شيئيّة")}} هذا يعتمد على اللغة المُستخدمة). تُستخدَم المصفوفات لتخزين عدَّة قيم في متغيّر واحد مقارنةً بالمتغيّر العادي الذي لا يمكن أن يُخزِّن سوى قيمة واحدة.</p> + +<p dir="rtl">لكل عنصر في المصفوفة رقم يدل عليه، يدعى بالرقم الفهرسي، يسمح هذا الرقم بالوصول إلى قيمة العنصر. تبدأ الفهرسة في لغة الجافاسكربت (كما في معظم اللغات) من الرقم صفر ويمكن التلاعب بعناصر المصفوفة باستخدام العديد من {{Glossary("Method", "الدوالة الصنفيّة")}}.</p> + +<p dir="rtl">تكون للمصفوفات الشكل التالي في لغة الجافاسكربت:</p> + +<pre dir="rtl">var myArray = [1, 2, 3, 4]; +var catNamesArray = ["Jacqueline", "Sophia", "Autumn"]; +//يمكن أن تحتوي المصفوفات في لغة الجافاسكربت على أنواع مختلفة من البيانات كما هو موضَّح أعلاه</pre> + +<h2 dir="rtl" id="المزيد_من_التفاصيل">المزيد من التفاصيل</h2> + +<h3 dir="rtl" id="معلومات_عامة">معلومات عامة</h3> + +<ul dir="rtl"> + <li>مقالة عن <a href="https://ar.wikipedia.org/wiki/%D9%85%D8%B5%D9%81%D9%88%D9%81%D8%A9_(%D8%AD%D9%88%D8%B3%D8%A8%D8%A9)">المصفوفة</a> في الموسوعة الحرَّة</li> +</ul> + +<h3 dir="rtl" id="مراجع_تقنيّة">مراجع تقنيّة</h3> + +<ul dir="rtl"> + <li>توثيقات الكائن {{jsxref("Array")}} في لغة الجافاسكربت.</li> +</ul> diff --git a/files/ar/glossary/attribute/index.html b/files/ar/glossary/attribute/index.html new file mode 100644 index 0000000000..522ffb8f91 --- /dev/null +++ b/files/ar/glossary/attribute/index.html @@ -0,0 +1,18 @@ +--- +title: خاصية +slug: Glossary/Attribute +tags: + - لغة ترميز النص الفائق + - مسرد +translation_of: Glossary/Attribute +--- +<p dir="rtl">تُعزِّز الخاصيّة (أو السمة أو الخاصة) الوسم، وتُعدِل من وظيفته أو تضيف بيانات وصفيّة له (metadata). تُعرَّف الخواص دوماً بالصيغة <code>اسم الخاصيّة=القيمة</code> (اسم الخاصيّة متبوعاً بالقيمة المُسندة لها).</p> + +<h2 dir="rtl" id="المزيد_من_التفاصيل">المزيد من التفاصيل</h2> + +<h3 dir="rtl" id="مراجع_تقنيّة"><span style="font-size: 1.71429rem;">مراجع تقنيّة</span></h3> + +<ul dir="rtl"> + <li><a href="/ar/docs/Web/HTML/Attributes">مرجع سِمات لغة ترميز النص الفائق</a></li> + <li>معلومات عن <a href="/ar/docs/Web/HTML/Global_attributes">سِمات لغة ترميز النص الفائق العموميّة</a> (global attributes)</li> +</ul> diff --git a/files/ar/glossary/bandwidth/index.html b/files/ar/glossary/bandwidth/index.html new file mode 100644 index 0000000000..bfbadfce0f --- /dev/null +++ b/files/ar/glossary/bandwidth/index.html @@ -0,0 +1,19 @@ +--- +title: Bandwidth +slug: Glossary/Bandwidth +tags: + - Bandwidth + - بنية تحتية + - قاموس مصطلحات + - معجم +translation_of: Glossary/Bandwidth +--- +<p dir="rtl">النطاق الترددي (Bandwidth) هو مقياس مقدار المعلومات التي يمكن أن تمر عبر اتصال بيانات في فترة زمنية محددة. يتم قياسه عادة بمضاعفات بت في الثانية (bps)، على سبيل المثال ميغابت في الثانية (Mbps) أو غيغابت في الثانية (Gbps).</p> + +<h2 dir="rtl" id="اعرف_أكثر">اعرف أكثر</h2> + +<ul> + <li>{{Interwiki("wikipedia", "Bandwidth")}} على ويكيبيديا</li> +</ul> + +<div id="eJOY__extension_root"> </div> diff --git a/files/ar/glossary/blink/index.html b/files/ar/glossary/blink/index.html new file mode 100644 index 0000000000..9637f62c04 --- /dev/null +++ b/files/ar/glossary/blink/index.html @@ -0,0 +1,18 @@ +--- +title: بلينك +slug: Glossary/Blink +tags: + - مسرد +translation_of: Glossary/Blink +--- +<p dir="rtl">يعد بلينك (Blink) محرِّك تنسيق (أو مُحرِّك تخطيط أو مُحرِّك تموضع - layout engine) مفتوح المصدر طوِّر من شركة جوجل كجزء من مشروع كروميوم (وبالتالي من مشروع كروم أيضاً كونه مبنياً على كروميوم). بلينك هو بالأصل اشتقاق من مكتبة {{glossary("WebKit", "ويب كيت")}} التي تقوم بعملية موضَعِة وعرض الأشكال، وتتعامل مع {{glossary("DOM", "نموذج كائن المستند")}} (DOM).</p> + +<h2 dir="rtl" id="المزيد_من_التفاصيل">المزيد من التفاصيل</h2> + +<h3 dir="rtl" id="معلومات_عامة">معلومات عامة</h3> + +<ul dir="rtl"> + <li><a href="http://www.chromium.org/blink">الصفحة الرئيسيّة</a> لمشروع بلينك</li> + <li>مقالة عن <a href="https://ar.wikipedia.org/wiki/%D8%A8%D9%84%D9%8A%D9%86%D9%83">بلينك</a> في الموسوعة الحرَّة</li> + <li>أسئلة شائعة عن <a href="http://www.chromium.org/blink/developer-faq">بلينك</a></li> +</ul> diff --git a/files/ar/glossary/boolean/index.html b/files/ar/glossary/boolean/index.html new file mode 100644 index 0000000000..b050bb3d8d --- /dev/null +++ b/files/ar/glossary/boolean/index.html @@ -0,0 +1,48 @@ +--- +title: متغير بولياني +slug: Glossary/Boolean +tags: + - أنواع البيانات + - جافاسكربت + - شيفرة المكتوب + - لغات برمجية + - مسرد +translation_of: Glossary/Boolean +--- +<p dir="rtl">المتغير البولياني هو نوع من البيانات، يأخذ فقط القيمة <code>صحيح</code> أو <code>خطأ</code>. مثلا في جافاسكربت، الشروط البوليانية تستعمل عادة لتحديد أي جزء من الشيفرة سينفذ (كالتعبير الشرطي if) أو سيكرر (كحلقة التكرار for).</p> + +<pre class="brush: js">/* التعبير الشرطي الجافاسكربتي */ +if (الشرط البولياني) { + // ما سينفذ في حالة الشرط صحيح +} + +if (الشرط البولياني) { + console.log("الشرط البولياني صحيح"); +} else { + console.log("الشرط البولياني خاطئ"); +} + + +/* حلقة التكرار الجافاسكربتية */ +for (متغير التحكم; الشرط البولياني; counter) { + // ما سيكرر في حالة الشرط صحيح + +for (var i=0; i < 4; i++) { + console.log("أطبع فقط إذا الشرط صحيح"); +} +</pre> + +<h2 id="المزيد">المزيد</h2> + +<h3 id="المركز_المعرفي">المركز المعرفي</h3> + +<ul> + <li>{{Interwiki("wikipedia", "Boolean data type", "Boolean")}} on Wikipedia</li> +</ul> + +<h3 id="المرجع_التقني">المرجع التقني</h3> + +<ul> + <li>The JavaScript global object: {{jsxref("Boolean")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Data_structures">JavaScript data types and data structures</a></li> +</ul> diff --git a/files/ar/glossary/browser/index.html b/files/ar/glossary/browser/index.html new file mode 100644 index 0000000000..8ce6faac33 --- /dev/null +++ b/files/ar/glossary/browser/index.html @@ -0,0 +1,26 @@ +--- +title: متصفح +slug: Glossary/Browser +tags: + - مسرد +translation_of: Glossary/Browser +--- +<p dir="rtl"><em>مُتصفِح الويب</em> هو برنامج يُستخدَم لاستقبال وعرض الصفحات من {{Glossary("World Wide Web","الشابكة")}}، كما يُمكِّن المستخدمين من الولوج إلى صفحات أخرى عبر {{Glossary("hyperlink","الوصلات")}}.</p> + +<h2 dir="rtl" id="المزيد_من_التفاصيل">المزيد من التفاصيل</h2> + +<h3 dir="rtl" id="معلومات_عامة">معلومات عامة</h3> + +<ul dir="rtl"> + <li>مقالة عن <a href="https://ar.wikipedia.org/wiki/%D9%85%D8%AA%D8%B5%D9%81%D8%AD_(%D9%88%D9%8A%D8%A8)">متصفح الويب</a> في الموسوعة الحرَّة</li> + <li>موقع <a href="http://www.evolutionoftheweb.com/">تطوُّر الشابكة</a></li> +</ul> + +<h3 dir="rtl" id="متصفحات_للتنزيل">متصفحات للتنزيل</h3> + +<ul dir="rtl"> + <li><a href="http://www.mozilla.org/ar/firefox/features/">متصفح فايرفوكس</a></li> + <li><a href="http://www.google.com/chrome/">متصفح جوجل كروم</a></li> + <li><a href="https://www.microsoft.com/en-us/download/internet-explorer.aspx">متصفح إنترنت إكسبلورر</a></li> + <li><a href="http://www.opera.com/">متصفح أوبرا</a></li> +</ul> diff --git a/files/ar/glossary/compile/index.html b/files/ar/glossary/compile/index.html new file mode 100644 index 0000000000..dd841b3e04 --- /dev/null +++ b/files/ar/glossary/compile/index.html @@ -0,0 +1,28 @@ +--- +title: تصريف +slug: Glossary/Compile +tags: + - مسرد +translation_of: Glossary/Compile +--- +<p><strong>التصريف</strong> (بالإنجليزيَّة: Compiling) هو عمليَّة تحويل برنامج حاسوبي مكتوب {{Glossary("computer programming", "بلغة برمجة")}} إلى برنامجٍ مُكافِئ مكتوب بلغةٍ أخرى (<strong>المُصرِّف</strong> هو البرمجيَّة التي تؤدي هذه المهمة). تُسمَّى أحيانًا هذه العمليَّة "بالتجميع (بالإنجليزيَّة: Assembling)" أو "البناء (بالإنجليزيَّة: Build)"، ما يوضِّح عادةً وجود المزيد من الخطوات بعد التصريف (كتحزيم البرنامج في صيغة ثنائيَّة تنفيذيَّة).</p> + +<p>يُحوِّل المُصرِّف عادةً لغةً عالية المُستوى (مثل سي أو {{Glossary("Java", "جافا")}})، المفهومة من البشر، إلى لغة الآلة (كلغة التجميع)، المفهومة من المعالِج. تتُرجِم بعض المُصرِّفات بين لُغتين من نفس المستوى، فتُسمَّى مُصبرِفات (نحتًا من مُصرِّف بيني) أو مُصعرِفات (نحتًا من مُصرِّف تقاطعي)، كتصريف لغة التايب سكربت إلى {{Glossary("JavaScript", "الجافاسكربت")}}.</p> + +<p>مُعظَم المُصرِّفات إمّا قبليَّة (تُصرِّف البرنامج قبل تشغيله، بالإنجليزيَّة: Ahead of time) وإمّا آنيَّة (تُصرِّف البرنامج أثناء تشغيله، بالإنجليزيَّة: Just in time). عادةً ما يستخدم المُطوِّر المُصرِّفات القبليَّة الاعتياديَّة من سطر الأوامر أو من {{Glossary("IDE", "بيئته البرمجيَّة")}}. من أشهر مُصرِّفات هذا النوع هو مُصرِّف جنو GCC. هذا بالنسبة للمُصرِّفات القبليَّة، أم المُصرِّفات الآنية فهي عادةً شفّافة بالنسبة لك، وتُستخدَم لأداءٍ أفضل. يحوي مُحرِّك الجافاسكربت <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> لمُتصفِّح فايرفوكس كمثال مُصرِّفًا آنيًّا مُضمّنًا فيه، يُصرِّف هذا المُصرِّف أكواد الجافاسكربت في المواقع العنكبوتيَّة إلى لغة الآلة أثناء تصفُّحِكَ لها، ما يُحسِّن الأداء ويزيده سُرعة. تعمل مشاريع مثل <a href="ar/docs/WebAssembly/">لغة التجميع العنكبوتيَّة</a> (بالإنجليزيَّة: WebAssembly) على جعل الأداء أفضل من ذلك حتّى.</p> + +<h2 id="المزيد_من_التفاصيل">المزيد من التفاصيل</h2> + +<h3 id="معلومات_عامة">معلومات عامة</h3> + +<ul> + <li dir="rtl">مقالة عن <a href="https://ar.wikipedia.org/wiki/%D9%85%D8%AD%D9%88%D9%84_%D8%A8%D8%B1%D9%85%D8%AC%D9%8A">المُصرِّف</a> في الموسوعة الحرَّة</li> + <li dir="rtl"><a href="https://gcc.gnu.org/">مجموعة مُصرِّفات جنو</a> (GCC)</li> +</ul> + +<h3 id="موارد_تعليميَّة">موارد تعليميَّة</h3> + +<ul> + <li><a href="https://medium.com/basecs/a-deeper-inspection-into-compilation-and-interpretation-d98952ebc842">مقدمة في المُصرِّفات (بالإنجليزيَّة)</a></li> + <li><a href="http://stackoverflow.com/a/1672/133203">قائمة ضخمة من موارد تعلُّم المُصرِّفات في موقع StackOverflow</a></li> +</ul> diff --git a/files/ar/glossary/computer_programming/index.html b/files/ar/glossary/computer_programming/index.html new file mode 100644 index 0000000000..c497bed929 --- /dev/null +++ b/files/ar/glossary/computer_programming/index.html @@ -0,0 +1,21 @@ +--- +title: برمجة +slug: Glossary/Computer_Programming +tags: + - برمجة + - لغات برمجة + - مسرد +translation_of: Glossary/Computer_Programming +--- +<p dir="rtl">تُعرَّف <strong>البرمجة</strong> (أو برمجة الحاسب الآلي) بأنَّها عمليّة إنشاء وتنظيم مجموعة من التعليمات. تُخبِر هذه التعليمات الحاسوب بما عليه فعله باللغة التي يفهمها. تأتي هذه التعليمات بأشكال لغات مختلفة مثل جافا، جافاسكربت، بايثون، روبي ...إلخ.</p> + +<p dir="rtl">يمكنك، باستخدام اللغة المناسبة، إنشاء جميع أنواع البرمجيات. على سبيل المثال، برنامج يساعد العلماء على حل المعادلات المُعقدة، قاعدة بيانات تُخزِن كميّة هائلة من البيانات، موقع يتيح للناس تحميل الأغاني، أو برنامج يتيح للناس إنشاء أفلام رسوم متحركة.</p> + +<h2 dir="rtl" id="المزيد_من_التفاصيل">المزيد من التفاصيل</h2> + +<h3 dir="rtl" id="معلومات_عامة">معلومات عامة</h3> + +<ul dir="rtl"> + <li>مقالة عن {{Interwiki("wikipedia", "برمجة", "البرمجة")}} في الموسوعة الحرَّة</li> + <li>مقالة عن {{Interwiki("wikipedia", "قائمة_لغات_البرمجة", "قائمة بلغات البرمجة")}} في الموسوعة الحرَّة</li> +</ul> diff --git a/files/ar/glossary/cookie/index.html b/files/ar/glossary/cookie/index.html new file mode 100644 index 0000000000..05e0621c77 --- /dev/null +++ b/files/ar/glossary/cookie/index.html @@ -0,0 +1,20 @@ +--- +title: كعكة +slug: Glossary/Cookie +tags: + - مسرد +translation_of: Glossary/Cookie +--- +<p dir="rtl">الكعكة (ملف تعريف الارتباط) هي قدر صغير من المعلومات يُترَك على حواسيب الزوار من قبل الموقع بواسطة {{ Glossary("browser", "المُتصفِح") }}.</p> + +<p dir="rtl">تُستخدَم الكعكات لتخصيص تجربة المُستخدِم مع الموقع. قد تحتوي هذه الكعكات على تفضيلات أو مدخلات المُستخدِم عند دخوله لهذا الموقع. يستطيع المُستخدمِين تعديل متصفحاتِهم لقبول، أو رفض، أو حذف هذه الكعكات.</p> + +<p dir="rtl">يُمكِن وضع الكعكات وتعديلها من جهة الخادم باستخدام <a href="/ar/docs/Web/HTTP/Cookies">الترويسة</a> <code>Set-Cookie</code>، أو بواسطة الجافاسكربت باستخدام الخاصيّة <code><a href="/en-US/docs/Web/API/Document/cookie">document.cookie</a></code>.</p> + +<h2 dir="rtl" id="المزيد_من_التفاصيل">المزيد من التفاصيل</h2> + +<h3 dir="rtl" id="معلومات_عامة">معلومات عامة</h3> + +<ul dir="rtl"> + <li>مقالة عن <a href="https://ar.wikipedia.org/wiki/%D9%85%D9%84%D9%81_%D8%AA%D8%B9%D8%B1%D9%8A%D9%81_%D8%A7%D8%B1%D8%AA%D8%A8%D8%A7%D8%B7">ملف تعريف الارتباط</a> في الموسوعة الحرَّة</li> +</ul> diff --git a/files/ar/glossary/copyleft/index.html b/files/ar/glossary/copyleft/index.html new file mode 100644 index 0000000000..5b44cfb6ad --- /dev/null +++ b/files/ar/glossary/copyleft/index.html @@ -0,0 +1,17 @@ +--- +title: حقوق متروكة +slug: Glossary/Copyleft +tags: + - ترخيص + - مسرد +translation_of: Glossary/Copyleft +--- +<p dir="rtl">يشير مصطلح الحقوق المتروكة (copyleft)، في سياق التراخيص القانونيّة، إلى نوع الرخص التي تفرض ترخيص إعادة توزيع العمل المُرخَص بها بالرخصة الأصل. يمكننا أخذ {{Glossary("GPL", "رخصة جنو العموميّة")}} كمثال على تراخيص الحقوق المتروكة للبرمجيات <a href="https://ar.wikipedia.org/wiki/%D8%B1%D8%AE%D8%B5_%D8%A7%D9%84%D9%85%D8%B4%D8%A7%D8%B9_%D8%A7%D9%84%D8%A5%D8%A8%D8%AF%D8%A7%D8%B9%D9%8A">ورخص المشاع الإبداعي</a> من فئة الترخيص بالمثل كمثال على تراخيص الحقوقة المتروكة للأعمال الفنيّة.</p> + +<h2 dir="rtl" id="المزيد_من_التفاصيل">المزيد من التفاصيل</h2> + +<h3 dir="rtl" id="معلومات_عامة">معلومات عامة</h3> + +<ul dir="rtl"> + <li>مقالة عن <a href="https://ar.wikipedia.org/wiki/%D8%AD%D9%82%D9%88%D9%82_%D9%85%D8%AA%D8%B1%D9%88%D9%83%D8%A9">الحقوق المتروكة</a> في الموسوعة الحرَّة</li> +</ul> diff --git a/files/ar/glossary/data_structure/index.html b/files/ar/glossary/data_structure/index.html new file mode 100644 index 0000000000..49529d5852 --- /dev/null +++ b/files/ar/glossary/data_structure/index.html @@ -0,0 +1,17 @@ +--- +title: هيكل بيانات +slug: Glossary/Data_structure +tags: + - مسرد + - هياكل-البيانات +translation_of: Glossary/Data_structure +--- +<p dir="rtl"><strong>هيكل البيانات</strong> (بالإنجليزيَّة: Data Structure) هو طريقة مُعينة لتخزين وتنظيم البيانات ما يُمكِّن استخدامها بكفاءة.</p> + +<h2 dir="rtl" id="المزيد_من_التفاصيل">المزيد من التفاصيل</h2> + +<h3 dir="rtl" id="معلومات_عامة">معلومات عامة</h3> + +<ul dir="rtl"> + <li>مقالة عن <a href="https://ar.wikipedia.org/wiki/%D8%A8%D9%86%D9%8A%D8%A9_%D8%A8%D9%8A%D8%A7%D9%86%D8%A7%D8%AA">هيكل البيانات</a> في الموسوعة الحرَّة</li> +</ul> diff --git a/files/ar/glossary/decryption/index.html b/files/ar/glossary/decryption/index.html new file mode 100644 index 0000000000..fc8c14de60 --- /dev/null +++ b/files/ar/glossary/decryption/index.html @@ -0,0 +1,25 @@ +--- +title: فك التشفير +slug: Glossary/Decryption +tags: + - حماية + - مسرد +translation_of: Glossary/Decryption +--- +<p dir="rtl"><strong>فك التشفير</strong>، في علم التشفير، هو تحويل {{glossary("ciphertext", "نص مُشفَر")}} إلى {{glossary("cleartext", "نص مقروء")}}.</p> + +<p dir="rtl">فك التشفير هو من مبادئ عمليّة التشفير، فهو يحوِّل النص المُشفَر (كما يسمى النص المُعمَّى أيضاً) إلى نص مقروء باستخدام خوارزميّة تشفير تُسمى {{glossary("cipher", "الشيفرة")}}. كما في التشفير، تجري عمليّة فك التشفير في الخوارزميات الحديثة باستخدام خوارزميّة وكلمة سريّة معينة، تدعى {{glossary("key", "المفتاح")}}. في حين أنَّ الخوارزميات غالباً ما تُنشَر للعامة، فالمفتاح ينبغي أن يبقى سرياً مادام النص المُشفَر يجب أن يبقى سرياً.</p> + +<p dir="rtl"> </p> + +<p><img alt="مبدأ عمليّة فك التشفير." src="https://mdn.mozillademos.org/files/15899/Decryption-ar.png" style="height: 81px; width: 485px;"></p> + +<p dir="rtl">فك التشفير هو العمليّة المعاكسة {{glossary("encryption", "للتشفير")}}. تكون عمليّة فك التشفير صعبة الإجراء حسابياً إن كان المفتاح السري غير ملعوم. يتوقف مدى الصعوبة على قوَّة الخوارزميّة المُختارة وعلى التقدُم في عمليّة تحليلها (أي كُلما عُلِمَت تفاصيل أكثر عن آلية التشفير المُستخدمة وضَعُفَت قوة الخوارزميّة سهل كسرها).</p> + +<h2 dir="rtl" id="المزيد_من_التفاصيل">المزيد من التفاصيل</h2> + +<h3 class="highlight-spanned" dir="rtl" id="مراجع_تقنيّة">مراجع تقنيّة</h3> + +<ul dir="rtl"> + <li><a href="/ar/docs/Encryption_and_Decryption">التشفير وفك التشفير</a></li> +</ul> diff --git a/files/ar/glossary/denial_of_service/index.html b/files/ar/glossary/denial_of_service/index.html new file mode 100644 index 0000000000..4fe7c06334 --- /dev/null +++ b/files/ar/glossary/denial_of_service/index.html @@ -0,0 +1,9 @@ +--- +title: حجب الخدمة +slug: Glossary/Denial_of_Service +tags: + - حماية + - مسرد +translation_of: Glossary/Denial_of_Service +--- +<p>{{page("/ar/docs/Glossary/DOS_attack")}}</p> diff --git a/files/ar/glossary/dom/index.html b/files/ar/glossary/dom/index.html new file mode 100644 index 0000000000..11757b223f --- /dev/null +++ b/files/ar/glossary/dom/index.html @@ -0,0 +1,35 @@ +--- +title: DOM +slug: Glossary/DOM +tags: + - CodingScripting + - DOM + - Glossary +translation_of: Glossary/DOM +--- +<p dir="rtl"> </p> + +<p dir="rtl">DOM (نموذج كائن المستند) هو {{glossary("API")}} يمثل ويتفاعل مع أي مستند {{glossary("HTML")}} أو {{glossary("XML")}} .</p> + +<p dir="rtl">DOM عبارة عن نموذج مستند تم تحميله في {{glossary("browser")}} ويمثل المستند على شكل شجرة عقدة ، حيث تمثل كل عقدة جزءًا من المستند (على سبيل المثال ، {{Glossary("element")}} ، سلسلة نصية ، أو تعليق).</p> + +<p dir="rtl">يُعد DOM واحدًا من أكثر {{Glossary("API")}} المستخدم في {{glossary("World Wide Web","Web")}} لأنه يسمح بتشغيل التعليمات البرمجية في المتصفح للوصول و التفاعل مع كل عقدة في الوثيقة. يمكن إنشاء العقد ونقلها وتغييرها. يمكن إضافة مستمعي الحدث إلى العقد وتشغيله عند وقوع حدث معين.</p> + +<p dir="rtl">لم يتم تحديد DOM في الأصل - فقد جاء عندما بدأت المتصفحات في تنفيذ {{Glossary("JavaScript")}}. يطلق على هذا DOM القديم أحيانًا اسم DOM 0. واليوم ، يحافظ WHATWG على معيار DOM .</p> + +<p dir="rtl"> </p> + +<h2 dir="rtl" id="أعرف_أكثر">أعرف أكثر</h2> + +<h3 dir="rtl" id="معرفة_عامة">معرفة عامة</h3> + +<ul> + <li>{{interwiki("wikipedia", "Document_Object_Model", "The Document Object Model")}} على Wikipedia</li> +</ul> + +<h3 dir="rtl" id="معلومات_تقنية">معلومات تقنية</h3> + +<ul> + <li dir="rtl"><a href="/en-US/docs/DOM">وثائق DOM على MDN</a></li> + <li dir="rtl"><a href="https://dom.spec.whatwg.org/" rel="external">معيار DOM</a></li> +</ul> diff --git a/files/ar/glossary/dos_attack/index.html b/files/ar/glossary/dos_attack/index.html new file mode 100644 index 0000000000..4ab372752a --- /dev/null +++ b/files/ar/glossary/dos_attack/index.html @@ -0,0 +1,33 @@ +--- +title: هجمة حجب الخدمة +slug: Glossary/DOS_attack +tags: + - حماية + - مسرد +translation_of: Glossary/DOS_attack +--- +<p dir="rtl"><strong>هجوم حجب الخدمة</strong> (أو هجوم الحرمان من الخدمة - Dos) هي هجمة شبكيّة تمنَع الاستخدام الشرعي (العادي) لموارد {{glossary("server", "الخادم")}} عن طريق إغراقه بالطلبات.</p> + +<p dir="rtl">تمتلك الحواسيب حد معين من الموارد، كالقدرة الحسابيّة أو الذاكرة. عندما تُستهلَك هذه الموارد قد يتجمد أو يتعطل البرنامج، مما يجعله غير متوفراً. تتألف هجمة حجب الخدمة من تقنيات متنوعة لجعل لاستنفاذ هذه الموارد وجعل الخادمة أو الشبكة غير متاحة لمستخدميها الشرعيين، أو على الأقل لإبطاء أداء الخادم.</p> + +<h3 dir="rtl" id="أنواع_هجمات_حجب_الخدمة">أنواع هجمات حجب الخدمة</h3> + +<p dir="rtl">هجمات حجب الخدمة هي تصنيف أكثر من أن تكون نوع معين من الهجمات. أدناه توجد قائمة غير شاملة لأنواع هجمات حجب الخدمة:</p> + +<ul dir="rtl"> + <li>هجوم النطاق الترددي (bandwidth attack)</li> + <li>هجوم إغراق الخدمة بالطلبات (service request flood)</li> + <li>هجوم الغمر التزامني (SYN flooding attack)</li> + <li>هجوم الغمر بطلبات ميثاق<span class="CLPzrc Y0NH2b"> رسائل التحكم في الإنترنت</span> (ICMP flood attack)</li> + <li>هجوم الند للند (peer-to-peer attack)</li> + <li>هجوم حجب الخدمة المُستمِر (permanent DoS attack)</li> + <li>هجوم الغمر على مستوى طبقة التطبيقات (application level flood attack)</li> +</ul> + +<h2 dir="rtl" id="المزيد_من_المعلومات">المزيد من المعلومات</h2> + +<ul dir="rtl"> + <li>مقالة <a href="https://ar.wikipedia.org/wiki/%D9%87%D8%AC%D9%85%D8%A7%D8%AA_%D8%A7%D9%84%D8%AD%D8%B1%D9%85%D8%A7%D9%86_%D9%85%D9%86_%D8%A7%D9%84%D8%AE%D8%AF%D9%85%D8%A7%D8%AA">هجمة الحرمان من الخدمات</a> في الموسوعة الحرَّة</li> + <li>مقالة <a href="https://www.owasp.org/index.php/Denial_of_Service">حجب الخدمة في موسوعة أواسب</a></li> + <li>{{Glossary("Distributed Denial of Service","هجمة حجب الخدمة الموزَّعة")}}</li> +</ul> diff --git a/files/ar/glossary/forbidden_header_name/index.html b/files/ar/glossary/forbidden_header_name/index.html new file mode 100644 index 0000000000..12776e896f --- /dev/null +++ b/files/ar/glossary/forbidden_header_name/index.html @@ -0,0 +1,51 @@ +--- +title: Forbidden header name +slug: Glossary/Forbidden_header_name +translation_of: Glossary/Forbidden_header_name +--- +<p>A <dfn>forbidden header name</dfn> is the name of any <a href="/en-US/docs/Web/HTTP/Headers">HTTP header</a> that cannot be modified programmatically; specifically, an HTTP <strong>request</strong> header name (in contrast with a {{Glossary("Forbidden response header name")}}).</p> + +<p>Modifying such headers is forbidden because the user agent retains full control over them. Names starting with `<code title="">Sec-</code>` are reserved for creating new headers safe from {{glossary("API","APIs")}} using <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> that grant developers control over headers, such as {{domxref("XMLHttpRequest")}}.</p> + +<p>Forbidden header names start with <code>Proxy-</code> or <code>Sec-</code>, or are one of the following names:</p> + +<ul class="brief"> + <li><code title="">Accept-Charset</code></li> + <li><code title="">Accept-Encoding</code></li> + <li><code title="">Access-Control-Request-Headers</code></li> + <li><code title="">Access-Control-Request-Method</code></li> + <li><code title="">Connection</code></li> + <li><code title="">Content-Length</code></li> + <li><code title="">Cookie</code></li> + <li><code title="">Cookie2</code></li> + <li><code title="">Date</code></li> + <li><code title="">DNT</code></li> + <li><code title="">Expect</code></li> + <li><code title="">Feature-Policy</code></li> + <li><code title="">Host</code></li> + <li><code title="">Keep-Alive</code></li> + <li><code title="http-origin">Origin</code></li> + <li><code title="http-origin">Proxy-</code></li> + <li><code title="http-origin">Sec-</code></li> + <li><code title="">Referer</code></li> + <li><code title="">TE</code></li> + <li><code title="">Trailer</code></li> + <li><code title="">Transfer-Encoding</code></li> + <li><code title="">Upgrade</code></li> + <li><code title="">Via</code></li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: The <code>User-Agent</code> header is no longer forbidden, <a href="https://fetch.spec.whatwg.org/#terminology-headers">as per spec</a> — see forbidden header name list (this was implemented in Firefox 43) — it can now be set in a Fetch <a href="/en-US/docs/Web/API/Headers">Headers</a> object, or via XHR <a href="/en-US/docs/Web/API/XMLHttpRequest#setRequestHeader%28%29">setRequestHeader()</a>. However, Chrome will silently drop the header from Fetch requests (see <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=571722">Chromium bug 571722</a>).</p> +</div> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a> + + <ol> + <li>{{Glossary("Forbidden response header name")}}</li> + </ol> + </li> +</ol> +</section> diff --git a/files/ar/glossary/function/index.html b/files/ar/glossary/function/index.html new file mode 100644 index 0000000000..169997f62c --- /dev/null +++ b/files/ar/glossary/function/index.html @@ -0,0 +1,87 @@ +--- +title: دالة +slug: Glossary/Function +tags: + - جافاسكربت + - مسرد +translation_of: Glossary/Function +--- +<p dir="rtl"><strong>الدالة</strong> (بالإنجليزيَّة: Function) هي قطعة من الكود يُمكِن استدعاؤها من جزء آخر أو من قبل نفسها، أو هي {{Glossary("variable", "مُتغيِّر")}} يشير إلى دالة. عندما تُستدعى الدالة، تُمرَّر {{Glossary("Argument", "المُعطيات")}} إلى الدالة كمُدخلات، كما يُمكِن للدالة - اختياريًا - أن تُعيد مُخرجًا. تُصنَّف الدوال في لغة {{glossary("JavaScript", "الجافاسكربت")}} على أنهَّا {{glossary("object", "كائنات")}}.</p> + +<p dir="rtl">اسم الدالة هو {{Glossary("identifier", "مُعرِّف")}} يُصرَّح عنه كجزء من كود التصريح عن الدالة. يعتمد {{Glossary("scope", "مجال")}} اسم الدالة على ما إذا كان اسمها تصريحًا أم تعبيرًا (حيث إذا كان تصريحًا سيُحمَّل قبل تنفيذ الكود، أما إذا كان تعبيرًا سيُحمَّل عند وصول المُفسِّر إليه. طالع <a href="https://stackoverflow.com/questions/1013385/what-is-the-difference-between-a-function-expression-vs-declaration-in-javascrip">هذا السؤال</a> للمزيد من المعلومات).</p> + +<h3 dir="rtl" id="الأنواع_المختلفة_للدوال">الأنواع المختلفة للدوال</h3> + +<p dir="rtl"><strong>الدالة المجهولة </strong>(بالإنجليزيَّة: Anonymous function) هي دالة لا تملك اسمًا:</p> + +<pre class="brush: js">function () {}; +// أو باستخدام الأسهم في إصدار EMAScript 2015 +() => {}; +</pre> + +<p dir="rtl"><strong>الدالة المُسمّاة</strong> (بالإنجليزيَّة: Named function) هي دالة تملك اسمًا:</p> + +<pre class="brush: js">function foo() {}; +// أو باستخدام الأسهم في إصدار EMAScript 2015 +const foo = () => {}; +</pre> + +<p dir="rtl"><strong>الدالة المُحاطة</strong> (بالإنجليزيَّة: Inner function) هي دالة بداخل أخرى (الدالة <code>square</code> كما في مثالنا أدناه). <strong>الدالة المُحيطة</strong> (outer function) هي دالة (الدالة <code>addSquares</code> كما في مثالنا أدناه) تُحيط بأخرى:</p> + +<pre class="brush: js">function addSquares(a,b) { + function square(x) { + return x * x; + } + return square(a) + square(b); +}; +//باستخدام الأسهم في إصدار ECMAScript 2015 +const addSquares = (a,b) => { + const square = x => x*x; + return square(a) + square(b); +}; +</pre> + +<p dir="rtl"><strong>الدالة العوديّة</strong> (بالإنجليزيَّة: Recursive function) هي دالة تستدعي نفسها. طالع {{Glossary("Recursion", "المعاودة")}} للمزيد من التفاصيل.</p> + +<pre class="brush: js">function loop(x) { + if (x >= 10) + return; + loop(x + 1); +}; +//باستخدام الأسهم في إصدار ECMAScript 2015 +const loop = x => { + if (x >= 10) + return; + loop(x + 1); +}; +</pre> + +<p dir="rtl"><strong>التعبيرات الداليَّة المُستحضرة فوريًا</strong> (بالإنجليزيَّة: Immediately Invoked Function Expressions) هي دوال تُستدعى مباشرةً بعد أنْ تُحمَّل إلى {{glossary("Compiler", "مُصرِّف")}} المُتصفِّح. يُعرَّف هذا النوع من الدوال عبر إضافة قوسان: يساري ويميني إضافيان في نهاية تصريح الدالة (انظر أدناه).</p> + +<pre class="brush: js">// Error (https://en.wikipedia.org/wiki/Immediately-invoked_function_expression) +/* +function foo() { + console.log('Hello Foo'); +}(); +*/ + +(function foo() { + console.log("Hello Foo"); +}()); + +(function food() { + console.log("Hello Food"); +})(); + +</pre> + +<p dir="rtl">اقرأ <a href="https://en.wikipedia.org/wiki/Immediately-invoked_function_expression">هذه المقالة</a> في الموسوعة الحرَّة للمزيد عن هذا النوع من الدوال.</p> + +<h2 dir="rtl" id="المزيد_من_التفاصيل">المزيد من التفاصيل</h2> + +<h3 dir="rtl" id="مراجع_تقنيّة">مراجع تقنيّة</h3> + +<ul dir="rtl"> + <li><a href="/ar/docs/Web/JavaScript/Guide/Functions">توثيق الدوال</a> في شبكة مطوري موزيلا</li> + <li><a href="/ar/docs/Web/JavaScript/Guide/Functions">الدوال السهميّة</a></li> +</ul> diff --git a/files/ar/glossary/google_chrome/index.html b/files/ar/glossary/google_chrome/index.html new file mode 100644 index 0000000000..02a62dc468 --- /dev/null +++ b/files/ar/glossary/google_chrome/index.html @@ -0,0 +1,35 @@ +--- +title: جوجل كروم +slug: Glossary/Google_Chrome +tags: + - مسرد +translation_of: Glossary/Google_Chrome +--- +<p dir="rtl">جوجل كروم هو {{glossary("browser", "مُتصفِح")}} ويب مجاني طوِّر بواسطة شركة جوجل. يعد هذا المتصفح مبنياً على مشروع <a href="http://www.chromium.org/">كروميوم</a> مفتوح المصدر. يوجد بضعة اختلافات رئيسيّة بينهما (كروم وكروميوم) مشروحة في <a href="https://code.google.com/p/chromium/wiki/ChromiumBrowserVsGoogleChrome">موسوعة مشروع كروميوم</a>. يستخدم كلا المشروعين مُحرِّك عرض مُشتَق من {{glossary("WebKit", "ويب كيت")}} يسمى {{glossary("Blink", "بلينك")}}. من الجدير بالذكر أنَّ نسخة كروم لهواتف ال<span>آي أو إس</span> لا تستخدم بلينك وإنما تستخدم مُحرِّك عرض نظام التشغيل الأساسي.</p> + +<h2 dir="rtl" id="المزيد_من_التفاصيل" style="line-height: 30px;">المزيد من التفاصيل</h2> + +<h3 dir="rtl" id="معلومات_عامة" style="line-height: 24px;">معلومات عامة</h3> + +<ul dir="rtl"> + <li>مقالة عن <a href="https://ar.wikipedia.org/wiki/%D8%AC%D9%88%D8%AC%D9%84_%D9%83%D8%B1%D9%88%D9%85">جوجل كروم</a> في الموسوعة الحرَّة</li> +</ul> + +<h3 dir="rtl" id="تنزيل_كروم_للمستخدمين" style="line-height: 24px;">تنزيل كروم للمستخدمين</h3> + +<p dir="rtl">استخدم الرابط المناسب لمنصتك لتنزيل نسخة كروم للمستخدمين العاديين:</p> + +<ul dir="rtl"> + <li><a href="https://play.google.com/store/apps/details?id=com.android.chrome">نسخة الأندرويد</a></li> + <li><a href="https://itunes.apple.com/us/app/chrome-web-browser-by-google/id535886823?mt=8">نسخة الآي أو إس</a></li> + <li><a href="https://www.google.com.sa/intl/ar/chrome/">نسخة سطح المكتب</a></li> +</ul> + +<h3 dir="rtl" id="تنزيل_كروم_للمطورين">تنزيل كروم للمطورين</h3> + +<p dir="rtl">إذا كنت راغباً بتجربة أحدث مزايا كروم قيد الاختبار، قم بتثبيت النسخ ما قبل المستقرة (الغير مستقرة). تدفع جوجل التحديثات دورياً ليتم تجربتها، كما صُمِمَت هذه النسخ لتعمل جنباً إلى جنب مع النسخ المستقرة بلا مشاكل. قم بزيارة <a href="https://www.google.com.sa/intl/ar/chrome/browser/canary.html">مدونة أخبار الإصدارات الخاصة بكروم</a> لمعرفة آخر التفاصيل.</p> + +<ul dir="rtl"> + <li><a href="https://play.google.com/store/apps/details?id=com.chrome.dev">نسخة كروم التطويريّة للأندرويد</a></li> + <li><a href="https://www.google.com/chrome/browser/canary.html">نسخة كروم كناري لسطح المكتب</a></li> +</ul> diff --git a/files/ar/glossary/gpl/index.html b/files/ar/glossary/gpl/index.html new file mode 100644 index 0000000000..a7d73de893 --- /dev/null +++ b/files/ar/glossary/gpl/index.html @@ -0,0 +1,19 @@ +--- +title: رخصة جنو العمومية +slug: Glossary/GPL +tags: + - ترخيص + - مسرد +translation_of: Glossary/GPL +--- +<p dir="rtl">رخصة جنو العموميّة (GPL) هي رخصة للبرمجيات الحرَّة من نوع رخص {{Glossary("copyleft", "الحقوق المتروكة")}} نُشِرَت من قبل مؤسسة البرمجيات الحرَّة (FSF). يُمنَح مستخدمين البرمجيات المُرخصة بهذه الرخصة حريّة استخدامها، وقراءة شيفرتها المصدرية، وتعديلها وإعادة توزيع التغييرات التي أجروها (الحريات الأربعة) بشرط توفير نسختهم الموزَّعة من البرمجيّة (سواءً كانت معدلة أم غير معدلة) تحت بنود نفس الرخصة (ولهذا تُعرَف بالرخصة الجرثوميّة أو الفيروسيّة لأنها تصيب جميع البرمجيات المشتقة منها "بالعدوة").</p> + +<h2 dir="rtl" id="المزيد_من_التفاصيل">المزيد من التفاصيل</h2> + +<h3 dir="rtl" id="معلومات_عامة">معلومات عامة</h3> + +<ul dir="rtl"> + <li><a href="http://www.gnu.org/licenses/gpl-faq.html">أسئلة شائعة</a> عن رخص جنو</li> + <li>مقالة عن <a href="https://ar.wikipedia.org/wiki/%D8%B1%D8%AE%D8%B5%D8%A9_%D8%AC%D9%86%D9%88_%D8%A7%D9%84%D8%B9%D9%85%D9%88%D9%85%D9%8A%D8%A9">رخصة جنو العمومية</a> في الموسوعة الحرَّة</li> + <li>نص <a href="https://www.gnu.org/licenses/gpl-3.0.ar.html">رخصة جنو العموميّة</a> (<a href="https://ar.wikipedia.org/wiki/%D9%88%D9%8A%D9%83%D9%8A%D8%A8%D9%8A%D8%AF%D9%8A%D8%A7:%D9%86%D8%B5_%D8%B1%D8%AE%D8%B5%D8%A9_%D8%AC%D9%86%D9%88_%D8%A7%D9%84%D8%B9%D9%85%D9%88%D9%85%D9%8A%D8%A9">النسخة العربيّة</a> الغير رسميّة)</li> +</ul> diff --git a/files/ar/glossary/grid_areas/index.html b/files/ar/glossary/grid_areas/index.html new file mode 100644 index 0000000000..5e89defe39 --- /dev/null +++ b/files/ar/glossary/grid_areas/index.html @@ -0,0 +1,78 @@ +--- +title: Grid Areas +slug: Glossary/Grid_Areas +translation_of: Glossary/Grid_Areas +--- +<p>A <strong>grid area</strong> is one or more {{glossary("grid cell", "grid cells")}} that make up a rectangular area on the grid. Grid areas are created when you place an item using <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">line-based placement</a> or when defining areas using <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">named grid areas</a>.</p> + +<p><img alt="Image showing a highlighted grid area" src="https://mdn.mozillademos.org/files/14771/1_Grid_Area.png" style="height: 253px; width: 380px;"></p> + +<p>Grid areas <em>must</em> be rectangular in nature; it is not possible to create, for example, a T- or L-shaped grid area.</p> + +<p>In the example below I have a grid container with two grid items. I have named these with the {{cssxref("grid-area")}} property and then laid them out on the grid using {{cssxref("grid-template-areas")}}. This creates two grid areas, one covering four grid cells, the other two.</p> + +<div id="example_1"> +<div class="hidden"> +<pre class="brush: css notranslate">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: repeat(3,1fr); + grid-template-rows: 100px 100px; + grid-template-areas: + "a a b" + "a a b"; +} +.item1 { + grid-area: a; +} +.item2 { + grid-area: b; +} +</pre> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="item1">Item</div> + <div class="item2">Item</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('example_1', '300', '280') }}</p> +</div> + +<h2 id="Learn_More">Learn More</h2> + +<h3 id="Property_reference">Property reference</h3> + +<ul> + <li>{{cssxref("grid-template-columns")}}</li> + <li>{{cssxref("grid-template-rows")}}</li> + <li>{{cssxref("grid-auto-rows")}}</li> + <li>{{cssxref("grid-auto-columns")}}</li> + <li>{{cssxref("grid-template-areas")}}</li> + <li>{{cssxref("grid-area")}}</li> +</ul> + +<h3 id="Further_reading">Further reading</h3> + +<ul> + <li>CSS Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basic concepts of grid layout</a></em></li> + <li>CSS Grid Layout Guide: <em><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></em></li> + <li><a href="https://drafts.csswg.org/css-grid/#grid-area-concept">Definition of Grid Areas in the CSS Grid Layout specification</a></li> +</ul> diff --git a/files/ar/glossary/hyperlink/index.html b/files/ar/glossary/hyperlink/index.html new file mode 100644 index 0000000000..c2aff9a198 --- /dev/null +++ b/files/ar/glossary/hyperlink/index.html @@ -0,0 +1,33 @@ +--- +title: رابط +slug: Glossary/Hyperlink +tags: + - ل.ت.ن.ف + - لغة توصيف النص الفائق + - مسرد +translation_of: Glossary/Hyperlink +--- +<p dir="rtl">تَربُط <strong>الروابط</strong> (أو الوصلات) الصفحات العنكبوتيَّة أو عناصر البيانات مع بعضها البعض. يُستخدَم العنصر {{HTMLElement("a")}}، في {{glossary("HTML", "لغة توصيف النص الفائق")}}، لتعريف رابط من نقطة في الصفحة (كنص أو صورة) إلى نقطة في صفحة أخرى (أو حتى في نفس الصفحة).</p> + +<h2 dir="rtl" id="المزيد_من_التفاصيل">المزيد من التفاصيل</h2> + +<h3 dir="rtl" id="معلومات_عامة">معلومات عامة</h3> + +<ul dir="rtl"> + <li>مقالة عن <a href="https://ar.wikipedia.org/wiki/%D8%B1%D8%A7%D8%A8%D8%B7_%D8%AA%D8%B4%D8%B9%D8%A8%D9%8A">الرابط الفائِق</a> في الموسوعة الحرَّة</li> + <li>مقالة عن <a href="/ar/docs/Web/Guide/HTML/Hyperlink">إنشاء الرابط</a> في شبكة مطوري موزيلا</li> +</ul> + +<h3 dir="rtl" id="مراجعة_تقنيّة">مراجعة تقنيّة</h3> + +<ul dir="rtl"> + <li><a href="https://www.w3.org/TR/1999/REC-html401-19991224/struct/links.html">الروابط في مستندات لغة توصيف النص الفائق - رابطة الويب العالميّة</a></li> + <li><a href="https://w3c.github.io/html-reference/a.html">العنصر a في لغة توصيف النص الفائق الإصدار الخامس - الروابط - رابطة الويب العالميّة</a></li> +</ul> + +<h3 dir="rtl" id="تعلَّم_المزيد_عن_الروابط">تعلَّم المزيد عن الروابط</h3> + +<ul dir="rtl"> + <li><a href="/ar/docs/Web/HTML/Element/a">توثيق العنصر <code><a></code> في شبكة مطوري موزيلا</a></li> + <li><a href="/ar/docs/Web/HTML/Element/link">توثيق العنصر <code><link></code> في شبكة مطوري موزيلا</a></li> +</ul> diff --git a/files/ar/glossary/identifier/index.html b/files/ar/glossary/identifier/index.html new file mode 100644 index 0000000000..da321dbda0 --- /dev/null +++ b/files/ar/glossary/identifier/index.html @@ -0,0 +1,18 @@ +--- +title: مُعرِّف +slug: Glossary/Identifier +tags: + - مسرد +translation_of: Glossary/Identifier +--- +<p dir="rtl"><strong>المُعرِّف</strong> (Identifier) هو مجموعة من {{glossary("character", "المحارف")}} تُعرِّف (تُعبِر عن، تُسمي) {{glossary("variable", "متغيّر")}}، {{glossary("function", "دالة")}}، أو {{glossary("property", "خاصيّة")}}.</p> + +<p dir="rtl">في لغة {{glossary("JavaScript", "الجافاسكربت")}}، يُمكِن أن تحتوي المُعرِّفات على أحرف أبجديّة فقط (أو "$" أو "_")، ولايمكن أن تبدأ برقم. يختلف المُعرِّف عن السلسلة النصيّة، بأنَّ الأخيرة عبارة نوع من البيانات، بينما المُعرِّف هو جزء من الشيفرة. لا توجد أيّة طريقة لتحويل المُعرِّفات إلى سلاسل نصيّة في الجافاسكربت، ولكن في بعض الأحيان من الممكن {{glossary("parse", "تحليل")}} السلاسل النصيّة إلى مُعرِّفات.</p> + +<h2 dir="rtl" id="المزيد_من_التفاصيل">المزيد من التفاصيل</h2> + +<h3 dir="rtl" id="معلومات_عامة">معلومات عامة</h3> + +<ul dir="rtl"> + <li>مقالة عن <a href="https://en.wikipedia.org/wiki/Identifier#In_computer_science">المُعرَّف</a> في الموسوعة الحرَّة</li> +</ul> diff --git a/files/ar/glossary/index.html b/files/ar/glossary/index.html new file mode 100644 index 0000000000..39ad063caf --- /dev/null +++ b/files/ar/glossary/index.html @@ -0,0 +1,18 @@ +--- +title: المعجم +slug: Glossary +tags: + - صفحة هبوط + - مبتدئين + - مسرد +translation_of: Glossary +--- +<div class="translate-buttons"> </div> + +<div dir="rtl" style="max-width: 300px; float: left; margin: 0px 1em 0.5em 0px;">{{LearnBox({"title":"تعلَّم مُصطلحاً جديداً:"})}}</div> + +<p dir="rtl"><span class="seoSummary">تحتوي تقنيات الويب على قائمة ضخمة من المصطلحات والاختصارات التي تستخدم في التوثيقات والبرمجة. يهدف المسرد (معجم المصطلحات) إلى توفير تعريفات للكلمات والاختصارات التي تحتاج معرفتها لبناء فهم صحيح للويب وتطويره.</span></p> + +<p><strong><a href="/ar/docs/new?parent=4391">أضف مصطلحاً جديداً إلى المسرد</a></strong></p> + +<p>{{GlossaryList({"split":"h3", "css":"multiColumnList"})}}</p> diff --git a/files/ar/glossary/mozilla_firefox/index.html b/files/ar/glossary/mozilla_firefox/index.html new file mode 100644 index 0000000000..4d23e8e6ab --- /dev/null +++ b/files/ar/glossary/mozilla_firefox/index.html @@ -0,0 +1,26 @@ +--- +title: موزيلا فايرفوكس +slug: Glossary/Mozilla_Firefox +tags: + - فايرفوكس + - مسرد + - موزيلا +translation_of: Glossary/Mozilla_Firefox +--- +<p dir="rtl">موزيلا فايرفوكس هو <span style="line-height: 1.5;">{{Glossary("browser","متصفح")}}</span> حر ومفتوح المصدر، يطوَّر بإشراف مؤسسة موزيلا. يعمل فايرفوكس على أنظمة ويندوز، ماك، لينُكس، وأندوريد.</p> + +<p dir="rtl">أُصدِر فايرفوكس لأوَّل مرَّة في شهر تشرين الثاني عام 2004، فايرفوكس قابل للتخصيص كليّاً بواسطة السِمات (themes)، المُلحقات (plug-ins)، والإضافات (add-تons). يستخدم فايرفوكس مُحرِّك <span style="line-height: 1.5;">{{glossary("Gecko","جيكو")}} لعرض صفحات الويب</span>، ولتطبيق معايير الويب الحاليّة والقادمة.</p> + +<h2 dir="rtl" id="المزيد_من_التفاصيل">المزيد من التفاصيل</h2> + +<h3 dir="rtl" id="معلومات_عامة">معلومات عامة</h3> + +<ul dir="rtl"> + <li><a href="https://www.firefox.com/">الموقع الرسمي لمتصفح موزيلا فايرفوكس</a></li> +</ul> + +<h3 dir="rtl" id="مراجع_تقنيّة">مراجع تقنيّة</h3> + +<ul dir="rtl"> + <li><a href="/ar/Firefox">توثيقات المُتصفح للمطورين على شبكة مطوري موزيلا</a></li> +</ul> diff --git a/files/ar/glossary/oop/index.html b/files/ar/glossary/oop/index.html new file mode 100644 index 0000000000..96cbc24aa9 --- /dev/null +++ b/files/ar/glossary/oop/index.html @@ -0,0 +1,21 @@ +--- +title: OOP +slug: Glossary/OOP +tags: + - شيفرة برمجية + - قاموس المصطلحات + - مبتدئ +translation_of: Glossary/OOP +--- +<p><strong>OOP </strong>(البرمجة الكائنية التوجه) هو نهج في البرمجة حيث يتم تغليف البيانات داخل <strong>{{glossary("كائن","كائنات")}}</strong> ويتم تشغيل الكائن نفسه بدلاً من الأجزاء المكونة له.</p> + +<p>{{glossary("جافا سكريبت")}} كائنية التوجه بشكل كبير. تعتمد على النماذج الأولية' (<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Class-based_vs._prototype-based_languages">بدلا من الأصناف</a>).</p> + +<h2 id="تعلم_المزيد">تعلم المزيد</h2> + +<h3 id="معرفة_عامة">معرفة عامة</h3> + +<ul> + <li>{{Interwiki("wikipedia", "البرمجة الكائنية التوجه")}} على ويكيبيديا</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">مقدمة إلى جافا سكريبت كائنية التوجه</a></li> +</ul> diff --git a/files/ar/glossary/parameter/index.html b/files/ar/glossary/parameter/index.html new file mode 100644 index 0000000000..97eda429cf --- /dev/null +++ b/files/ar/glossary/parameter/index.html @@ -0,0 +1,42 @@ +--- +title: وسيط +slug: Glossary/Parameter +tags: + - جافاسكربت + - مسرد +translation_of: Glossary/Parameter +--- +<p dir="rtl"><strong>الوسيط</strong> (بالإنجليزيَّة: Parameter) هو مُتغيِّر مُسمَّى يُمرَّر للدالة {{Glossary("function", "للدالة")}}. تُستخدم الوسيطات (أو الوسطاء) لإرسال المُعطيات إلى الدوال.</p> + +<p dir="rtl">الفرق بين الوسيطات و{{Glossary("argument","المعطيات")}}:</p> + +<ul dir="rtl"> + <li>وسيطات الدالة هي أسماء تُدرَج عند تعريفها.</li> + <li>مُعطيات الدالة هي القيمة الفعليَّة المُمرَّرة إلى الدالة.</li> + <li>تُسنَد للوسيطات قيم المُعطيات المُمرَّرة.</li> +</ul> + +<p dir="rtl">يوجد نوعين من الوسيطات:</p> + +<dl> + <dt dir="rtl">وسيطات الإدخال</dt> + <dd dir="rtl">وهي أكثر الأنواع شيوعًا. تُمرِّر هذه الوسيطات القيم إلى الدوال. اعتمادًا على لغة البرمجة المُستخدمة، تتعدّد طُرُق تمرير وسيطات الإدخال (كالاستدعاء عبر القيمة أو العنوان أو المرجع).</dd> + <dt dir="rtl">معاملات الإخراج أو الإعادة</dt> + <dd dir="rtl">مهمتها الأساسيّة إعادة عدّة قيم من الدالة، إلّا أنَّه لا يُحبَّذ فعل ذلك لِما يُسبِّب من مشكلات.</dd> +</dl> + +<h2 dir="rtl" id="المزيد_من_التفاصيل">المزيد من التفاصيل</h2> + +<h3 dir="rtl" id="معلومات_عامة">معلومات عامة</h3> + +<ul dir="rtl"> + <li><a href="http://en.wikipedia.org/wiki/Parameter_%28computer_programming%29#Parameters_and_arguments">الفرق بين الوسيط والمُعطى</a> في الموسوعة الحرَّة</li> +</ul> + +<h3 dir="rtl" id="مراجع_تقنيّة">مراجع تقنيّة</h3> + +<ul dir="rtl"> + <li><a href="http://pages.cs.wisc.edu/~hasti/cs368/CppTutorial/NOTES/PARAMS.html">أوضاع تمرير الوسيطات</a></li> + <li><a href="http://www.ryerson.ca/JavaScript/lectures/functions/passByValueOrReference.html">وسيطات الدوال في الجافاسكربت</a></li> + <li><a href="http://javascript.about.com/library/bltut08.htm">تمرير الوسيطات في الجافاسكربت</a></li> +</ul> diff --git a/files/ar/glossary/php/index.html b/files/ar/glossary/php/index.html new file mode 100644 index 0000000000..158a3223ae --- /dev/null +++ b/files/ar/glossary/php/index.html @@ -0,0 +1,49 @@ +--- +title: PHP +slug: Glossary/PHP +tags: + - PHP + - المعجم +translation_of: Glossary/PHP +--- +<p class="simple-translate-result" dir="rtl" style="color: rgb(0, 0, 0);">تعد لغة PHP بدائية متكررة (PHP: Hypertext Preprocessor) لغة برمجة نصية من جانب الخادم مفتوحة المصدر (open-source server-side scripting language) يمكن تضمينها في HTML لإنشاء تطبيقات الويب والمواقع الديناميكية.</p> + +<h2 dir="rtl" id="أمثلة">أمثلة</h2> + +<h3 dir="rtl" id="بناء_الجملة_الأساسية">بناء الجملة الأساسية</h3> + +<pre class="brush: php"> // start of PHP code +<?php + // PHP code goes here + ?> +// end of PHP code</pre> + +<h3 dir="rtl" id="طباعة_البيانات_على_الشاشة">طباعة البيانات على الشاشة</h3> + +<pre class="brush: php"><?php + echo "Hello World!"; +?></pre> + +<h3 dir="rtl" id="متغيرات_PHP">متغيرات PHP</h3> + +<pre class="brush: php"><?php + // variables + $nome='Danilo'; + $sobrenome='Santos'; + $pais='Brasil'; + $email='danilocarsan@gmailcom'; + + // printing the variables + echo $nome; + echo $sobrenome; + echo $pais; + echo $email; +?></pre> + +<h2 dir="rtl" id="أعرف_أكثر">أعرف أكثر</h2> + +<ul> + <li><a href="http://php.net/">الموقع الرسمي</a></li> + <li>{{Interwiki("wikipedia", "PHP")}} على ويكيبيديا</li> + <li><a href="https://en.wikibooks.org/wiki/PHP_Programming">PHP</a> on Wikibooks</li> +</ul> diff --git a/files/ar/glossary/recursion/index.html b/files/ar/glossary/recursion/index.html new file mode 100644 index 0000000000..6c6e98a0ac --- /dev/null +++ b/files/ar/glossary/recursion/index.html @@ -0,0 +1,17 @@ +--- +title: معاودة +slug: Glossary/Recursion +tags: + - مسرد +translation_of: Glossary/Recursion +--- +<p dir="rtl"><strong>المعاودة</strong> (أو الاستدعاء الذاتي) هي إجراء استدعاء الدالة لنفسها. تُستخدم المعاودة لحل مشاكل تحتوي مشاكل فرعيّة أصغر. يمكن أن تستقبل الدالة العوديّة نوعين من المدخلات: المدخلات الأساسيّة (عندما ينتهي التكرار - المعاودة -) ومدخلات عوديّة (عندما يكون التكرار سارياً).</p> + +<h2 dir="rtl" id="المزيد_من_التفاصيل">المزيد من التفاصيل</h2> + +<h3 dir="rtl" id="معلومات_عامة">معلومات عامة</h3> + +<ul dir="rtl"> + <li>مقالة عن <a href="https://ar.wikipedia.org/wiki/%D8%A7%D8%B3%D8%AA%D8%AF%D8%B9%D8%A7%D8%A1_%D8%B0%D8%A7%D8%AA%D9%8A_(%D8%B9%D9%84%D9%85_%D8%A7%D9%84%D8%AD%D8%A7%D8%B3%D9%88%D8%A8)">الاستدعاء الذاتي</a> في الموسوعة الحرَّة</li> + <li><a href="/ar/docs/Web/JavaScript/Guide/Functions#Recursion">المزيد من التفاصيل عن المعاودة في لغة الجافاسكربت</a></li> +</ul> diff --git a/files/ar/glossary/rendering_engine/index.html b/files/ar/glossary/rendering_engine/index.html new file mode 100644 index 0000000000..de82aa4114 --- /dev/null +++ b/files/ar/glossary/rendering_engine/index.html @@ -0,0 +1,23 @@ +--- +title: محرك العرض +slug: Glossary/Rendering_engine +tags: + - مسرد +translation_of: Glossary/Rendering_engine +--- +<p dir="rtl"><strong>مُحرِّك العرض</strong> هو البرمجيّة التي ترسم النصوص والصور على الشاشة. يرسم المُحرِّك النص المُنظَم من مستند (مثل مستند {{glossary("HTML", "لغة ترميز النص الفائق")}}) ويقوم بتنسيقه بناءً على التصميم المُعرَّف من قبل المطوَّر (باستخدام تقنيّة مثل {{glossary("CSS", "صفحات الأنماط الانسيابية")}}). أمثلة على محركات العرض: {{glossary("Blink", "بلينك")}}، و{{glossary("Gecko", "جيكو")}}، وإيدج (edge)، و{{glossary("WebKit", "ويب كيت")}}.</p> + +<h2 dir="rtl" id="المزيد_من_التفاصيل">المزيد من التفاصيل</h2> + +<h3 dir="rtl" id="معلومات_عامة">معلومات عامة</h3> + +<ul dir="rtl"> + <li>مقالة عن <a href="https://ar.wikipedia.org/wiki/%D9%85%D8%AD%D8%B1%D9%83_%D8%AA%D8%B5%D9%85%D9%8A%D9%85">محرك التصميم</a> في الموسوعة الحرَّة</li> +</ul> + +<h3 dir="rtl" id="مراجع_تقنيّة">مراجع تقنيّة</h3> + +<ul dir="rtl"> + <li><a href="/ar/docs/Mozilla/Gecko">توثيق مُحرِّك القوالب جيكو</a></li> + <li><a href="https://medium.com/@ramsunvtech/behind-browser-basics-part-1-b733e9f3c0e6">مقالة ما وراء الستار في المُتصفحات (الجزء الأوّل، الأساسيات)</a></li> +</ul> diff --git a/files/ar/glossary/search_engine/index.html b/files/ar/glossary/search_engine/index.html new file mode 100644 index 0000000000..a914aefd11 --- /dev/null +++ b/files/ar/glossary/search_engine/index.html @@ -0,0 +1,29 @@ +--- +title: باحوث +slug: Glossary/Search_engine +tags: + - باحوث + - مسرد +translation_of: Glossary/Search_engine +--- +<p dir="rtl"><strong>الباحوث</strong> (اسم الآلة من الفعل بحثَ على زِنة فاعول، أو مُحرِّك البحث) هو منظومة برمجيّة تجمع البيانات من {{Glossary("World Wide Web", "الشبكة العنكبوتيَّة")}} وتعرضها للمستخدمين الباحثين عن معلومات معينة.</p> + +<p dir="rtl">يُجري الباحوث العمليات التالية لتأدية عمله:</p> + +<ul dir="rtl"> + <li><strong>تمشيط الشبكة</strong> (crawling): البحث في المواقع عبر تصفُّح {{Glossary("Hyperlinks", "الروابط")}} في داخل الصفحات العنكبوتيَّة وبينها. بإمكان مالك الموقع مَنع المُمشِّطات العنكبوتيَّة (أو العناكِب) من دخول بعض المناطِق في موقعه، وذلك عبر التعليمة "robot exclusion" في الملف <code>robots.txt</code>.</li> + <li><strong>الفهرسة</strong>: ربط كلمات مفتاحيَّو ومعلومات أخرى بالصفحات التي مُشِّطَت. هذا يُمكِّن المُستخدمين من إيجاد صفحات مُتعلقة بأقصى سرعة ممكنة.</li> + <li><strong>البحث</strong>: إيجاد الصفحات المتعلقة اعتمادًا على الاستعلامات المؤلفة من الكلمات المفتاحيّة وغيرها من الأوامر المُدخلة إلى الباحوث. يعثر<span id="result_box" lang="ar"><span> الباحوث عن روابط الصفحات المطابقة للاستعلام، ويرتبها حسب مدى ملاءمتها،</span> <span>ومن ثم يعرض النتائج للمستخدم مُرتَّبةً.</span></span></li> +</ul> + +<p dir="rtl">يعد جوجل أكثر البواحيث شعبيّةً. توجد كذلك بواحيث أخرى مشهورة، كياهو وبينج.</p> + +<h2 id="المزيد_من_التفاصيل">المزيد من التفاصيل</h2> + +<h3 id="معلومات_عامة">معلومات عامة</h3> + +<ul dir="rtl"> + <li>مقالة عن <a href="https://en.wikipedia.org/wiki/Web_search_engine">الباحوث</a> في الموسوعة الحرَّة</li> + <li>مقالة عن <a href="http://www.webopedia.com/TERM/S/search_engine.html">الباحوث</a> في ويبوبيديا</li> + <li>مقالة "<a href="https://computer.howstuffworks.com/internet/basics/search-engine.htm">كيف تعمل البواحيث</a>" في موقع HowStuffWorks</li> +</ul> diff --git a/files/ar/glossary/semantics/index.html b/files/ar/glossary/semantics/index.html new file mode 100644 index 0000000000..699c9192c9 --- /dev/null +++ b/files/ar/glossary/semantics/index.html @@ -0,0 +1,75 @@ +--- +title: دلالات semantics +slug: Glossary/Semantics +tags: + - لغة ترميز النص الفائق + - مسرد +translation_of: Glossary/Semantics +--- +<p dir="rtl">في البرمجة فأن كلمة semantics تشير الى معنى قطعه من الكود code. اليوم نتحدث عن معنى العناصر وليس مظهرها. هذا الموضوع الشيق يأخذنا الى ابعد من ذلك من خلال تركيز على معنى كتابة الكود code. وطرح تسائل مهم هو "ماهو تأثير هذا السطر عندما نقوم بتنفيذ الايعاز؟" وربما يأخذنا الى ابعد من ذلك بقليل "ماهو الغرض او الدور الذي يلعبة هذا العنصر في الـ html ؟".</p> + +<p dir="rtl">دعنا نأخذ العنصر {{htmlelement("h1")}} كمثال تطبيقي، فهو عنصر دلالي semantics يقوم بإعطاء النص الذي يحيطه القدرة على أن يؤدي دور (أو وظيفة) "مستوى العنونة الأوّل في صفحتك" (أي أوَّل عنوان رئيسي في الصفحة).</p> + +<pre class="brush: html notranslate"><h1>هذا مستوى العنونة الأوّل</h1></pre> + +<p dir="rtl">يُنسَّق العنصر السابق، إفتراضياً، بحجم خط كبير لجعله عنواناً (بالرغم من أنَّه يمكنك إعادة تصميمه وتنسيقه لتغيير شكله جذرياً)، ولكن الأكثر أهميّة من شكله هو القيمة الدلاليّة (semantic) التي يحملها هذا العنصر ويمكن استخدامها في طرق متعددة، كاستخدامها من قبل محركات البحث عبر اعتبار هذا الجزء من المحتوى (العنوان) كلمة مفتاحيّة مهمة ستُؤثِر على ترتيب الموقع في نتائج البحث (طالع مصطلح {{Glossary("SEO", "تحسين محركات البحث")}})، أو كاستخدام قيمة العنوان الدلاليّة من قبل قارئِات الشاشة كإشارة (أو ما يسمى بعلامة الإرشاد) لمساعدة المستخدمين المتضررين بصرياً على التنقل بين محتويات الصفحة.</p> + +<p dir="rtl">على الرغم من كل ما سبق، يمكنك جعل أي عنصر <em>يبدو</em> كعنوان ذو درجة عنونة أولى. دعنا نأخذ المثال أدناه على سبيل المثال:</p> + +<pre class="brush: html notranslate"><span style="font-size: 32px; margin: 21px 0;">هل هذا مستوى العنونة الأوّل؟</span></pre> + +<p dir="rtl">سيُعرَض هذا العنصر في المتصفح كعنوان من الدرجة الأولى، ولكنه لن يحمل أي قيمة دلاليّة، وبالتالي لن تستفيد من الفوائد الإضافيّة التي تضفيها هذه القيمة كما شُرِحَ أعلاه. وبالتالي، من الأفضل استخدام عنصر ل.ت.ن.ف الصحيح في المكان الصحيح لإنجاز المهمة المخصص لها.</p> + +<p dir="rtl"></p> + +<h2 dir="rtl" id="الـ_semantics_و_الجافا_سكربت_javaScript">الـ semantics و الجافا سكربت javaScript</h2> + +<p dir="rtl">لنفهم الـ semantics في الجافا سكربت javaScript علينا ان نأخذ مثال يقوم بانشاء عنصر ولنقل مثلا عنصر <a href="/en-US/docs/docs/Web/HTML/Element/li"><li></a>. الدالة function التي تقوم بهذا الامر تقوم بأرجاع هذا العنصر ونحن نقوم فقط بارسال محتوى العنصر textContent. حسناً اذا اسمينا الدالة باسم build وقمنا باستخدامها : </p> + +<pre dir="rtl">build('Peach'); +</pre> + +<p dir="rtl">بالتأكيد لم تسطيع فهم عمل هذه الدالة الى في حالة رؤية الكود الداخلي الخاص بها. او البعض يحل المشكلة باستخدام التعليقات comments . وهذا حل ليس مثاليا. </p> + +<p dir="rtl">الحال المثالي ان تجعل اسم الدالة يدعى على عملها. بهذا حققت غالية الـ semantics ولا تحتاج الى سطر اضافي لتعليقات comments: </p> + +<pre class="notranslate">createLiWithContent('Peach') +</pre> + +<p dir="rtl">برأيك من هو الاحلى والافضل الدالة build او createLiWithContent ؟!!! </p> + +<h2 dir="rtl" id="عناصر_دلاليّة">عناصر دلاليّة</h2> + +<p dir="rtl">يوجد أدناه بعض من عناصر ل.ت.ن.ف الدلاليّة (مأخوذة <a href="http://www.w3schools.com/html/html5_semantic_elements.asp">من هنا</a>):</p> + +<ul> + <li>{{htmlelement("article")}}</li> + <li>{{htmlelement("aside")}}</li> + <li>{{htmlelement("details")}}</li> + <li>{{htmlelement("figcaption")}}</li> + <li>{{htmlelement("figure")}}</li> + <li>{{htmlelement("footer")}}</li> + <li>{{htmlelement("header")}}</li> + <li>{{htmlelement("main")}}</li> + <li>{{htmlelement("mark")}}</li> + <li>{{htmlelement("nav")}}</li> + <li>{{htmlelement("section")}}</li> + <li>{{htmlelement("summary")}}</li> + <li>{{htmlelement("time")}}</li> +</ul> + +<h2 dir="rtl" id="المزيد_من_التفاصيل">المزيد من التفاصيل</h2> + +<h3 dir="rtl" id="معلومات_عامة">معلومات عامة</h3> + +<ul dir="rtl"> + <li>مقالة عن <a href="https://ar.wikipedia.org/wiki/%D8%B9%D9%84%D9%85_%D8%A7%D9%84%D9%85%D8%B9%D8%A7%D9%86%D9%8A_(%D9%84%D8%B3%D8%A7%D9%86%D9%8A%D8%A7%D8%AA)#%D9%81%D9%8A_%D8%A7%D9%84%D8%A8%D8%B1%D9%85%D8%AC%D8%A9">علم المعاني</a> في الموسوعة الحرَّة</li> +</ul> + +<h3 dir="rtl" id="مراجع_تقنيّة">مراجع تقنيّة</h3> + +<ul dir="rtl"> + <li><a href="/ar/docs/Web/HTML/Element#Inline_text_semantics">مرجع عناصر ل.ت.ن.ف</a> في شبكة مطوري موزيلا</li> + <li>مقالة "<a href="/ar/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#Problems_solved_by_HTML5">استخدام الحدود والأقسام في ل.ت.ن.ف</a>" في شبكة مطوري موزيلا</li> + <li>مقالة "<a href="http://www.w3schools.com/html/html5_semantic_elements.asp">عناصر ل.ت.ن.ف الدلاليّة</a>" من موقع w3schools</li> +</ul> diff --git a/files/ar/glossary/server/index.html b/files/ar/glossary/server/index.html new file mode 100644 index 0000000000..9e99905209 --- /dev/null +++ b/files/ar/glossary/server/index.html @@ -0,0 +1,30 @@ +--- +title: خادم +slug: Glossary/Server +tags: + - خادم + - خادوم + - شبكات + - مسرد +translation_of: Glossary/Server +--- +<p dir="rtl"><strong>الخادِم</strong> (ويُقال عن الجهاز <strong>خادوم</strong>) هو برمجيّة تُقدِّم خدمة للمستخدم، أو ما يُسمى بالزبون. الخادوم هو حاسوب مُشترَك على الشبكة، يُشغَّل ويُستضاف غالبًا في مراكز البيانات. الخادم هو برنامج يُقدِم الخدمات لبرامج الزئائِن أو {{glossary("UI","واجهة مُستخدم")}} للزبائِن من البشر.</p> + +<p dir="rtl">تُقدَم هذه الخدمات عامةً عبر الشبكات المحليّة أو الشبكات واسعة النطاق مثل الشابكة العالميَّة. يتواصل برنامج الزبون والخادم عبر إرسال رسائل مُرمَّزِة بواسطة {{glossary("protocol", "ميثاق")}} من خلال {{glossary("API", "واجهة برمجيّة")}}.</p> + +<p dir="rtl">أمثلة على الخوادم والخواديم:</p> + +<ul dir="rtl"> + <li>تُرسِل الخوادم العنكبوتيَّة ملفات {{glossary("HTML", "لغة توصيف النص الفائق")}} إلى {{glossary("browser", "مُتصفِحَك")}} حتّى تتمكن من قراءتها.</li> + <li>خوادم الشبكة المحليّة للملفات والبريد والطباعة والناسوخ.</li> + <li>الحواسيب الصغيرة والكبيرة والفائقة في مراكز البيانات.</li> +</ul> + +<h2 dir="rtl" id="المزيد_من_التفاصيل">المزيد من التفاصيل</h2> + +<h3 dir="rtl" id="معلومات_عامة">معلومات عامة</h3> + +<ul dir="rtl"> + <li><a href="/ar/Learn/What_is_a_web_server">مقدمة عن الخوادم</a></li> + <li>مقالة عن <a href="https://ar.wikipedia.org/wiki/%D8%AE%D8%A7%D8%AF%D9%85_(%D8%AD%D9%88%D8%B3%D8%A8%D8%A9)">الخادم</a> في الموسوعة الحرَّة</li> +</ul> diff --git a/files/ar/glossary/string/index.html b/files/ar/glossary/string/index.html new file mode 100644 index 0000000000..e14d0150fe --- /dev/null +++ b/files/ar/glossary/string/index.html @@ -0,0 +1,20 @@ +--- +title: سلسلة نصيّة +slug: Glossary/String +tags: + - مبتدئين + - مسرد +translation_of: Glossary/String +--- +<p dir="rtl" id="Summary">في أيّة لغة برمجة، <strong>السلسلة النصيّة</strong> (string) هي عبارة عن مجموعة من {{Glossary("character","المحارف")}} تُستخَدم لتمثيل نص ما.</p> + +<p dir="rtl">في لغة الجافاسكربت، السلسلة النصيّة هي إحدى {{Glossary("Primitive", "القيم البدائيّة")}} والكائن {{jsxref("String")}} هو {{Glossary("wrapper", "غلاف")}} لهذا النوع البدائي.</p> + +<h2 dir="rtl" id="المزيد_من_التفاصيل">المزيد من التفاصيل</h2> + +<h3 dir="rtl" id="معلومات_عامة">معلومات عامة</h3> + +<ul dir="rtl"> + <li>مقالة عن <a href="https://ar.wikipedia.org/wiki/%D8%B3%D9%84%D8%B3%D9%84%D8%A9_(%D8%B9%D9%84%D9%85_%D8%A7%D9%84%D8%AD%D8%A7%D8%B3%D9%88%D8%A8)">السلسلة</a> في الموسوعة الحرَّة</li> + <li><a href="/ar/docs/Web/JavaScript/Data_structures#String_type">أنواع وهياكل البيانات في لغة الجافاسكربت</a></li> +</ul> diff --git a/files/ar/glossary/tag/index.html b/files/ar/glossary/tag/index.html new file mode 100644 index 0000000000..65f3e0fc21 --- /dev/null +++ b/files/ar/glossary/tag/index.html @@ -0,0 +1,24 @@ +--- +title: وسم +slug: Glossary/Tag +tags: + - لغة ترميز النص الفائق + - مسرد +translation_of: Glossary/Tag +--- +<p dir="rtl">في سياق {{Glossary("HTML", "لغة ترميز النص الفائق")}}، يُستخدَم الوسم لإنشاء {{Glossary("element", "العنصر")}}. اسم العنصر هو الاسم الذي يُستخدم بين قوسين معقوفين، كمثال، الوسم `<p>` الذي يُستخدم لإنشاء الفقرات. لاحظ أنَّ الاسم في وسم الإغلاق مسبوق بمائلة (`<p/>`). لا يجب وضع وسم إغلاق في الوسوم المفردة (ذاتية الإغلاق - التي تتكون من وسم واحد). إذا كانت {{Glossary("Attribute", "خاصيات")}} الوسم غير مذكورة عند تعريفه، ستستخدم القيمة الإفتراضية لكل خاصية.</p> + +<h2 dir="rtl" id="المزيد_من_التفاصيل"><strong>المزيد من التفاصيل</strong></h2> + +<h3 dir="rtl" id="معلومات_عامة">معلومات عامة</h3> + +<ul dir="rtl"> + <li>مقالة عن <a href="https://ar.wikipedia.org/wiki/%D9%88%D8%B3%D9%85_(%D9%84%D8%BA%D8%A9_%D8%AA%D8%B1%D9%85%D9%8A%D8%B2_%D8%A7%D9%84%D9%86%D8%B5_%D8%A7%D9%84%D9%81%D8%A7%D8%A6%D9%82)">العنصر</a> في الموسوعة الحرَّة</li> + <li><a href="http://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/Tags.html">وسوم لغة ترميز النص الفائق في رابطة الويب العالمية</a></li> +</ul> + +<h3 dir="rtl" id="مراجع_تقنيّة">مراجع تقنيّة</h3> + +<ul dir="rtl"> + <li><a href="/ar/docs/Learn/HTML/Introduction_to_HTML">مقدمة إلى لغة ترميز النص الفائق</a></li> +</ul> diff --git a/files/ar/glossary/variable/index.html b/files/ar/glossary/variable/index.html new file mode 100644 index 0000000000..bece718d50 --- /dev/null +++ b/files/ar/glossary/variable/index.html @@ -0,0 +1,24 @@ +--- +title: متغيّر +slug: Glossary/Variable +tags: + - جافاسكربت + - مسرد +translation_of: Glossary/Variable +--- +<p dir="rtl">المتغيّر هو مكان في الذاكرة لتخزين {{Glossary("Value", "القيم")}} (البيانات). باستخدام هذه التقنيّة يُمكِن الوصول لقيمة مُتقلِّبة (متغيّرة) من خلال اسم مذكور سلفاً.</p> + +<h2 dir="rtl" id="المزيد_من_التفاصيل">المزيد من التفاصيل</h2> + +<h3 dir="rtl" id="معلومات_عامة">معلومات عامة</h3> + +<ul dir="rtl"> + <li>مقالة عن <a href="https://ar.wikipedia.org/wiki/متغير_(علم_الحاسوب)">المتغيّر</a> في الموسوعة الحرَّة</li> +</ul> + +<h3 dir="rtl" id="مراجع_تقنيّة">مراجع تقنيّة</h3> + +<ul dir="rtl"> + <li><a href="/ar/docs/Web/JavaScript/Guide/Grammar_and_types#Declarations">تعريف المتغيّرات في الجافاسكربت</a></li> + <li><a href="/ar/docs/Web/JavaScript/Reference/Statements/var">العبارة var في الجافاسكربت</a></li> +</ul> diff --git a/files/ar/glossary/wai/index.html b/files/ar/glossary/wai/index.html new file mode 100644 index 0000000000..5d0e1bf329 --- /dev/null +++ b/files/ar/glossary/wai/index.html @@ -0,0 +1,18 @@ +--- +title: مبادرة الإتاحة الويبية +slug: Glossary/WAI +tags: + - إتاحة + - مسرد +translation_of: Glossary/WAI +--- +<p dir="rtl">مبادرة الإتاحة الويبيّة (أو WAI كاختصار) هي مبادرة تقودها رابطة الويب العالمية لتحسين الإتاحة (accessibility) للأشخاص ذوي الحالات الخاصة المتنوعة، والذين قد يحتاجون إلى {{Glossary("browser", "متصفحات")}} أو أجهزة مخصصة (غير قياسية).</p> + +<h2 dir="rtl" id="المزيد_من_التفاصيل">المزيد من التفاصيل</h2> + +<h3 dir="rtl" id="معلومات_عامة">معلومات عامة</h3> + +<ul dir="rtl"> + <li><a href="http://www.w3.org/WAI/">موقع المبادرة</a></li> + <li>مقالة عن <a href="https://en.wikipedia.org/wiki/Web_Accessibility_Initiative">المبادرة</a> في الموسوعة الحرَّة (باللغة الإنجليزية. يرجى النظر بالمساهمة بترجمتها).</li> +</ul> diff --git a/files/ar/glossary/wrapper/index.html b/files/ar/glossary/wrapper/index.html new file mode 100644 index 0000000000..ebfecad2ff --- /dev/null +++ b/files/ar/glossary/wrapper/index.html @@ -0,0 +1,17 @@ +--- +title: غلاف +slug: Glossary/Wrapper +tags: + - غلاف + - مسرد +translation_of: Glossary/Wrapper +--- +<p dir="rtl">في لغات البرمجة المشابهة للجافاسكربت، الغلاف (wrapper) هو دالة تهدف إلى استدعاء دالة أو أكثر أخرى، أحياناً لتسهيل عملها (أي راحة أكثر بالتعامل)، وأحياناً لتعديلها لكي تجري مهمة مختلفة قليلاً أثناء عملها.</p> + +<p dir="rtl">بمعنى آخر، يُستخدَم الغلاف لاستدعاء دالة من أجل تعديل شيء فيها، سواءً كان هذا الشيء متعلقاً بسهولة استخدامها، أو بوظيفتها.</p> + +<h2 dir="rtl" id="المزيد_من_التفاصيل">المزيد من التفاصيل</h2> + +<h3 dir="rtl" id="معلومات_عامة">معلومات عامة</h3> + +<p dir="rtl">مقالة عن <a href="https://en.wikipedia.org/wiki/Wrapper_function">الدوال المُغلِّفة</a> في الموسوعة الحرَّة (باللغة الإنجليزيّة، يرجى النظر بالمساهمة)</p> diff --git a/files/ar/glossary/الحروف/index.html b/files/ar/glossary/الحروف/index.html new file mode 100644 index 0000000000..47443563a1 --- /dev/null +++ b/files/ar/glossary/الحروف/index.html @@ -0,0 +1,20 @@ +--- +title: الحروف +slug: Glossary/الحروف +translation_of: Glossary/Character +--- +<p dir="rtl">الحرف هي إما "رمز" (حروف ، أرقام ، علامات ترقيم) أو "تحكم" غير طباعي (على سبيل المثال ، رمز الإرجاع أوخطّ وصل).</p> + +<p dir="rtl">{{glossary ("UTF-8")}} هي مجموعة الأحرف الأكثر شيوعًا وتتضمن حروفًا لغوية من أشهر اللغات البشرية.</p> + +<h2 dir="rtl" id="لمعرفة_المزيد">لمعرفة المزيد</h2> + +<h3 dir="rtl" id="معلومات_عامة">معلومات عامة</h3> + +<ul> + <li dir="rtl">{{interwiki("wikipedia", "Character (computing)")}} على Wikipedia</li> + <li dir="rtl">{{interwiki("wikipedia", "Character encoding")}} على Wikipedia</li> + <li dir="rtl">{{interwiki("wikipedia", "ASCII")}} على Wikipedia</li> + <li dir="rtl">{{interwiki("wikipedia", "UTF-8")}} على Wikipedia</li> + <li dir="rtl">{{interwiki("wikipedia", "Unicode")}} على Wikipedia</li> +</ul> diff --git a/files/ar/glossary/الخاصية/index.html b/files/ar/glossary/الخاصية/index.html new file mode 100644 index 0000000000..3d197d0c39 --- /dev/null +++ b/files/ar/glossary/الخاصية/index.html @@ -0,0 +1,20 @@ +--- +title: الخاصية +slug: Glossary/الخاصية +translation_of: Glossary/property +--- +<p dir="rtl"><span class="tlid-translation translation"><span title="">يمكن أن يكون لمصطلح ال</span></span>خاصية<span class="tlid-translation translation"><span title=""> عدة معاني حسب السياق.</span> <span title="">قد يشير إلى:</span></span></p> + +<ul dir="rtl"> + <li><strong><span class="tlid-translation translation"><span title="">خاصية (CSS)</span></span></strong></li> +</ul> + +<p dir="rtl"><span class="tlid-translation translation"> <strong> ال</strong><span title=""><strong>خاصية CSS</strong> هي خاصية مميزة (مثل اللون) تحدد القيمة المرتبطة بها جانبًا واحدًا من كيفية عرض المتصفح للعنصر.</span></span></p> + +<ul dir="rtl"> + <li><strong><span title="">خاصية (JavaScript)</span></strong></li> +</ul> + +<p dir="rtl"><span class="tlid-translation translation"> <span title="">تعد<strong> خاصية JavaScript</strong> إحدى خصائص الكائن ، وغالبًا ما تصف السمات المرتبطة ببنية البيانات.</span></span></p> + +<p>{{GlossaryDisambiguation}}</p> diff --git a/files/ar/glossary/الدوال_من_الدرجة_الأولى/index.html b/files/ar/glossary/الدوال_من_الدرجة_الأولى/index.html new file mode 100644 index 0000000000..405e49ea6b --- /dev/null +++ b/files/ar/glossary/الدوال_من_الدرجة_الأولى/index.html @@ -0,0 +1,14 @@ +--- +title: الدوال من الدرجة الأولى +slug: Glossary/الدوال_من_الدرجة_الأولى +translation_of: Glossary/First-class_Function +--- +<p dir="rtl">يقال عن لغة البرمجة أنها تملك <strong>دوال من الدرجة الأولى</strong> عندما تعامل هذه الدوال في تلك اللغة كأي متغير أخر. على سبيل المثال، في تلك اللغات، يمكن أن تمرر الدالة كمعامل لدالة أخرى، ويمكن أن يتم إرجاعها من قبل دالة أخرى، ويمكن تعيينها كقيمة لمتغير.</p> + +<h2 dir="rtl" id="تعلم_المزيد">تعلم المزيد</h2> + +<h3 dir="rtl" id="معلومات_عامة">معلومات عامة</h3> + +<ul dir="rtl"> + <li>مقالة <a href="https://en.wikipedia.org/wiki/First-class_function">الدوال من الدرجة الأولى</a> في ويكيبيديا.</li> +</ul> diff --git a/files/ar/glossary/الكائنات/index.html b/files/ar/glossary/الكائنات/index.html new file mode 100644 index 0000000000..01f15f9478 --- /dev/null +++ b/files/ar/glossary/الكائنات/index.html @@ -0,0 +1,24 @@ +--- +title: كائن +slug: Glossary/الكائنات +tags: + - كائن + - مسرد +translation_of: Glossary/Object +--- +<p><strong>الكائِن</strong> (بالإنجليزيَّة: Object) يشير إلى هيكل بيانات يحوي بيانات وتعليمات للتعامل مع البيانات. تُشير الكائِنات أحيانًا إلى أشياء حقيقيَّة، كالكائِن <code>car</code> أو <code>map</code> المُعرَّف في لعبة سباق. تُعد لغة {{glossary("JavaScript", "الجافاسكربت")}} والجافا والسي++ وبايثون وروبي من الأمثلة على لغات {{glossary("OOP","البرمجة الكائنيَّة")}}.</p> + +<h2 id="المزيد_من_التفاصيل">المزيد من التفاصيل</h2> + +<h3 id="معلومات_عامة">معلومات عامة</h3> + +<ul> + <li dir="rtl">مقالة عن البرمجة الكائنيَّة في الموسوعة الحرَّة</li> +</ul> + +<h3 id="مراجع_تقنيَّة">مراجع تقنيَّة</h3> + +<ul> + <li>البانية {{jsxref("Object")}} في <a href="/en-US/docs/Web/JavaScript/Reference">مرجع لغة الجافاسكربت </a></li> + <li><a href="/en-US/docs/Web/JavaScript/Data_structures#Objects">الكائِن كهيكل بيانات في لغة الجافاسكربت</a></li> +</ul> diff --git a/files/ar/glossary/المجالات/index.html b/files/ar/glossary/المجالات/index.html new file mode 100644 index 0000000000..b2c80924a5 --- /dev/null +++ b/files/ar/glossary/المجالات/index.html @@ -0,0 +1,43 @@ +--- +title: المجالات +slug: Glossary/المجالات +translation_of: Glossary/Scope +--- +<p>تعبر عن سياق التنفيذ الحالي للبرنامج والذي يمكنك فيه الوصول لقيم المتغيرات والتوابع واستعمالها. فإذا تم البحث عن متغير او تابع خارج المجال (أو سياق التنفيذ) الحالي وتبين أنّه غير موجود فلن تستطيع الوصول إليه واستعماله. وتتشكل هذه المجالات بشكل هرمي (أو دائري بشرط لايوجد دائرتين متقاطعتين وكل الدوائر محتواة في بعضها البعض) بحيث ان المجال الداخلي (أو الدائرة الداخلية) الابن يستطيع الوصول لمجال الأب (الدائرة التي تحتويه) ولكن العكس غير ممكن.</p> + +<p><img alt="nested scopes intro in javascript" src="https://mdn.mozillademos.org/files/16465/nestedScopesInJS.png" style="height: 498px; width: 461px;"></p> + +<p>التوابع (<strong>{{glossary("function")}})</strong> في {{glossary("JavaScript")}} تستعمل لإنشاء مجالات جديدة (كل تابع يمثل مجال جديد خاص به) فعلى سبيل المثال,إن تعريف متغير داخل التابع لن يمكنك من استعماله داخل تابع آخر او من اي مجال خارج هذا التابع, وهذا مثال يوضح لك الفكرة:</p> + +<pre class="syntaxbox">function exampleFunction() { + + // هذا المتغير لا يمكن استعماله إلا ضمن التابع الحالي فقط + // او أي تابع محتوى داخله + var x = "متغير داخل التابع"; + console.log("داخل التابع"); + console.log(x); +} + +console.log(x); // لا يمكن الوصول للمتغير من الخارج</pre> + +<p>بينما يستطيع التابع الوصول للمتغيرات المعرفة في مجال يقع خارجه او في المجال العام للبرنامج الخاص بك</p> + +<pre class="syntaxbox">var x = "انا متغير مُعرف خارج التابع"; + +exampleFunction(); + +function exampleFunction() { + console.log("انا داخل التابع"); + console.log(x); // يمكن لمجال داخلي ابن ان يصل لمتغيرات مجال خارجي أب +} + +console.log("انا خارج التابع في المجال العام"); +console.log(x);</pre> + +<h2 id="Learn_more">Learn more</h2> + +<h3 id="General_knowledge">General knowledge</h3> + +<ul> + <li>{{Interwiki("wikipedia", "Scope (computer science)")}} في ويكبيديا</li> +</ul> diff --git a/files/ar/heesfoord007/index.html b/files/ar/heesfoord007/index.html new file mode 100644 index 0000000000..18fb17ee5d --- /dev/null +++ b/files/ar/heesfoord007/index.html @@ -0,0 +1,54 @@ +--- +title: heesfoord007 +slug: heesfoord007 +tags: + - Landing + - NeedsTranslation + - TopicStub + - Web +--- +<pre>The open Web presents incredible opportunities for developers. To take full advantage of these technologies, you need to know how to use them. Below you'll find links to our Web technology documentation.</pre> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">Documentation for Web developers</h2> + +<dl> + <dt><a href="/en-US/docs/Web/Reference">Web Developer Reference</a></dt> + <dd>A list of all references for Web technologies, including those for HTML, CSS, and so on.</dd> + <dt><a href="/en-US/docs/Web/Guide">Web Developer Guide</a></dt> + <dd>The Web Developer Guide provides useful how-to content to help you actually use Web technologies to do what you want or need to do.</dd> + <dt><a href="/en-US/docs/Web/Tutorials">Tutorials for Web developers</a></dt> + <dd>A list of tutorials to take you step-by-step through learning APIs, technologies, or broad topic areas.</dd> + <dt><a href="/en-US/docs/Web/Apps">Developing Web applications</a></dt> + <dd>Documentation for Web application developers; Web apps are true write-once, deploy anywhere apps for mobile, desktop, and Firefox OS.</dd> + <dt><a href="/en-US/docs/Code_snippets">Code snippets</a></dt> + <dd>This is a quick list of useful code snippets (small code samples) available for developers of extensions for the various Mozilla applications. Many of these samples can also be used in <a href="/en-US/docs/XULRunner">XULRunner</a> applications, as well as in actual Mozilla code itself.</dd> +</dl> + +<p><span class="alllinks"><a href="/en-US/docs/tag/Web">View All...</a></span></p> +</div> + +<div class="section"> +<h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">Web technology references</h2> + +<dl> + <dt><a href="/en-US/docs/Web/API">Web APIs</a></dt> + <dd>Reference material for each of the interfaces that comprise the Web's APIs, including the DOM and all of the related APIs and interfaces you can use to build Web content and apps.</dd> + <dt><a href="/en-US/docs/Web/HTML">HTML</a></dt> + <dd>HyperText Markup Language is the language used to describe and define the content of a Web page.</dd> + <dt><a href="/en-US/docs/Web/CSS">CSS</a></dt> + <dd>Cascading Style Sheets are used to describe the appearance of Web content.</dd> + <dt><a href="/en-US/docs/SVG">SVG</a></dt> + <dd>Scalable Vector Graphics let you describe images as sets of vectors and shapes in order to allow them to scale smoothly regardless of the size at which they're drawn.</dd> + <dt><a href="/en-US/docs/Web/MathML">MathML</a></dt> + <dd>The Mathematical Markup Language makes it possible to display complex mathematical equations and syntax.</dd> +</dl> +</div> +</div> + +<h3 id="Temporary" name="Temporary">Temporary</h3> + +<p>The stuff below here is temporary to help keep track of things while organization work is ongoing. Pay it no mind.</p> + +<div>{{ListSubpages}}</div> diff --git a/files/ar/html/element/article/index.html b/files/ar/html/element/article/index.html new file mode 100644 index 0000000000..4ffbdbe80a --- /dev/null +++ b/files/ar/html/element/article/index.html @@ -0,0 +1,153 @@ +--- +title: عنصر المقالة <article> +slug: HTML/Element/article +translation_of: Web/HTML/Element/article +--- +<div>{{HTMLRef}}</div> + +<p dir="rtl">عنصر الـ <article> الموجود في الـ html فهو مفهوم من عنوانه والذي يعني (مقال) ونعرف جميعنا ان المقالات بنية مستقلة بذاتها. وتوجد في الوثائق, الصفحات, التطبيقات او المواقع. ما نتحدث عنه اليوم هو كيف نكتب عناصر الـ html لصفحة تحتوي على مقالات مثل : منشور المنتديات, مقالات الصفحات و المجلات. حتى منشورات المدونات blogs تعتبر مقالة. </p> + +<p dir="rtl">في حالة اردت ان تبرمج صفحة تختص بالمقالات لابد لك ان تقوم باستخدام تاك او عنصر <article>. المثال التالي يوضع استخدام المقالة بابسط صوره لها: </p> + +<div>{{EmbedInteractiveExample("pages/tabbed/article.html", "tabbed-standard")}}</div> + +<div></div> + +<div class="hidden" dir="rtl">مصدر هذا المثال موجود في موقع GitHub ويمكنك المشاركة من خلال نسخ المثال الموجود في الرابط ادناه <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a>بعدها يمكن ان ترسل لنا طلبا.</div> + +<p dir="rtl">يمكن لصفحة الواحدة ان تحتوي على الكثير من المقالات. وهذا المثال دليل على ذلك. ليس هذا فحسب, فيمكن ان يكون عنصر المقالة يحتوي على عناصر مقالة بداخله ( تسمى nested element اي العناصر المتداخلة ).</p> + +<p dir="rtl">اليك معلومات خاطفة عن هذا العنصر:</p> + +<table class="properties" dir="rtl"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">فئة المكون </a></th> + <td> + <p><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Sectioning_content">sectioning content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Palpable_content">palpable content</a></p> + </td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Flow_content">flow content</a>. Note that an <code><article></code> element must not be a descendant of an {{HTMLElement("address")}} element.</td> + </tr> + <tr> + <th scope="row">Implicit ARIA role</th> + <td><code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Article_Role">article</a></code></td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("feed")}}, {{ARIARole("main")}}, {{ARIARole("none")}}, {{ARIARole("presentation")}}, {{ARIARole("region")}}</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="الخصائص">الخصائص</h2> + +<p dir="rtl">هذا العنصر يحتوي على الخصائص العامة فقط.<a href="/ar/docs/docs/HTML/Global_attributes"> يمكنك زيارتها من هنا</a></p> + +<h2 dir="rtl" id="ملاحظات_الاستخدام">ملاحظات الاستخدام</h2> + +<p dir="rtl">انت حر في استخدام هذا العنصر. ولكننا نفضل ان تقوم بمراعات هذه النقاط على الاقل.</p> + +<ul> + <li dir="rtl">كل عنصر <article> يجب ان يتم تعريفه من خلال تضمين عناوين heading باستخدام <a href="/ar/docs/Web/HTML/Element/Heading_Elements">h1-h6 </a>وتكون هذه العناصر بداخل هذا العنصر</li> + <li dir="rtl">عندما تحاول ان تكتب عنصر <article> (اي عندما تحول كتابة nested element) عليك مراعاة ان يكون العنصر الداخلي متصل بالعنصر الخارجي. مثلا تعليقات المنشور يجب ان تكون article . </li> + <li dir="rtl">معلومات مؤلف المنشور اذا امكن ان تكون في عنصر الـ <address> </li> + <li dir="rtl">التواريخ الخاص بالمقالة مثل تاريخ النشر وغيرها يجب ان تكون من اختصاص العنصر <a href="/ar/docs/Web/HTML/Element/time#attr-datetime"><time> ويمكنك الاطلاع على هذا العنصر من هنا</a></li> +</ul> + +<p dir="rtl">المثال التالي يلخص لك هذه النقاط:</p> + +<pre class="brush: html notranslate"><article class="film_review"> + <header> + <h2>Jurassic Park</h2> + </header> + <section class="main_review"> + <p>Dinos were great!</p> + </section> + <section class="user_reviews"> + <article class="user_review"> + <p>Way too scary for me.</p> + <footer> + <p> + Posted on + <time datetime="2015-05-16 19:00">May 16</time> + by Lisa. + </p> + </footer> + </article> + <article class="user_review"> + <p>I agree, dinos are my favorite.</p> + <footer> + <p> + Posted on + <time datetime="2015-05-17 19:00">May 17</time> + by Tom. + </p> + </footer> + </article> + </section> + <footer> + <p> + Posted on + <time datetime="2015-05-15 19:00">May 15</time> + by Staff. + </p> + </footer> +</article> +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-article-element', '<article>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sections.html#the-article-element', '<article>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-article-element', '<article>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.article")}}</p> + +<h2 dir="rtl" id="يمكنك_زيارة_التالي">يمكنك زيارة التالي:</h2> + +<ul> + <li dir="rtl">العناصر المرتبطة بهذا العنصر - او ربما تستخدمها معه: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}</li> + <li><a href="/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">Using HTML sections and outlines</a></li> +</ul> diff --git a/files/ar/html/element/bdo/index.html b/files/ar/html/element/bdo/index.html new file mode 100644 index 0000000000..ee154b30c1 --- /dev/null +++ b/files/ar/html/element/bdo/index.html @@ -0,0 +1,108 @@ +--- +title: '<bdo>: عنصر تجاوز النص ثنائي الاتجاه' +slug: HTML/Element/bdo +translation_of: Web/HTML/Element/bdo +--- +<div>{{HTMLRef}}</div> + +<p dir="rtl"><span class="seoSummary"><strong>HTML </strong>عنصر تجاوز النص ثنائي الاتجاه(<strong><code><bdo></code></strong>) يتجاوز الاتجاه الحالي للنص، بحيث يتم تقديم النص داخل في اتجاه مختلف. يتم رسم أحرف النص من نقطة البداية في الاتجاه المحدد. لا يتأثر اتجاه الحروف الفردية (حتى لا تحصل على أحرف إلى الوراء، على سبيل المثال).</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">يحتوي الفئات</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>, palpable content.</td> + </tr> + <tr> + <th scope="row">المحتوى المسموح به</th> + <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">وسم الإقفال</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">يسمح الآباء</th> + <td>أي عنصر يقبل <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">صياغة المحتوى.</a></td> + </tr> + <tr> + <th scope="row">قواعد ARIA مسموح</th> + <td>الكل</td> + </tr> + <tr> + <th scope="row">DOM واجهة</th> + <td>{{domxref("HTMLElement")}} Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the <code><a href="/en-US/docs/Web/API/HTMLSpanElement">HTMLSpanElement</a></code> interface for this element.</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="السِمات">السِمات</h2> + +<p dir="rtl">تتضمن سمات هذه العناصر <a href="/en-US/docs/HTML/Global_attributes">السمات العامة.</a></p> + +<dl> + <dt dir="rtl">{{htmlattrdef("dir")}}</dt> + <dd dir="rtl">الاتجاه الذي يجب أن يظهر فيه النص في محتويات هذا العنصر.</dd> + <dd dir="rtl">القيم المحتملة هي:</dd> + <dd> + <ul> + <li dir="rtl"><code>ltr</code>: يشير إلى أن النص يجب أن يسير في الاتجاه من اليسار إلى اليمين.</li> + <li dir="rtl"><code>rtl</code>:يشير إلى أن النص يجب أن يكون في الاتجاه من اليمين إلى اليسار.</li> + </ul> + </dd> +</dl> + +<h2 dir="rtl" id="الأمثلة">الأمثلة</h2> + +<pre class="brush: html"><!-- Switch text direction --> +<p>This text will go left to right.</p> +<p><bdo dir="rtl">This text will go right +to left.</bdo></p> +</pre> + +<h3 id="النتيجة">النتيجة</h3> + +<p> </p> + +<p>{{EmbedLiveSample('Examples')}}</p> + +<p> </p> + +<h2 dir="rtl" id="ملاحظات">ملاحظات</h2> + +<p dir="rtl">مواصفات HTML 4 لم تحدد أحداث لهذا العنصر؛ تمت إضافتها في XHTML. وهذا على الأرجح سهو.</p> + +<h2 dir="rtl" id="مميزات">مميزات</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">المميزات</th> + <th scope="col">الحالة</th> + <th scope="col">تعليق</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-bdo-element', '<bdo>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-bdo-element', '<bdo>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'dirlang.html#h-8.2.4', '<bdo>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="التكامل(دعم)_مع_المتصفح">التكامل(دعم) مع المتصفح</h2> + + + +<p>{{Compat("html.elements.bdo")}}</p> diff --git a/files/ar/html/element/headings_elements/index.html b/files/ar/html/element/headings_elements/index.html new file mode 100644 index 0000000000..acd3267d37 --- /dev/null +++ b/files/ar/html/element/headings_elements/index.html @@ -0,0 +1,244 @@ +--- +title: '<h1>–<h6>: عناصر العناوين' +slug: HTML/Element/headings_elements +translation_of: Web/HTML/Element/Heading_Elements +--- +<p dir="rtl"> عناصر <span class="seoSummary"><strong><code><h1></code>–<code><h6></code></strong></span> تقدم لنا سته مستويات من عناوين الأقسام. حيث أن العنصر<span class="seoSummary"><code><h1></code> يمثل العنوان الأعلى مستوى في الأهمية بينما العنصر <code><h2></code> هو الأقل.</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">فئات المحتوى </a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, heading content, palpable content.</td> + </tr> + <tr> + <th scope="row">المحتوى المسموح به</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">إغفال الوسوم</th> + <td>لا شئ، كلاً من وسمّي الفتح والإقفال إجباري</td> + </tr> + <tr> + <th scope="row">الأباء المسموح بهم للعنصر</th> + <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>; don't use an heading element as a child of the {{HTMLElement("hgroup")}} element — it is now deprecated.</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>{{ARIARole("tab")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLHeadingElement")}}</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="السمات">السمات</h2> + +<p dir="rtl">هذه العناصر تتضمن <a href="/en-US/docs/Web/HTML/Global_attributes">السمات العامة</a>.</p> + +<div class="note" dir="rtl"> +<p>السمة <code>align</code> عفاء عنها الزمن، لا تستخدمها</p> +</div> + +<h2 id="ملاحظات_الإستخدام" style="direction: rtl;">ملاحظات الإستخدام</h2> + +<ul> + <li dir="rtl">يمكن إستخدام معلومات العناوين من قبل الـ user agents, على سبيل المثال لإنشاء جدول المحتويات لمستند بشكل تلقائي.</li> + <li dir="rtl">لا تستخدم عناوين بمستويات منخفضة لتقليل حجم خط العناوين: إستخدم خاصية لغة CSS المسؤولة عن التحكم بأحجام الخطوط <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-size">font-size</a> بدلاً من ذلك.</li> + <li dir="rtl"> تجنب تخطي مستويات العناوين: دائماً إبدا من <code><h1></code>، من ثم إستخدم <code><h2></code> وهكذا.</li> + <li dir="rtl">يجب أن تأخذ بعين الإعتبار تجنب إستخدام العنصر <h1> أكثر من مرة في الصفحة. إطلع على <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#Defining_sections">تعريف الأقسام</a> في <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">إستخدام الأقسام و وتسلسل العناوين في الـ HTML</a> لمعلومات أكثر.</li> +</ul> + +<h2 id="أمثلة" style="direction: rtl;">أمثلة</h2> + +<h3 id="جميع_العناوين" style="direction: rtl;">جميع العناوين</h3> + +<p style="direction: rtl;">الكود التالي يظهر كل مستويات العناوين، قيد الإستخدام.</p> + +<pre class="brush: html"><h1>Heading level 1</h1> +<h2>Heading level 2</h2> +<h3>Heading level 3</h3> +<h4>Heading level 4</h4> +<h5>Heading level 5</h5> +<h6>Heading level 6</h6> +</pre> + +<p style="direction: rtl;">هنا نتيجة هذا الكود:</p> + +<p>{{ EmbedLiveSample('All_headings', '280', '300', '') }}</p> + +<h3 id="مثال_لصفحة" style="direction: rtl;">مثال لصفحة</h3> + +<p style="direction: rtl;">الكود التالي يظهر بعض العناوين مع بعض المحتوى بأسفلها.</p> + +<pre class="brush: html"><h1>Heading elements</h1> +<h2>Summary</h2> +<p>Some text here...</p> + +<h2>Examples</h2> +<h3>Example 1</h3> +<p>Some text here...</p> + +<h3>Example 2</h3> +<p>Some text here...</p> + +<h2>See also</h2> +<p>Some text here...</p> +</pre> + +<p style="direction: rtl;">هنا نتيجة هذا الكود:</p> + +<p>{{ EmbedLiveSample('Example_page', '280', '480', '') }}</p> + +<h2 id="سهولة_الوصول" style="direction: rtl;">سهولة الوصول</h2> + +<h3 id="التنقل_بين_الأجزاء_والصفحات" style="direction: rtl;">التنقل بين الأجزاء والصفحات</h3> + +<p style="direction: rtl;">من الأساليب الشائعة للتنقل بين أجزاء الصفحة من قبل مستخدمي قارئات الشاشات هو القفز من عنوان لأخر لتحديد محتوى الصفحة بشكل سريع. </p> + +<p style="direction: rtl;">لهذا السبب، من المهم عدم تخطي أحد مستويات العناوين فالقيام بذلك قد يسبب ارتباك للشخص الذي يقوم بالتنقل بين أجزاء الموقع بهذه الطريقة وربما يترك لدية نوع من الحيرة عن أين هو العنوان المفقود.</p> + +<h4 id="لا_تقم_بالتالي" style="direction: rtl;">لا تقم بالتالي:</h4> + +<pre class="brush: html example-bad"><h1>Heading level 1</h1> +<h3>Heading level 3</h3> +<h4>Heading level 4</h4> +</pre> + +<h4 id="قم_بالتالي" style="direction: rtl;">قم بالتالي:</h4> + +<pre class="brush: html example-good"><h1>Heading level 1</h1> +<h2>Heading level 2</h2> +<h3>Heading level 3</h3> +</pre> + +<h4 id="تسلسل_العناوين_-_Nesting" style="direction: rtl;">تسلسل العناوين - Nesting</h4> + +<p style="direction: rtl;">قد يتم عمل تسلسل لبعض العناوين لتبدو كعناوين أقسام فرعية لعكس تنظيم محتوى الصفحة. أغلب قارئات الشاشات تستطيع أيضا تكوين قائمة مرتبة لكل العناوين التي في الصفحة، ما قد يساعد الشخص لتحديد التسلسل الهرمي للمحتوى بسرعة :</p> + +<ol> + <li><code>h1</code> Beetles + + <ol> + <li><code>h2</code> Etymology</li> + <li><code>h2</code> Distribution and Diversity</li> + <li><code>h2</code> Evolution + <ol> + <li><code>h3</code> Late Paleozoic</li> + <li><code>h3</code> Jurassic</li> + <li><code>h3</code> Cretaceous</li> + <li><code>h3</code> Cenozoic</li> + </ol> + </li> + <li><code>h2</code> External Morphology + <ol> + <li><code>h3</code> Head + <ol> + <li><code>h4</code> Mouthparts</li> + </ol> + </li> + <li><code>h3</code> Thorax + <ol> + <li><code>h4</code> Prothorax</li> + <li><code>h4</code> Pterothorax</li> + </ol> + </li> + <li><code>h3</code> Legs</li> + <li><code>h3</code> Wings</li> + <li><code>h3</code> Abdomen</li> + </ol> + </li> + </ol> + </li> +</ol> + +<p>When headings are nested, heading levels may be "skipped" when closing a subsection.</p> + +<ul> + <li><a href="https://www.w3.org/WAI/tutorials/page-structure/headings/">Headings • Page Structure • WAI Web Accessibility Tutorials</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_—_Create_content_that_can_be_presented_in_different_ways">MDN Understanding WCAG, Guideline 1.3 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_—_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">MDN Understanding WCAG, Guideline 2.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html">Understanding Success Criterion 2.4.1 | W3C Understanding WCAG 2.0</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html">Understanding Success Criterion 2.4.6 | W3C Understanding WCAG 2.0</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-headings.html">Understanding Success Criterion 2.4.10 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h3 id="Labeling_section_content">Labeling section content</h3> + +<p>Another common navigation technique for users of screen reading software is to generate a list of <a href="/en-US/docs/Web/HTML/Element#Content_sectioning">sectioning content</a> and use it to determine the page's layout.</p> + +<p>Sectioning content can be labeled using a combination of the <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></code> and {{htmlattrxref("id")}} attributes, with the label concisely describing the purpose of the section. This technique is useful for situations where there is more than one sectioning element on the same page.</p> + +<h4 id="Example">Example</h4> + +<pre class="brush: html"><header> + <nav aria-labelledby="primary-navigation"> + <h2 id="primary-navigation">Primary navigation</h2> + <!-- navigation items --> + </nav> +</header> + +<!-- page content --> + +<footer> + <nav aria-labelledby="footer-navigation"> + <h2 id="footer-navigation">Footer navigation</h2> + <!-- navigation items --> + </nav> +</footer> +</pre> + +<p>In this example, screen reading technology would announce that there are two {{HTMLElement("nav")}} sections, one called "Primary navigation" and one called "Footer navigation". If labels were not provided, the person using screen reading software may have to investigate each <code>nav</code> element's contents to determine their purpose.</p> + +<ul> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">Using the aria-labelledby attribute</a></li> + <li><a href="https://www.w3.org/WAI/tutorials/page-structure/labels/#using-aria-labelledby">Labeling Regions • Page Structure • W3C WAI Web Accessibility Tutorials</a></li> +</ul> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.5', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.h1")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{HTMLElement("p")}}</li> + <li>{{HTMLElement("div")}}</li> + <li>{{HTMLElement("section")}}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/ar/html/element/index.html b/files/ar/html/element/index.html new file mode 100644 index 0000000000..a2fb5187e7 --- /dev/null +++ b/files/ar/html/element/index.html @@ -0,0 +1,239 @@ +--- +title: HTML element reference +slug: HTML/Element +translation_of: Web/HTML/Element +--- +<p><font><font>يسرد مرجع HTML هذا جميع </font></font><strong><font><font>عناصر HTML</font></font></strong><font><font> ، المحددة في HTML5 أو في مواصفات سابقة. </font><font>عند تضمينها داخل أقواس زاوية ، فإنها تشكل </font></font><em><font><font>علامات HTML</font></font></em><font><font> : </font></font><code><elementname>.</code><font><font>العناصر عبارة عن كيانات تحدد كيفية إنشاء مستندات HTML ، ونوع المحتوى الذي يجب وضعه في أي جزء من </font><font>مستند </font></font><a href="https://developer.mozilla.org/en-US/docs/HTML" title="/ EN-US / مستندات / HTML"><font><font>HTML</font></font></a><font><font> .</font></font></p> + +<p><font><font>تسرد هذه الصفحة جميع علامات HTML5 القياسية ، ولكنها تحتوي أيضًا على العلامات القديمة والبالية والمهملة ، بالإضافة إلى العلامات غير القياسية التي قد تدعمها المتصفحات. </font><font>غالبًا ما يشار إلى </font><font>العناصر التي تم تقديمها في </font></font><a href="https://developer.mozilla.org/en-US/docs/HTML/HTML5" title="/ EN-US / مستندات / HTML / HTML5"><font><font>HTML5</font></font></a><font><font> على أنها عناصر HTML5 الجديدة ، على الرغم من أن العناصر القياسية الأخرى صالحة أيضًا في HTML5.</font></font></p> + +<p><font><font>في مستند HTML ، يتم تعريف عنصر بواسطة </font></font><em><font><font>علامة البداية</font></font></em><font><font> . </font><font>إذا احتوى عنصر المحتويات الأخرى، وينتهي مع </font></font><em><font><font>علامة إغلاق</font></font></em><font><font>، حيث يسبق اسم العنصر بواسطة خط مائل: </font></font><code></elementname></code><font><font>. </font><font>لا تحتاج إلى إغلاق بعض العناصر ، مثل عناصر الصورة.</font><font>هذه هي المعروفة باسم </font><font>العناصر </font></font><em><font><font>باطلة</font></font></em><font><font> . </font><font>تحتوي مستندات HTML على شجرة من هذه العناصر. </font><font>يدعى كل لتمثيل ما يفعله. </font><font>على سبيل المثال ، </font></font><code><title></code><font><font>يمثل العنصر عنوان المستند. </font><font>فيما يلي قائمة أبجدية بعناصر HTML.</font></font></p> + +<p><a href="https://developer.mozilla.org/en-US/docs/HTML/HTML5"><img alt="تمت إضافة هذا العنصر في HTML5" src="https://developer.mozilla.org/files/3843/HTML5_Badge_32.png" title="تمت إضافة هذا العنصر في HTML5"></a><font><font>يشير </font><font>الرمز </font><font>إلى أنه تمت إضافة العنصر في HTML5. </font><font>لاحظ أنه ربما تم تعديل أو توسيع العناصر الأخرى المدرجة هنا حسب مواصفات HTML5. </font><font>العناصر البعدية غير قياسية أو قديمة أو متوقفة ؛ </font><font>يجب عدم استخدامها في مواقع ويب جديدة ، ويجب إزالتها بشكل تدريجي من المواقع الحالية لتجنب النتائج غير المرغوب فيها.</font></font></p> + +<p>يشير الرمز Ⓒ إلى أن العنصر معرف في مجموعة المواصفات Web Components.</p> + +<div class="index widgeted"><span id="A">A</span> + +<ul> + <li>{{ HTMLElement("a") }}</li> + <li>{{ HTMLElement("abbr") }}</li> + <li><s class="obsoleteElement">{{ HTMLElement("acronym") }}</s></li> + <li>{{ HTMLElement("address") }}</li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("applet") }}</s></li> + <li>{{ HTMLElement("area") }}</li> + <li class="html5">{{ HTMLElement("article") }}</li> + <li class="html5">{{ HTMLElement("aside") }}</li> + <li class="html5">{{ HTMLElement("audio") }}</li> +</ul> +<span id="B">B</span> + +<ul> + <li>{{ HTMLElement("b") }}</li> + <li>{{ HTMLElement("base") }}</li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("basefont") }}</s></li> + <li class="html5">{{ HTMLElement("bdi") }}</li> + <li>{{ HTMLElement("bdo") }}</li> + <li><s class="nonStdElement">{{ HTMLElement("bgsound") }}</s></li> + <li><s class="obsoleteElement">{{ HTMLElement("big") }}</s></li> + <li><s class="nonStdElement">{{ HTMLElement("blink") }}</s></li> + <li>{{ HTMLElement("blockquote") }}</li> + <li>{{ HTMLElement("body") }}</li> + <li>{{ HTMLElement("br") }}</li> + <li>{{ HTMLElement("button") }}</li> +</ul> +<span id="C">C</span> + +<ul> + <li class="html5">{{ HTMLElement("canvas") }}</li> + <li>{{ HTMLElement("caption") }}</li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("center") }}</s></li> + <li>{{ HTMLElement("cite") }}</li> + <li>{{ HTMLElement("code") }}</li> + <li>{{ HTMLElement("col") }}</li> + <li>{{ HTMLElement("colgroup") }}</li> +</ul> +<span id="D">D</span> + +<ul> + <li class="html5">{{ HTMLElement("data") }}</li> + <li class="html5">{{ HTMLElement("datalist") }}</li> + <li>{{ HTMLElement("dd") }}</li> + <li class="webcomp">{{ HTMLElement("decorator")}}</li> + <li>{{ HTMLElement("del") }}</li> + <li class="html5">{{ HTMLElement("details") }}</li> + <li>{{ HTMLElement("dfn") }}</li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("dir") }}</s></li> + <li>{{ HTMLElement("div") }}</li> + <li>{{ HTMLElement("dl") }}</li> + <li>{{ HTMLElement("dt") }}</li> +</ul> +<span id="E">E</span> + +<ul> + <li>{{HTMLElement("em") }}</li> + <li class="html5">{{ HTMLElement("embed") }}</li> +</ul> +<span id="F">F</span> + +<ul> + <li>{{ HTMLElement("fieldset") }}</li> + <li class="html5">{{ HTMLElement("figcaption") }}</li> + <li class="html5">{{ HTMLElement("figure") }}</li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("font") }}</s></li> + <li class="html5">{{ HTMLElement("footer") }}</li> + <li>{{ HTMLElement("form") }}</li> + <li><s class="obsoleteElement">{{ HTMLElement("frame") }}</s></li> + <li><s class="obsoleteElement">{{ HTMLElement("frameset") }}</s></li> +</ul> +<span id="G">G H</span> + +<ul> + <li>{{ HTMLElement("h1") }}</li> + <li>{{ HTMLElement("h2") }}</li> + <li>{{ HTMLElement("h3") }}</li> + <li>{{ HTMLElement("h4") }}</li> + <li>{{ HTMLElement("h5") }}</li> + <li>{{ HTMLElement("h6") }}</li> + <li>{{ HTMLElement("head") }}</li> + <li class="html5">{{ HTMLElement("header") }}</li> + <li class="html5"><s class="deprecatedElement obsoleteElement">{{ HTMLElement("hgroup") }}</s></li> + <li>{{ HTMLElement("hr") }}</li> + <li>{{ HTMLElement("html") }}</li> +</ul> +<span id="I">I</span> + +<ul> + <li>{{ HTMLElement("i") }}</li> + <li>{{ HTMLElement("iframe") }}</li> + <li>{{ HTMLElement("img") }}</li> + <li>{{ HTMLElement("input") }}</li> + <li>{{ HTMLElement("ins") }}</li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("isindex") }}</s></li> +</ul> +<span id="J">J K</span> + +<ul> + <li>{{ HTMLElement("kbd") }}</li> + <li class="html5">{{ HTMLElement("keygen") }}</li> +</ul> +<span id="L">L</span> + +<ul> + <li>{{ HTMLElement("label") }}</li> + <li>{{ HTMLElement("legend") }}</li> + <li>{{ HTMLElement("li") }}</li> + <li>{{ HTMLElement("link") }}</li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("listing") }}</s></li> +</ul> +<span id="M">M</span> + +<ul> + <li class="html5">{{HTMLElement("main")}}</li> + <li>{{ HTMLElement("map") }}</li> + <li class="html5">{{ HTMLElement("mark") }}</li> + <li><s class="nonStdElement">{{ HTMLElement("marquee") }}</s></li> + <li class="html5">{{ HTMLElement("menu") }}</li> + <li class="html5">{{ HTMLElement("menuitem") }}</li> + <li>{{ HTMLElement("meta") }}</li> + <li class="html5">{{ HTMLElement("meter") }}</li> +</ul> +<span id="N">N</span> + +<ul> + <li class="html5">{{ HTMLElement("nav") }}</li> + <li><s class="nonStdElement">{{ HTMLElement("nobr") }}</s></li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("noframes") }}</s></li> + <li>{{ HTMLElement("noscript") }}</li> +</ul> +<span id="O">O</span> + +<ul> + <li>{{ HTMLElement("object") }}</li> + <li>{{ HTMLElement("ol") }}</li> + <li>{{ HTMLElement("optgroup") }}</li> + <li>{{ HTMLElement("option") }}</li> + <li class="html5">{{ HTMLElement("output") }}</li> +</ul> +<span id="P">P</span> + +<ul> + <li>{{ HTMLElement("p") }}</li> + <li>{{ HTMLElement("param") }}</li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("plaintext") }}</s></li> + <li>{{ HTMLElement("pre") }}</li> + <li class="html5">{{ HTMLElement("progress") }}</li> +</ul> +<span id="Q">Q</span> + +<ul> + <li>{{ HTMLElement("q") }}</li> +</ul> +<span id="R">R</span> + +<ul> + <li class="html5">{{ HTMLElement("rp") }}</li> + <li class="html5">{{ HTMLElement("rt") }}</li> + <li class="html5">{{ HTMLElement("ruby") }}</li> +</ul> +<span id="S">S</span> + +<ul> + <li>{{ HTMLElement("s") }}</li> + <li>{{ HTMLElement("samp") }}</li> + <li>{{ HTMLElement("script") }}</li> + <li class="html5">{{ HTMLElement("section") }}</li> + <li>{{ HTMLElement("select") }}</li> + <li>{{ HTMLElement("small") }}</li> + <li class="html5">{{ HTMLElement("source") }}</li> + <li><s class="nonStdElement">{{ HTMLElement("spacer") }}</s></li> + <li>{{ HTMLElement("span") }}</li> + <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("strike") }}</s></li> + <li>{{ HTMLElement("strong") }}</li> + <li>{{ HTMLElement("style") }}</li> + <li>{{ HTMLElement("sub") }}</li> + <li class="html5">{{ HTMLElement("summary") }}</li> + <li>{{ HTMLElement("sup") }}</li> +</ul> +<span id="T">T</span> + +<ul> + <li>{{ HTMLElement("table") }}</li> + <li>{{ HTMLElement("tbody") }}</li> + <li>{{ HTMLElement("td") }}</li> + <li class="webcomp">{{ HTMLElement("template")}}</li> + <li>{{ HTMLElement("textarea") }}</li> + <li>{{ HTMLElement("tfoot") }}</li> + <li>{{ HTMLElement("th") }}</li> + <li>{{ HTMLElement("thead") }}</li> + <li class="html5">{{ HTMLElement("time") }}</li> + <li>{{ HTMLElement("title") }}</li> + <li>{{ HTMLElement("tr") }}</li> + <li class="html5">{{ HTMLElement("track") }}</li> + <li><s class="obsoleteElement">{{ HTMLElement("tt") }}</s></li> +</ul> +<span id="U">U</span> + +<ul> + <li>{{ HTMLElement("u") }}</li> + <li>{{ HTMLElement("ul") }}</li> +</ul> +<span id="V">V</span> + +<ul> + <li>{{ HTMLElement("var") }}</li> + <li class="html5">{{ HTMLElement("video") }}</li> +</ul> +<span id="W">W</span> + +<ul> + <li class="html5">{{ HTMLElement("wbr") }}</li> +</ul> +<span id="X">X Y Z </span> + +<ul> + <li><span id="X"><s class="deprecatedElement obsoleteElement">{{ HTMLElement("xmp") }}</s></span></li> +</ul> +</div> + +<p> </p> diff --git a/files/ar/html/element/span/index.html b/files/ar/html/element/span/index.html new file mode 100644 index 0000000000..79a265b804 --- /dev/null +++ b/files/ar/html/element/span/index.html @@ -0,0 +1,122 @@ +--- +title: <span> +slug: HTML/Element/span +translation_of: Web/HTML/Element/span +--- +<p><font><font>و </font></font><strong><font><font>HTML </font></font><code><span></code><font><font>العنصر</font></font></strong><font><font> هو حاوية مضمنة عامة لمحتوى الصيغة، التي لا تمثل في حد ذاتها أي شيء. </font><font>يمكن استخدامه لتجميع العناصر لأغراض التصميم (باستخدام </font></font><code>class</code><font><font>أو </font></font><code>id</code><font><font>السمات) ، أو لأنها تتشارك في قيم السمات ، مثل </font></font><code>lang</code><font><font>. </font></font><font><font>يجب استخدامه فقط عندما يكون أي عنصر دلالي آخر مناسبًا. </font></font><code><span></code><font><font>تشبه إلى حد كبير على </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div" title="عنصر قسم محتويات HTML (<div>) هو الحاوية العامة لمحتوى التدفق. ليس له تأثير على المحتوى أو التخطيط حتى يتم تصميمه باستخدام CSS."><code><div></code></a><font><font>عنصر، ولكن </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div" title="عنصر قسم محتويات HTML (<div>) هو الحاوية العامة لمحتوى التدفق. ليس له تأثير على المحتوى أو التخطيط حتى يتم تصميمه باستخدام CSS."><code><div></code></a><font><font>هو </font></font><a href="https://developer.mozilla.org/en-US/docs/HTML/Block-level_elements"><font><font>عنصر على مستوى الكتلة</font></font></a><font><font> في حين أن </font></font><code><span></code><font><font>هو </font></font><a href="https://developer.mozilla.org/en-US/docs/HTML/Inline_elements"><font><font>عنصر المضمنة</font></font></a><font><font> .</font></font></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"> + <table> + <tbody> + <tr> + <th scope="row"><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories"><font><font>فئات المحتوى</font></font></a></th> + </tr> + </tbody> + </table> + </th> + <td><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Flow_content"><font><font>محتوى التدفق</font></font></a><font><font> ، </font></font><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content"><font><font>محتوى الصياغة</font></font></a><font><font> .</font></font></td> + </tr> + <tr> + <th scope="row">المحتوى المسموح به</th> + <td> + <table> + <tbody> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content"><font><font>محتوى الصياغة</font></font></a></td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">إغفال العلامة</th> + <td>الآباء المسموح بهم</td> + </tr> + <tr> + <td><font><font>أي عنصر يقبل </font></font><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content"><font><font>محتوى الصياغة</font></font></a><font><font> ، أو أي عنصر يقبل </font></font><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Flow_content"><font><font>محتوى التدفق</font></font></a><font><font> .</font></font></td> + </tr> + <tr> + <th scope="row">يسمح أدوار ARIA</th> + <td>أي</td> + </tr> + <tr> + <th scope="row">واجهة DOM</th> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLSpanElement" title="تمثل واجهة HTMLSpanElement عنصر <span> وتستمد من واجهة HTMLElement ، ولكن دون تنفيذ أي خصائص أو طرق إضافية."><code>HTMLSpanElement</code></a><font><font>(قبل HTML 5 ، كانت الواجهة </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" title="تمثل واجهة HTMLElement أي عنصر HTML. تقوم بعض العناصر بتنفيذ هذه الواجهة مباشرة ، بينما يقوم بعضها الآخر بتنفيذها من خلال واجهة توارثها."><code>HTMLElement</code></a><font><font>)</font></font></td> + </tr> + </tbody> +</table> + +<h2 id="السمات"><font><font>السمات</font></font></h2> + +<p><font><font>هذا العنصر يشمل فقط </font></font><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes"><font><font>السمات العالمية</font></font></a><font><font> .</font></font></p> + +<h2 id="المثال_1"><font><font>المثال 1</font></font></h2> + +<pre class="brush:html;gutter:false"><p><span>Some text</span></p></pre> + +<h3 id="نتيجة"><font><font>نتيجة</font></font></h3> + +<p><font><font>بعض النصوص</font></font></p> + +<p> </p> + +<h2 id="المثال_2"><font><font>المثال 2</font></font></h2> + +<pre class="brush:html;gutter:false"><li><span> + <a href="portfolio.html" target="_blank">See my portfolio</a> +</span></li> +</pre> + +<h3 id="CSS">CSS:</h3> + +<div class="note"> +<p>li span {<br> + background: gold;<br> + }</p> +</div> + +<h2 id="مواصفات"><font><font>مواصفات</font></font></h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">تخصيص</th> + <th scope="col">الحالة</th> + <th scope="col">تعليق</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-span-element', '<span>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-span-element', '<span>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>واجهة DOM هي الآن {{domxref("HTMLSpanElement")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#edef-SPAN', '<span>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="توافق_التصفح">توافق التصفح</h2> + + + +<p>{{Compat("html.elements.span")}}</p> + +<h2 id="انظر_أيضا"><font><font>انظر أيضا</font></font></h2> + +<ul> + <li>HTML {{HTMLElement("div")}} عنصر </li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/ar/html/element/tt/index.html b/files/ar/html/element/tt/index.html new file mode 100644 index 0000000000..30cfcc09f9 --- /dev/null +++ b/files/ar/html/element/tt/index.html @@ -0,0 +1,161 @@ +--- +title: '<tt>: The Teletype Text element (obsolete)' +slug: HTML/Element/tt +translation_of: Web/HTML/Element/tt +--- +<div>{{ obsolete_header() }}</div> + +<p><font><font>وعفا عليها الزمن </font></font><strong><font><font>HTML المبرقة الكاتبة عنصر نص</font></font></strong><font><font> ( </font></font><strong><code><tt></code></strong><font><font>) بإنشاء النص المضمن الذي يقدم باستخدام </font></font><a href="https://developer.mozilla.org/en-US/docs/Glossary/user_agent" title="وكيل المستخدم: وكيل المستخدم هو برنامج كمبيوتر يمثل الشخص ، على سبيل المثال ، متصفح في سياق الويب."><font><font>وكيل المستخدم</font></font></a><font><font> وجه الافتراضي أحادي المسافة الخط. </font></font><font><font>تم إنشاء هذا العنصر لغرض تقديم نص كما سيتم عرضه على شاشة عرض ثابت مثل نمط teletype أو نص فقط أو طابعة خط</font></font></p> + +<p><font><font>تُستخدم المصطلحات </font></font><strong><font><font>غير المتناسبة</font></font></strong><font><font> ، </font></font><strong><font><font>والنمط الأحادي</font></font></strong><font><font> ، </font></font><strong><font><font>والمونوسبيس</font></font></strong><font><font> بشكل تبادلي ولها نفس المعنى العام: فهي تصف حرفًا محرفًا تكون جميع أحرفه هي نفس عدد وحدات البكسل على نطاق واسع.</font></font></p> + +<p><font><font>هذا العنصر عفا عليه الزمن ، ومع ذلك. </font><font>يجب عليك استخدام أكثر مفيدة لغويا </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code" title="يعرض عنصر <code> HTML محتوياته بطريقة مصممة للإشارة إلى أن النص عبارة عن جزء قصير من رمز الكمبيوتر."><code><code></code></a><font><font>، </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd" title="يمثل عنصر إدخال لوحة مفاتيح HTML (<kbd>) امتدادًا للنص المضمن يشير إلى إدخال المستخدم النصي من لوحة المفاتيح أو الإدخال الصوتي أو أي جهاز إدخال نص آخر."><code><kbd></code></a><font><font>، </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/var" title="يمثل عنصر HTML متغير (<var>) اسم متغير في تعبير رياضي أو سياق برمجة."><code><var></code></a><font><font>، أو</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/samp" title="يتم استخدام عنصر عينة HTML (<samp>) لإحاطة النص المضمن الذي يمثل عينة (أو اقتباس) من برنامج كمبيوتر."><code><samp></code></a><font><font>عناصر النص المضمن الذي يحتاج إلى أن تقدم في نوع أحادي المسافة، أو </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre" title="يمثل عنصر <pre> HTML النص المنسق مسبقًا والذي سيقدم بالضبط كما هو مكتوب في ملف HTML."><code><pre></code></a><font><font>شعارا لالمحتوى الذي ينبغي أن تقدم ككتلة منفصل.</font></font></p> + +<div class="note"><font><font>إذا لم يكن أي من العناصر الدلالية مناسبًا لحالة الاستخدام الخاصة بك (على سبيل المثال ، إذا كنت تحتاج ببساطة إلى عرض بعض المحتوى بخط غير تناسبي) ، فيجب أن تفكر في استخدام </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span" title="عنصر HTML <span> عبارة عن حاوية مضمنة عامة لمحتوى الصياغة ، والتي لا تمثل أي شيء بطبيعته. يمكن استخدامه لتجميع العناصر لأغراض التصميم (باستخدام صفات الصف أو الهوية) ، أو لأنها تتشارك في قيم السمات ، مثل lang."><code><span></code></a><font><font>العنصر ، وأن تصممه كما تريد باستخدام CSS. </font><font>و </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-family" title="تحدد الخاصية CSS لعائلة الخط قائمة ذات أولوية من اسم عائلة خط واحد أو أكثر و / أو أسماء عامة للعنصر المحدد."><code>font-family</code></a><font><font>الخاصية هي مكان جيد للبدء</font></font></div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories"><font><font>فئات المحتوى</font></font></a></th> + <td> + <table> + <tbody> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Flow_content"><font><font>محتوى التدفق</font></font></a><font><font> ، </font><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Flow_content"><font>ومحتوى </font></a></font><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content"><font><font>الصياغة</font></font></a><font><font> ، ومحتوى واضح</font></font></td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">المحتوى المسموح به</th> + <td><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content"><font><font>محتوى الصياغة</font></font></a><font><font> .</font></font></td> + </tr> + <tr> + <th scope="row">إغفال العلامة</th> + <td>لا شيء ، كل من علامة البداية والنهاية إلزامية.</td> + </tr> + <tr> + <th scope="row">الآباء المسموح بهم</th> + <td><font><font>ي عنصر يقبل </font></font><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content"><font><font>محتوى الصياغة</font></font></a></td> + </tr> + <tr> + <th scope="row">يسمح أدوار ARIA</th> + <td>أي</td> + </tr> + <tr> + <th scope="row"> + <table> + <tbody> + <tr> + <th scope="row"><font><font>واجهة DOM</font></font></th> + </tr> + </tbody> + </table> + </th> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" title="تمثل واجهة HTMLElement أي عنصر HTML. تقوم بعض العناصر بتنفيذ هذه الواجهة مباشرة ، بينما يقوم بعضها الآخر بتنفيذها من خلال واجهة توارثها."><code>HTMLElement</code></a></td> + </tr> + </tbody> +</table> + +<h2 id="السمات"><font><font>السمات</font></font></h2> + +<p><font><font>هذا العنصر يشمل فقط </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/global_attributes"><font><font>السمات العالمية</font></font></a></p> + +<h2 id="أمثلة"><font><font>أمثلة</font></font></h2> + +<h3 id="المثال_الأساسي"><font><font>المثال الأساسي</font></font></h3> + +<p><font><font>يستخدم هذا المثال </font></font><code><tt></code><font><font>لإظهار النص الذي تم إدخاله والإخراج بواسطة تطبيق طرفي.</font></font></p> + +<pre class="brush:html"><p>Enter the following at the telnet command prompt: <code>set localecho</code><br /> + +The telnet client should display: <tt>Local Echo is on</tt></p> +</pre> + +<h4 id="نتيجة"><font><font>نتيجة</font></font></h4> + +<p>{{EmbedLiveSample("Basic_example", 650, 80)}}</p> + +<h3 id="تجاوز_الخط_الافتراضي"><font><font>تجاوز الخط الافتراضي</font></font></h3> + +<p>يمكنك تجاوز الخط الافتراضي للمتصفح - إذا كان المتصفح يسمح لك بذلك ، وهو أمر غير مطلوب - باستخدام CSS:</p> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">tt { + font-family: "Lucida Console", "Menlo", "Monaco", "Courier", + monospace; +}</pre> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p>Enter the following at the telnet command prompt: <code>set localecho</code><br /> + +The telnet client should display: <tt>Local Echo is on</tt></p></pre> + +<h4 id="نتيجة_2"><font><font>نتيجة</font></font></h4> + +<p>{{EmbedLiveSample("Overriding_the_default_font", 650, 80)}}</p> + +<h2 id="ملاحظات_الاستخدام"><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tt$edit#Usage_notes" rel="nofollow, noindex"><font><font>ملاحظات الاستخدام</font></font></a></h2> + +<p> </p> + +<p><font><font>يتم تقديم </font></font><code><tt></code><font><font>العنصر افتراضيًا باستخدام الخط الافتراضي غير المتناسب في المستعرض. </font><font>يمكنك إلغاء ذلك باستخدام CSS عن طريق إنشاء قاعدة باستخدام </font></font><code>tt</code><font><font>المحدد ، كما هو موضح في المثال </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tt#Overriding_the_default_font"><font><font>تجاوز الخط الافتراضي</font></font></a><font><font> أعلاه.</font></font></p> + +<p> </p> + +<div class="note"> +<p> </p> + +<p><font><font>التغييرات التي تمت تهيئتها بواسطة المستخدم على إعداد خط أحادي المسافة الافتراضي قد تكون لها الأسبقية على CSS الخاص بك.</font></font></p> + +<p> </p> +</div> + +<p><font><font>على الرغم من أن هذا العنصر لم يتم إهماله رسميًا في HTML 4.01 ، إلا أنه تم تثبيط استخدامه بسبب العناصر الدلالية و / أو CSS. </font><font>و </font></font><code><tt></code><font><font>العنصر عفا عليه الزمن في HTML 5.</font></font></p> + +<h2 id="مواصفات"><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tt$edit#Specifications" rel="nofollow, noindex"><font><font>مواصفات</font></font></a></h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'obsolete.html#tt', '<tt>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'obsolete.html#elementdef-tt', '<tt>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '<tt>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="التوافق_المتصفح"><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tt$edit#Browser_compatibility" rel="nofollow, noindex"><font><font>التوافق المتصفح</font></font></a></h2> + + + +<p>{{Compat("html.elements.tt")}}</p> + +<h2 id="See_also" name="See_also"><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tt$edit#See_also" rel="nofollow, noindex"><font><font>انظر أيضا</font></font></a></h2> + +<ul> + <li>The semantic {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("kbd")}}, and {{HTMLElement("samp")}} elements</li> + <li>The {{HTMLElement("pre")}} element for displaying preformatted text blocks</li> +</ul> + +<div>{{ HTMLRef }}</div> diff --git a/files/ar/learn/accessibility/index.html b/files/ar/learn/accessibility/index.html new file mode 100644 index 0000000000..3a4577ebb0 --- /dev/null +++ b/files/ar/learn/accessibility/index.html @@ -0,0 +1,53 @@ +--- +title: الإتاحة +slug: Learn/Accessibility +tags: + - الإتاحة + - تعليم + - صفحة هبوط + - مبتدئين +translation_of: Learn/Accessibility +--- +<div>{{LearnSidebar}}</div> + +<p class="summary" dir="rtl">من المفيد تعلم لغة ترميز النص الفائق، صفحات الأنماط الانسيابية، والجافاسكربت إن كنت تريد أن تصبح مطوراً، ولكن معرفتك يجب أن تكون أبعد من استخدام تلك التقنيات وحسب، فعليك استخدامها أيضاً بمسؤوليّة؛ حتّى تتمكن من زيادة مستخدمين موقعك و عدم حرمان أياً على استخدامه. عليك التقيّد بالممارسات الفُضلى (المشروحة في دورات لغة ترميز النص الفائق، صفحات الأنماط الانسيابية، والجافاسكربت)، <a href="/ar/docs/Learn/Tools_and_testing/Cross_browser_testing">القيام باختبار الموقع على عدة متصفحات</a>، ووضع <a href="/ar/docs/Web/Accessibility">الإتاحة</a> بعين الاعتبار منذ بداية تطوير الموقع. سنغطي في هذه المقالة موضوع الإتاحة بالتفصيل.</p> + +<h2 dir="rtl" id="المتطلبات">المتطلبات</h2> + +<p dir="rtl">لتحقيق أقصى استفادة من هذه الوحدة، يجب عليك، إما دراسة الوحدتين الأولى - على الأقل - من <a href="/ar/docs/Learn/HTML">لغة ترميز النص الفائق</a>، <a href="/ar/docs/Learn/CSS">صفحات الأنماط الانسيابية</a>، و<a href="/ar/docs/Learn/JavaScript">الجافاسكربت</a>، أو، وهذا أفضل، دراسة أجزاء الإتاحة المُتعلقة بالتقنيّة التي تدرسها.</p> + +<div class="note" dir="rtl"> +<p><strong>ملاحظة</strong>: إن كنت تعمل على حاسوب/جهاز لوحي/شيء آخر، ولا تملك القدرة على إنشاء ملفات، يمكنك تجربة (معظم) الأمثلة هنا باستخدام محرر شيفرات برمجيّة على الأنترنت مثل <a class="external external-icon" href="http://jsbin.com/" rel="noopener">JSBin</a> أو <a class="external external-icon" href="https://thimble.mozilla.org/" rel="noopener">Thimble</a>.</p> +</div> + +<h2 dir="rtl" id="دروس_إرشاديّة">دروس إرشاديّة</h2> + +<dl> + <dt dir="rtl"><a class="new" href="/ar/docs/Learn/Accessibility/What_is_accessibility" rel="nofollow">ما هي الإتاحة؟</a></dt> + <dd dir="rtl">تُمثِل هذه المقالة بداية للوحدة، بحيث تعطيك لمحة عن ماهيّة الإتاحة، فهي تتضمن معلومات عن مجموعة الأشخاص الذين يشملهم هذا المصطلح ولماذا، الأدوات المُختلفة التي تُستخدَم للتعامل مع الويب، وكيف يمكننا جعل الإتاحة جزءً لا يتجزأ من عمليّة تطوير الويب.</dd> + <dt dir="rtl"><a class="new" href="/ar/docs/Learn/Accessibility/HTML" rel="nofollow">أساسيات مهمة في لغة ترميز النص الفائق للعمل مع الإتاحة</a></dt> + <dd dir="rtl">يمكن جعل جزء كبير من محتوى الويب مُتاحاً؛ عبر التأكُّد من استخدام عناصر لغة ترميز النص الفائق الصحيحة في أماكنها الصحيحة وبالوقت المناسب. هذه المقالة تتعمق بالتفصيل في كيفيّة استخدام هذه اللغة لضمان الاستفادة بالحد الأقصى من الإتاحة.</dd> + <dt dir="rtl"><a class="new" href="/ar/docs/Learn/Accessibility/CSS_and_JavaScript" rel="nofollow">أفضل الطرق لاستخدام صفحات الأنماط الانسيابية والجافاسكربت لإتاحة أفضل</a></dt> + <dd dir="rtl">يُمكِّن أيضاً الاستخدام الصحيح لهاتين اللغتين توفير تجربة ويب أفضل، أو يمكن أن يجعلها أسوء إذا أُسيءَ استخدام هاتِه اللغات. تُعَنوِن هذه المقالة بعض استخدامات صفحات الأنماط الانسيابية والجافاسكربت الفضلى التي يجب اخذها بعين الاعتبار لضمان جعل المحتوى المُعقَد مُتاحاً قدر الإمكان.</dd> + <dt dir="rtl"><a class="new" href="/ar/docs/Learn/Accessibility/WAI-ARIA_basics" rel="nofollow">أساسيات تقنيّة WAI-ARIA</a></dt> + <dd dir="rtl">إكمالاً للمقالة السابقة، من الصعب في بعض الأحيان إنشاء عناصر تحكم رسوميّة تستخدم عناصر من لغة ترميز النص الفائق غير دلاليّة (أي وظيفتها غير واضحة من اسمها، مما يجعل تذكر العنصر وفهمه أصعب - unsemantic) ومحتوى جافاسكربت مُحدَث تلقائياً. يمكن لهذه التقنيّة المساعدة في حل هذه المشكلات عبر إضافة المزيد من العناصر الدلاليّة (semantic) التي يُمكِن للمتصفحات التعرُّف عليها واستخدامها لجعل المستخدمين يفهمون الأمور بشكل أوضح. سنشرح في هذه المقالة كيفيّة استخدام هذه التقنيّة لتحسين التجربة الإتاحيّة.</dd> + <dt dir="rtl"><a class="new" href="/ar/docs/Learn/Accessibility/Multimedia" rel="nofollow">الوسائط المُتاحة</a></dt> + <dd dir="rtl">هناك فئة أخرى من المحتوى تُحدِث مشاكل إتاحيّة وهي الوسائط المتعددة (multimedia) - محتوى الفيديو، الصوت، والصورة يجب أن يُعطى نصاً بديلاً يشرحه؛ كي تتمكن التقنيات المعاونة (المساعدة - assistive) ومستخدميها من فهم المحتوى. تشرح هذه المقالة كيفيّة القيام بذلك.</dd> + <dt dir="rtl"><a class="new" href="/ar/docs/Learn/Accessibility/Mobile" rel="nofollow">الإتاحة الخلويّة</a> (Mobile Accessibility)</dt> + <dd dir="rtl">نظراً لشيوع الوصول إلى محتوى الويب عبر الهواتف، ولامتلاك منصات الهواتف الشهيرة، مثل iOS والأندرويد، على أدوات لهذا الغرض، أصبح من المهم الاهتمام بإتاحة محتواك على هذه المنصات. تتعمق هذه المقالة في الاعتبارات التي يجب أن تؤخذ عند إتاحة محتوى الويب للهواتف.</dd> +</dl> + +<h2 dir="rtl" id="اختبارات">اختبارات</h2> + +<dl> + <dt dir="rtl"><a href="/ar/docs/Learn/Accessibility/Accessibility_troubleshooting">معالجة الأخطاء الإتاحيّة</a></dt> + <dd dir="rtl">في هذا الإختبار من الوحدة، قدمنا لك موقع بسيطة يحتوي على عدد من الأخطاء الإتاحيّة التي عليك استكشافها وإصلاحها.</dd> +</dl> + +<h2 dir="rtl" id="انظر_أيضاً">انظر أيضاً</h2> + +<ul dir="rtl"> + <li><a href="https://egghead.io/courses/start-building-accessible-web-applications-today">أبدا من اليوم ببناء تطبيقات ويب مُتاحة</a>، سلسلة فيديوهات ممتازة مقدمة من قبل<span class="short_text" id="result_box" lang="ar"><span> مارسي ساتون</span></span> (Marcy Sutton).</li> + <li><a href="https://dequeuniversity.com/resources/">مصادر جامعة دوكي</a> (Deque)، تتضمن أمثلة برمجيّة، مراجع لقارئات شاشة (screen reader)، ومصادر أخرى مفيدة.</li> + <li><a href="http://webaim.org/resources/">مصادر من موقع WebAIM</a>، تتضمن دروس إرشاديّة، قوائم، أدوات، وأمور أخرى مفيدة.</li> +</ul> diff --git a/files/ar/learn/accessibility/what_is_accessibility/index.html b/files/ar/learn/accessibility/what_is_accessibility/index.html new file mode 100644 index 0000000000..338c3dd9e8 --- /dev/null +++ b/files/ar/learn/accessibility/what_is_accessibility/index.html @@ -0,0 +1,206 @@ +--- +title: ما هي الإتاحة؟ +slug: Learn/Accessibility/What_is_accessibility +tags: + - أدوات + - إتاحة + - مبتدئين + - مستخدمين +translation_of: Learn/Accessibility/What_is_accessibility +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}</div> + +<p class="summary" dir="rtl">تُمثِل هذه المقالة بداية للوحدة، بحيث تعطيك لمحة عن ماهيّة الإتاحة (accessibility)، فهي تتضمن معلومات عن مجموعة الأشخاص الذين يشملهم هذا المصطلح ولماذا، الأدوات المُختلفة التي تُستخدَم للتعامل مع الويب، وكيف يمكننا جعل الإتاحة جزءً لا يتجزأ من عمليّة تطوير الويب.</p> + +<table class="learn-box standard-table" dir="rtl"> + <tbody> + <tr> + <th dir="rtl" scope="row">المتطلبات:</th> + <td> + <p dir="rtl">معرفة بسيطة بالحاسوب، وفهم بسيط <a href="/ar/docs/Web/HTML">للغة ترميز النص الفائق</a> و<a href="/ar/docs/Web/CSS">صفحات الأنماط الانسيابية</a>.</p> + </td> + </tr> + <tr> + <th dir="rtl" scope="row">الهدف:</th> + <td> + <p dir="rtl">حصول القارئ على معرفة حول الإتاحة، ما هي، وكيف تؤثر عليك كمطور مواقع.</p> + </td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="ما_هي_الإتاحة؟">ما هي الإتاحة؟</h2> + +<p dir="rtl">هي عمليّة جعل المواقع قابلة للاستخدام لأكبر قدر ممكن من الأشخاص. يُعتقَد عادةً أنَّها تتعلق بالأشخاص ذوي الإعاقات وحسب، ولكنها بالحقيقة تشمل أيضاً جماعة الأشخاص الذين يستخدمون الهواتف، أو الذين يملكون صبيب ضعيف من الإنترنت.</p> + +<p dir="rtl">يمكنك أيضاً النظر للإتاحة على أنَّها معاملة الجميع بالمثل، وإعطائِهم الفُرص ذاتها، بغض النظر عن قدراتهم أو ظروفهم. بنفس الطريقة التي لا يجوز فيها إخراج شخص ما من مبنى لأنَّه مُقعَد (تحتوي معظم المباني عامةً على منحدرات للمقاعد المتحركة ومصاعد هذه الأيام)، لا يجوز أيضاً منع أحدهم من استخدام الموقع لأنَّه مُعاق بصرياً أو يستخدم هاتف محمول. كلنا مُختلفون، ولكن جميعنا بشر، وبالتالي لدينا نفس الحقوق (الإنسانيّة).</p> + +<p dir="rtl">الإتاحة عمل صحيح، ولكنها أيضاً جزء من القانون في بعض البلدان، ويمكنها أنْ تفتح بعض الأسواق المهمة التي بدونها لا يُمكِن استخدام خدماتك، أو شراء منتجاتك ...إلخ.</p> + +<p dir="rtl">تفيد الإتاحة وممارساتها الصحيحة الجميع:</p> + +<ul dir="rtl"> + <li>تُحسِن لغة ترميز النص الفائق (HTML) الدلاليّة (التي تستخدم عناصر اسمائها تدُل على وظيفتها - semantic) فهرسة الموقع في محركات البحث (SEO)، فتجعله أكثر رواجاً سوقياً.</li> + <li>يظهِر الاهتمام بالإتاحة صورة حسنة وأخلاقيّة؛ مما يُحسِن صورتك بين الناس.</li> + <li>تجعل أيضاً الممارسات الجيدة الأخرى، التي تُحسِن الإتاحة، موقعك أكثر استخداميّة عند مجموعات أخرى من المُستخدمين، مثل مُستخدمين الهواتف المحمولة، المُستخدمين ممن لديهم صبيب إنترنت ضعيف ...إلخ. يمكن للجميع حقيقةً الاستفادة من تحسينات كهذه.</li> + <li>هل ذكرنا أيضاً أنَّ ذلك قانون في بعض الأماكن؟</li> +</ul> + +<h2 dir="rtl" id="ما_هي_أنواع_الإعاقات_التي_نتكلم_عنها؟">ما هي أنواع الإعاقات التي نتكلم عنها؟</h2> + +<p dir="rtl">الأشخاص ذوي الإعاقات متنوعون تماماً كالأشخاص السليمين، كما إعاقاتهم متنوعة أيضاً. الدرس الرئيسي هنا هو التفكير بعيداً عن الحاسوب وكيفيّة استخدامك للويب، والبدأ في التعلم كيف يستخدمه الآخرون - أنت لست كمُستخدمي خدماتِك. تُشرَح أدناه الإعاقات الرئيسيّة التي يجب الاهتمام بها، بالإضافة إلى الأدوات التي يستخدمها من لديهم تلك الإعاقات للوصول إلى محتوى الويب (المعروفة <strong>بالتقنيات المعاونة</strong> (assistive technologies) أو <strong>ATs</strong> كاختصار).</p> + +<div class="note"> +<p dir="rtl"><strong>ملاحظة</strong>: تشير منظمة الصحة العالميّة في مقالة <a href="http://www.who.int/mediacentre/factsheets/fs352/ar/">العجز والصحة</a> إلى "معاناة أكثر من مليار شخص، أي نحو 15% من سكان العالم، من شكل ما من أشكال العجز."، و "معاناة ما بين 110 مليون و190 مليون بالغ من صعوبات جسميّة في أداء الوظائف".</p> +</div> + +<h3 dir="rtl" id="الإعاقات_البصريّة">الإعاقات البصريّة</h3> + +<p dir="rtl">يشمل هذا المصطلح العميان، من لديهم ضعف نظر، أو من لديهم عمى ألوان ...إلخ. العديد من الأشخاص في هذه الفئة يستخدمون مُكبرات الشاشة (إما المُكبرات المادية، أو خواص التكبير في البرمجيات. لدى معظم المتصفحات وأنظمة التشغيل هذه الأيام القدرة على التكبير)، وبعضهم يستخدم قارِئات الشاشة، وهي برمجيات تقرأ النصوص الرقميّة:</p> + +<ul dir="rtl"> + <li>البعض منها احتكاريّة مدفوعة، مثل<a class="external external-icon" href="http://www.freedomscientific.com/Products/Blindness/JAWS">JAWS</a> (لنظام ويندوز) و <a class="external external-icon" href="http://www.gwmicro.com/window-eyes/">Window Eyes</a> (لنظام ويندوز).</li> + <li>البعض الآخر منها مجانيّة، مثل<a class="external external-icon" href="http://www.nvaccess.org/">NVDA</a> (لنظام ويندوز)،<a class="external external-icon" href="http://www.chromevox.com/">ChromeVox</a> (لنظام كروم، ويندوز، وماك)، و<a class="external external-icon" href="https://wiki.gnome.org/Projects/Orca">Orca</a> (لنظام لينُكس).</li> + <li>البعض الآخر مبني إفتراضياً في أنظمة التشغيل، مثل<a class="external external-icon" href="http://www.apple.com/accessibility/osx/voiceover/">VoiceOver</a> (نظام ماك و iOS)،<a class="external external-icon" href="https://support.microsoft.com/en-us/help/22798/windows-10-narrator-get-started">Narrator</a> (لنظام ويندوز)،<a class="external external-icon" href="http://www.chromevox.com/">ChromeVox</a> (لنظام كروم)، <a class="external external-icon" href="https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback">TalkBack</a> (لنظام الأندرويد).</li> +</ul> + +<p dir="rtl">إنَّها لفكرة سديدة أن تتعرف على استخدام بعض القارِئات، بحيث ينبغي عليك تثبيت إحداها والتعامل معها قليلاً؛ لتأخذ فكرة عن آلية عملها. انظر <a href="/ar/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">لدليل اختبار العدة متصفحات لقارئِات الشاشة</a> (cross browser testing screen readers guide) للمزيد من التفاصيل عن استخدامها، يوفر الفيديو أدناه مثال موجز لماهيّة التجربة.</p> + +<p>{{EmbedYouTube("IK97XMibEws")}}</p> + +<p dir="rtl">من حيث الجانب الإحصائي، تُقدِر المنظمة العالميّة للصحة أنَّ "هناك نحو 285 مليون نسمة ممن يعانون من ضعف البصر في جميع أنحاء العالم منهم 39 مليون نسمة كُفّت أبصارهم و246 مليون نسمة ضعفت رؤيتهم." (انظر إلى <a href="http://www.who.int/mediacentre/factsheets/fs282/en/">تقرير ضعف البصر والعمى</a>). هذا القدر الكبير من المستخدمين - والذي يساوي عدد سكان الولايات المُتخدة الأمريكيّة تقريباً - لن يستطيع استخدام موقعك لأنَّه غير مُبرمَج بشكل صحيح وحسب.</p> + +<h3 dir="rtl" id="الإعاقات_السمعيّة">الإعاقات السمعيّة</h3> + +<p dir="rtl">تُعرَف أيضاً بالإعاقات الصوتيّة (auditory)، أو الصمم. هؤلاء المجموعة من الأشخاص إما يملكون قدرة سمعيّة ضعيفة، أو هم صُمّ بالكامل. يستخدم المعاقين سمعياً التقنيات المعاونة (انظر <a href="https://www.nidcd.nih.gov/health/assistive-devices-people-hearing-voice-speech-or-language-disorders">إلى الأجهزة المعاونة للأشخاص ذوي الاضطرابات السمعيّة، الصوتيّة، النطقيّة، أو اللغويّة</a>)، ولكن لا يوجد تقنيات معاونة مخصصة للعمل مع الحاسب أو الويب.</p> + +<p dir="rtl">ومع ذلك، هناك عدة تكتيكات يجب وضعها في عين الاعتبار لتوفير بدائل نصيّة للمحتوى الصوتي حتّى يتمكنون من قراءته، كالنصوص النصيّة البسيطة (simple text transcripts) والتعليقات النصيّة على الفيديوهات. سنناقش ذلك في مقالة لاحقاً.</p> + +<p dir="rtl">يمثل أيضاً المعاقين سمعياً نسبة كبيرة من المُستخدمين، حيث يشير <a href="http://www.who.int/mediacentre/factsheets/fs300/ar/">تقرير الصمم وضعف السمع</a> من منظمة الصحة العالميّة إلى أنَّ "يعاني 360 مليون شخص على الصعيد العالمي من فقدان السمع المسبب للعجز، و32 مليون شخص منهم هم من الأطفال".</p> + +<h3 dir="rtl" id="الإعاقات_الحركيّة">الإعاقات الحركيّة</h3> + +<p dir="rtl">يملك هؤلاء الأشخاص إعاقات تتعلق بالحركة، والتي قد تتضمن مشاكل جسديّة بحتة (كفقدان طرف أو الشلل)، أو اضطرابات عصبيّة أو وراثيّة تؤدي إلى ضعف أو عدم القدرة على التحكم بالأطراف. بعض الأشخاص قد تكون لديهم صعوبة في دقة حركات اليد للتعامل مع الفأرة، وقد تكون حالة الآخرين أخطر، فالربما يكونون مشلولين إلى حد كبير مما يجعلهم محتاجين <a href="https://www.performancehealth.com/baseball-cap-head-pointer">لمؤشر رأسي</a> ليتعاملوا مع الحواسيب.</p> + +<p dir="rtl">يُمكِن أنْ يكون هذا النوع من الإعاقات أيضاً كنتيجة لِكِبَر السن، بدلاً من كونه نتيجة لصدمة أو حالة معينة، ويمكن أن يكون نتيجة لنقص في العتاد، فبعض المستخدمين قد لا يملكون فأرة (mouse).</p> + +<p dir="rtl">الطريقة الفعالة للتعامل مع هذا هي جعل عناصر الصفحة قابلة للوصول بواسطة لوحة المفاتيح، سنناقش ذلك في مقالة لاحقة في الوحدة، ولكن من الجيد أن تقوم حالياً بتجربة استخدام بعض المواقع بلوحة المفاتيح لترى كيف يحدث الأمر. هل يمكنك - على سبيل المثال - استخدام زر الجدولة (tab) للتنقل بين عناصر الاستمارة (form)؟ يمكنك إيجاد المزيد من التفاصيل حول التحكم بلوحة المفاتيح في قسم <a href="/ar/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Using_native_keyboard_accessibility">الإتاحة باستخدام لوحة المفاتيح في اختبار العدة متصفحات</a> (Cross browser testing Using native keyboard accessibility).</p> + +<p dir="rtl">من حيث الجانب الإحصائي، يعاني عدد كبير من الناس من الإعاقات الحركيّة. يشير <a href="http://www.cdc.gov/nchs/fastats/disability.htm">تقرير العجز والوظائف الحركيّة</a> (Disability and Functioning) <span id="result_box" lang="ar"><span>لمراكز الولايات المتحدة لمكافحة الأمراض والوقاية </span></span>أنَّ "نسبة البالغين الذين يعانون من مختلف الصعوبات الحركيّة تبلغ 15.1%" في الولايات المُتحدة الأمريكيّة".</p> + +<h3 dir="rtl" id="الإعاقات_المعرفيّة">الإعاقات المعرفيّة</h3> + +<p dir="rtl">لربما تتواجد أوسع مجموعة من الإعاقات في هذه الفئة؛<span lang="ar"><span> فيمكن أن تشير الإعاقة المعرفيّة إلى الأمراض العقليّة</span></span>،<span lang="ar"><span> الصعوبات في التعلم، الصعوبات في الفهم والتركيز</span></span>،<span lang="ar"><span> مثل اضطراب نقص الانتباه و<a href="https://www.nimh.nih.gov/health/topics/attention-deficit-hyperactivity-disorder-adhd/index.shtml">فرط النشاط</a> (ADHD)، الأشخاص الذين يعانون من <a href="https://www.nimh.nih.gov/health/topics/autism-spectrum-disorders-asd/index.shtml">التوحد</a>،</span> <span>الأشخاص المصابين <a href="https://www.nimh.nih.gov/health/topics/schizophrenia/index.shtml">بانفصام الشخصيّة</a>، والعديد من أنواع الاضطرابات الأخرى.</span> <span>يمكن أن تؤثر هذه الإعاقات على أجزاء كثيرة من الحياة اليوميّة، بسبب المشاكل في الذاكرة</span></span>، <span lang="ar"><span>حل المشكلات</span></span>،<span lang="ar"><span> الاستيعاب</span></span>،<span lang="ar"><span> والانتباه ...إلخ.</span></span></p> + +<p dir="rtl"><span id="result_box" lang="ar"><span>أكثر الطرق شيوعًا التي قد تؤثر فيها هذه الإعاقات على استخدام موقع الويب هي صعوبة في فهم كيفيّة إكمال مهمة ما، أو تذكر كيفيّة القيام بشيء تم إنجازه، أو زيادة الإحباط عند العمل المُربِك أو الأمور الغير متناسقة</span></span>، مثل التنسيقات،<span lang="ar"><span> التنقل</span></span>، و<span lang="ar"><span>ميزات الصفحة الأخرى</span></span>.</p> + +<p dir="rtl">على نقيض المشاكل الإتاحيّة الأخرى، من المستحيل تحديد إصلاحات سريعة للمشاكل الإتاحيّة الناتجة عن الإعاقات المعرفيّة، فرصتك الوحيدة هي تصميم موقعك ليكون منطقياً، متناسقاً، مراعياً للاستخداميّة قدر الإمكان. كمثال، احرص على:</p> + +<ul dir="rtl"> + <li>جعل الصفحات متناسقة. أن يكون الشريط العلوي، الرأس، الذيل، والمحتوى الرئيسي دائماً في المكان الصحيح.</li> + <li>أن تكون الأدوات مُصممة بشكل جيدة وسهلة الاستخدام.</li> + <li>تقسيم العمليات متعددة المراحل إلى خطوات منطقيّة تتضمن على تذكيرات دوريّة حول المراحل التي قطعتها في تنفيذها، وكم من المتبقي لتنهيها، إذا كان ذلك ممكناً.</li> + <li>أن تكون طريقة سير العمليات منطقية، بسيطة، وتتطلب أقل قدر ممكن من الخطوات لإنجازها. على سبيل المثال، غالباً ما تكون عمليات التسجيل (registering) وتسجيل الدخول (signing in) في المواقع معقد بشكل غير ضروري.</li> + <li>أن تكون الصفحة الواحدة غير طويلة وكثيفة المعلومات.</li> + <li>أن تكون اللغة المُستخدمة في صفحاتك واضحة قدر الإمكان، وغير ممتلئة بالكلمات العاميّة أو المصطلحات الغير ضروريّة.</li> + <li>أن تكون النقاط المُهمة مُعلَّم بطريقة ما.</li> + <li>أن تكون أخطاء المُستخدمين واضحة، وتتضمن رسائل تحوي إقتراحات لحل المشكلة.</li> +</ul> + +<p dir="rtl">هذه ليست "تكتيكات إتاحيّة" بقدر ما هي ممارسات جيدة في عمليّة التصميم. ستفيد الجميع باستخدامك لهذه التقنيات في مواقعك، كما يجب أن تكون دوماً جزءً معيارياً من عملك.</p> + +<p dir="rtl">من الجانب الإحصائي، العدد كبير مجدداً. وضَّحت جامعة كورنيل في <a href="http://www.disabilitystatistics.org/StatusReports/2014-PDF/2014-StatusReport_US.pdf">تقريرها عن حالات الإعاقة لعام 2014</a> أنَّ "4.5% من الناس الذين تترواح أعمارهم بين 21-64 سنة يعانون من شكل من أشكال الإعاقة المعرفيّة".</p> + +<div class="note"> +<p dir="rtl"><strong>ملاحظة</strong>: توفر <a href="http://webaim.org/articles/cognitive/">صفحة WebAIM للإعاقات المعرفيّة</a> توضيح موسَع لهذه الأفكار، وهي بالتأكيد تستحق القراءة.</p> +</div> + +<h2 dir="rtl" id="تضمين_الإتاحة_في_مشروعك">تضمين الإتاحة في مشروعك</h2> + +<p dir="rtl">هناك خرافة عن الإتاحة تقول أنَّها مزيّة زائدة وتعتبر "كنوع من الرفاهيّة" لتضيفها لمشروعك. حقيقةً، يُمكِن أن تكون هذه الخرافة صحيحة (بعض الصحة) إذا كنت:</p> + +<ul dir="rtl"> + <li>تحاول تضمين الإتاحة في موقع فيه عدد ضخم من المشاكل الإتاحيّة.</li> + <li>بدأت التفكير بالإتاحة والمشاكل المُتعلقة بها الموجودة في المشروع في مرحلة متأخرة.</li> +</ul> + +<p dir="rtl">بالرغم من ذلك، إن كنت واضعاً الإتاحة في عين الاعتبار منذ بداية عملك على المشروع، فسيكون الثمن الذي ستدفعه لجعل محتواك مُتاحاً بخساً إلى حدٍ ما.</p> + +<p dir="rtl">عندما تُخطِط لمشروعك، أضف عمليّة اختبار الإتاحة إلى منظومتك الاختباريّة (testing regime)، كما تفعل مع اختبار أي شريحة جماهيريّة مستهدفة مهمة (مثل متصفحات الهواتف وأسطح المكتب المُستهدفة)، اختبر الأمور باكراً وكثيراً (early and often)، يمكنك إجراء اختبارات مؤتمتة لاكتشاف المزايا الناقصة برمجياً (مثل نقصان <a href="/ar/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#البدائل_النصية">النص البديل</a> للصورة أو وجود نص سيء يصف الرابط - انظر إلى مقالة <a href="/ar/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#العلاقات_بين_العناصر_والسياق">العلاقات بين العناصر والسياق</a>)، وقم ببعض الاختبارات مع فئة المُستخدمين المُتضررة؛ لترى كيف تعمل ميزات الموقع المُعقدة معهم. على سبيل المقال:</p> + +<ul dir="rtl"> + <li>هل أداة التقاط التاريخ (date picker widget) تعمل جيداً عند مَن يستخدمون قارئات الشاشة؟</li> + <li>إن كان المُحتوى يُحدَث ديناميكياً، فهل يلاحظ المعوقين بصرياً ذلك؟</li> + <li>هل يمكن الوصول إلى الأزرار الرسوميّة في الموقع عبر لوحة المفاتيح والشاشات التي تعمل باللمس؟</li> +</ul> + +<p dir="rtl">يمكنك وينبغي عليك أن تبقى متيقظاً لتنتبه إلى المناطق في محتواك التي من المُحتمَل أن تَحصُل فيها أخطاءً ستحتاج للعمل عليها لجعها مُتاحة، وعليك أن تقوم بفحصها بعنايّة، وتفُكِر بحلول أو بدائِل. التعامل مع المحتوى النصي (كما سترى في المقالة التالية) سهل، ولكن ماذا عن الوسائط المتعددة، ورسوماتك ثلاثيّة الأبعاد؟ يجب عليك النظر إلى ميزانيّة مشروعك والتفكير بواقعيّة حول الحلول المتاحة لجعل محتوى مشروعك متاحاً. يمكنك الدفع مثلاً لتحويل جميع الوسائط المتعددة لديك إلى نصوص مكتوبة، هذا مُكلِف، ولكنه خيار وارد يُمكِن أن يُنجَز.</p> + +<p dir="rtl">كن واقعياً أيضاً. الحصول على إتاحة بنسبة 100% أمر مستحيل، ستجد دوماً شخص يعاني بعض المشاكل والصعوبات في التعامل مع موقعك، ولكن هذا يجب أن يكون حافزاً لتبذل أقصى ما في وسعك. إذا كنت تخطط لتضمين رسوم بيانية ثلاثيّة الأبعاد بواسطة مكتبة WebGL، فقد ترغب بإضافة جدول كبديل إتاحي يعرض البيانات في حالة عدم القدرة على قراءة الرسم البياني، أو قد ترغب بتضمين جدول فحسب وإزالة الرسم البياني، فالجدول يُمكِن استخدامه من قبل الجميع، كتابته أسهل، وأقل استهلاكاً للموارد، وسهل الصيانة والتعديل.</p> + +<p dir="rtl">من الناحية الأخرى، إذا كنت تعمل على معرض صور يعرض رسوم ثلاثيّة الأبعاد، فمن الغير عقلاني توقُّع أنَّ كل صورة ستكون متاحة بشكل تام للمعاقين بصرياً، فالموقع أصلاً يستهدف الأشخاص ذوي البصر السليم.</p> + +<p dir="rtl">لتُظهِر أنَّك مُهتم وقد فكرت في موضوع الإتاحة، انشر بياناً في موقع يشرح سياستك حيال الإتاحة، والخطوات التي اتخذتها لجعل الموقع مُتاحاً. إذا اشتكى أحدهم أنَّ موقعك فيه مشكلة إتاحيّة، حاول التحدث معه، كن صبوراً ومتعاطِفاً، وقم بخطوات حكيمة لمحاولة حل المشكلة.</p> + +<div class="note"> +<p dir="rtl"><strong>ملاحظة</strong>: تغطي مقالة <a href="/ar/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">التعامل مع المشاكل الإتاحيّة الشائعة</a> الأمور التي يجب اختبارها بشكل تفصيلي.</p> +</div> + +<p dir="rtl">مُلخَص الأفكار:</p> + +<ul dir="rtl"> + <li>ضع الإتاحة في عين الاعتبار منذ بداية عملك على المشروع، واختبر الأمور باكراً وكثيراً. كما كأي علّة أخرى، يصبح ثمن إصلاح المشاكل الإتاحيّة كبيراً عند إصلاحها لاحقاً.</li> + <li>ضع في ذهنك أنَّ الممارسات الإتاحيّة الجيدة تفيد الجميع، وليس فقط من لديهم إعاقات. على سبيل المثال، الشيفرة الدلاليّة الواضحة ليست مُساعدة لقارِئات الشاشة وحسب، وإنما تفيد في الأداء والسرعة، وبالتالي هذا مفيد للجميع، وخاصةً للذين يستخدمون الهواتف النقالة ولديهم صبيب ضعيف من اﻹنترنت.</li> + <li>انشر تقريراً عن الحالة الإتاحيّة لموقعك، واجعل من لديهم مشاكل يشاركون.</li> +</ul> + +<h2 dir="rtl" id="دروس_إرشاديّة_وقوانين_عن_الإتاحة">دروس إرشاديّة وقوانين عن الإتاحة</h2> + +<p dir="rtl">يوجد عدد ضخم من القوائم والدروس الإرشاديّة المُتاحة لتعليم إجراء الاختبارات الأساسية. نصيحتنا لك هي أن تتعلم الأمور التي تحتاجها، وأن تفهم الفكرة الأساسية من الدروس المهمة بالنسبة لك.</p> + +<ul dir="rtl"> + <li>كبداية، نشرت منظمة W3C وثيقة كبيرة وشديدة التفصيل تتضمن معايير دقيقة ومحددة للتقنيات المتوافقة (التي تعمل جيداً) مع الإتاحة. تدعى هذه الوثيقة <a href="https://www.w3.org/WAI/intro/wcag.php">بدليل إتاحة محتوى الويب</a> (WCAG- <a href="https://web.archive.org/web/20130531012633/http://www.utic.rnu.tn:80/wcag2.0">الترجمة العربيّة</a>). المعايير مفصولة إلى أربع فئات أساسية تحدد كيف من الممكن إجراء التوصيات بشكل مدروك (perceivable)، عملي (operable)، مفهوم (understandable)، ومتين (robust). المكان الأفضل للحصول على مقدمة خفيفة والبدأ بتعلم هذه الأشياء هو قسم <a href="https://www.w3.org/WAI/WCAG20/glance/Overview.html">توصيات WCAG بالمختصر</a> من موقع رابطة الويب العالمية (W3C). لا حاجة لحفظ تلك التوصيات عن ظهر قلب، كن متيقظاً فقط للمناطق المثيرة للقلق في موقعك، واستخدم تقنيات وأدوات متنوعة للتعامل مع الأمور الغير متوافقة مع معايير WCAG (انظر أدناه للمزيد من التفاصيل).</li> + <li>قد يكون لدى بلدك تشريعات قانونيّة حول الإتاحة يجب تطبيقها على المواقع التي تستهدف سكانها، <a href="http://www.section508.gov/content/learn">كالقسم 508 من قانون إعادة التأهيل</a> في الولايات المتحدة.</li> +</ul> + +<p dir="rtl">ففي حين أنَّ توصيات WCAG هي مجرد أدّلة إرشادية، قد يكون في دولتك قوانين حول الإتاحة في الويب، أو على الأقل قانون حول إتاحة الخدمات المنشورة للعامة (والتي قد تتضمن المواقع، الخدمات التلفزية... إلخ). من الجيد البحث عن قوانين بلدك المتعلقة بهذا الموضوع وتطبيقها. إن لم تبذل جهداً لتوافِق محتوى موقعك مع قوانين حكومتك، فقد تواجه مشاكل قانونيّة إن اشتكى أحد زوارك ذوي الإعاقات.</p> + +<p dir="rtl">قد يبدو هذا غريباً، ولكن الأمر بسيط، فكل ما عليك وضع الإتاحة كأمر ذو أولوية في عملية تطوير الويب (كما شُرِحَ سابقاً). إن كنت تشك في مصداقية ما نقول، يمكنك سؤال محامي مُختَص عن الأمر. لن نوفر المزيد من النصائح، فنحن لسنا برجال قانون.</p> + +<h2 dir="rtl" id="واجهات_برمجيّة_للإتاحة">واجهات برمجيّة للإتاحة</h2> + +<p dir="rtl">تستفيد المتصفحات من <strong>واجهات الإتاحة البرمجيّة</strong> (accessibility APIs) الخاصة (التي يوفرها نظام التشغيل الذي يعمل عليه المُتصفح) التي توفِر معلومات مفيدة للتقنيات المعاونة (assistive technologies)، تميل التقنيات المعاونة غالباً للاستفادة من المعلومات الدلاليّة (semantic information)، بالتالي، لا تتضمن هذه المعلومات أشياء تصميميّة، أو بيانات جافاسكربت. تُنظَم هذه المعلومات في شجرة معلوماتيّة تُسمى <strong>بالشجرة الإتاحيّة</strong> (accessibility tree).</p> + +<p dir="rtl">تتوافر في أنظمة التشغيل المختلفة واجهات إتاحيّة مختلفة، مثل:</p> + +<ul dir="rtl"> + <li>نظام ويندوز: MSAA/IAccessible ،UIAExpress ،IAccessible2</li> + <li>نظام ماك: AT-SPI</li> + <li>نظام أندرويد: Accessibility framework</li> + <li>نظام <span class="st">آي أو إس أو: </span>UIAccessibility</li> +</ul> + +<p dir="rtl">عندما تفشل المعلومات الدلاليّة الأصيلة الموفرة من قبل عناصر لغة ترميز النص الفائق من إيضاح الغرض، يمكنك تدعيمها بالمزايا المذكورة في توصيات WAI-ARIA، والتي تضيف معلومات دلاليّة إلى شجرة الإتاحة لتُحسِن التجربة الإتاحيّة. يمكنك تعلم المزيد حول تقنيّة WAI-ARIA في مقالة <a class="new" href="/ar/docs/Learn/Accessibility/WAI-ARIA_basics" rel="nofollow">أساسيات تقنيّة WAI-ARIA</a>.</p> + +<h2 dir="rtl" id="الخلاصة">الخلاصة</h2> + +<p dir="rtl">يبنغي على هذه المقالة أن تكون قد اعطتك لمحة مفيدة عن الإتاحة، عارضةً لك سبب أهميتها، شارحةً كيفيّة إضافتها إلى سير عملك. ينبغي أن تكون الآن متتوقاً (راغباً) لتعلم المزيد حول التفاصيل التي تجعل مواقعك مُتاحة، وسنبدأ بذلك في الفصل الثاني، حيث سنشرح سبب كون لغة ترميز النص الفائق (HTML) أساساً مهماً للإتاحة.</p> + +<p>{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}</p> + +<h2 dir="rtl" id="في_هذه_الوحدة_أيضاً">في هذه الوحدة أيضاً</h2> + +<ul dir="rtl"> + <li><a class="new" href="/ar/docs/Learn/Accessibility/What_is_accessibility" rel="nofollow">ما هي الإتاحة؟</a></li> + <li><a class="new" href="/ar/docs/Learn/Accessibility/HTML" rel="nofollow">أساسيات مهمة في لغة ترميز النص الفائق للعمل مع الإتاحة</a></li> + <li><a class="new" href="/ar/docs/Learn/Accessibility/CSS_and_JavaScript" rel="nofollow">أفضل الطرق لاستخدام صفحات الأنماط الانسيابية والجافاسكربت لإتاحة أفضل</a></li> + <li><a class="new" href="/ar/docs/Learn/Accessibility/WAI-ARIA_basics" rel="nofollow">أساسيات تقنيّة WAI-ARIA</a></li> + <li><a class="new" href="/ar/docs/Learn/Accessibility/Multimedia" rel="nofollow">الوسائط المُتاحة</a></li> + <li><a class="new" href="/ar/docs/Learn/Accessibility/Mobile" rel="nofollow">الإتاحة الخلويّة</a></li> + <li><a class="new" href="/ar/docs/Learn/Accessibility/Accessibility_troubleshooting" rel="nofollow">معالجة الأخطاء الإتاحيّة</a></li> +</ul> + +<dl> +</dl> diff --git a/files/ar/learn/common_questions/index.html b/files/ar/learn/common_questions/index.html new file mode 100644 index 0000000000..34df4764d6 --- /dev/null +++ b/files/ar/learn/common_questions/index.html @@ -0,0 +1,133 @@ +--- +title: أسئلة شائعة +slug: Learn/Common_questions +tags: + - أسئلة-شائعة + - صفحة هبوط + - ويب +translation_of: Learn/Common_questions +--- +<div>{{LearnSidebar}}</div> + +<p class="summary" dir="rtl">هذا القسم من منطقة التعلُّم (قسم التعلُّم) مُصمَم لتوفير أجوبة عن الأسئلة الشائعة، والتي ليست بالضرورة أن تكون جزءً جوهرياً من المسارات التعليميّة (مثل مقالات <a href="/ar/docs/Learn/HTML">لغة ترميز النص الفائق</a> و<a href="/ar/docs/Learn/CSS">صفحات الأنماط الانسيابية</a> التعليميّة). حيث أنَّ هذه المقالات صُمِمَت لتكون مُستقلة عن أي قسم آخر.</p> + +<h2 dir="rtl" id="كيف_يعمل_الويب">كيف يعمل الويب</h2> + +<p dir="rtl">يغطي هذا القسم آليات عمل الويب، الأسئلة المتعلقة بالمعلومات العامة حول نظام الويب وكيفيّة عمله.</p> + +<dl> + <dt> + <h3 dir="rtl" id="كيف_تعمل_الشابكة؟"><a href="/ar/docs/Learn/Common_questions/How_does_the_Internet_work">كيف تعمل الشابكة؟</a></h3> + </dt> + <dd dir="rtl"><strong>الشابكة</strong> (الإنترنت) هي العمود الفقري (اللبنة الأساسيّة) للويب، فهي البنيّة التقنيّة التحتيّة التي تجعل الإنترنت يعمل. كشرح بسيط، الشابكة هي شبكة ضخمة من الحواسيب تتواصل مع بعضها البعض. تناقش هذه المقالة كيفيّة عمل الشابكة بشكل تفصيلي بسيط.</dd> + <dt> + <h3 dir="rtl" id="ما_الفرق_بين_صفحة_الويب،_موقع_الويب،_خادم_الويب،_ومُحرِّك_البحث؟"><a href="/ar/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines">ما الفرق بين صفحة الويب، موقع الويب، خادم الويب، ومُحرِّك البحث؟</a></h3> + </dt> + <dd dir="rtl">تشرح هذه المقالة مفاهيم متنوعة متعلقة بعمل الويب، وهي: الصفحات، المواقع، خوادم الويب، ومحرِّكات البحث. غالباً ما تُستخدَم هذه المصطلحات بشكل خاطئ، أو تُشتت القادمين الجدد إلى المجال. دعنا نتعرَّف على كل مصطلحٍ منهم في هذا المقال.</dd> + <dt> + <h3 dir="rtl" id="ما_هو_الرابط؟"><a href="/ar/docs/Learn/Common_questions/What_is_a_URL">ما هو الرابط؟</a></h3> + </dt> + <dd dir="rtl">بجانب {{Glossary("Hypertext", "النصوص الفائقة")}} و{{Glossary("HTTP", "ميثاق نقل النص الفائق")}}، يعد الرابط (URL) أحد المفاهيم الأساسيّة في الويب. فهو آلية تستخدمها {{Glossary("Browser","المُتصفحات")}} للنفاذ لأي مورِد منشور على الويب.</dd> + <dt> + <h3 dir="rtl" id="ما_هو_اسم_النطاق؟"><a href="/ar/docs/Learn/Common_questions/What_is_a_domain_name">ما هو اسم النطاق؟</a></h3> + </dt> + <dd dir="rtl">أسماء النطاقات هي جزء أساسي من البنيّة التحتيّة للشابكة. فهي توفِر عناوين مقروءة بشرياً لخوادم الويب الموجودة على الإنترنت.</dd> + <dt> + <h3 dir="rtl" id="ما_هو_خادم_الويب؟"><a href="/ar/docs/Learn/Common_questions/What_is_a_web_server">ما هو خادم الويب؟</a></h3> + </dt> + <dd dir="rtl"> + <p>يُمكِن أن يشير مُصطلَح "خادم الويب (Web Server)" إلى برمجيّة أو جهاز يقوم بإرسال المواقع، أو لكلاهما عندما يعملان معاً. سنتعرف في هذه المقالة على ماهيّة خوادم الويب، كيفيّة عملها، وأهميتها.</p> + </dd> + <dt> + <h3 dir="rtl" id="ما_هي_الوصلات؟"><a href="/ar/docs/Learn/Common_questions/What_are_hyperlinks">ما هي الوصلات؟</a></h3> + </dt> + <dd dir="rtl">سنتعرف في هذه المقالة على ماهيّة الوصلات (hyperlinks) وأهميتها.</dd> +</dl> + +<h2 dir="rtl" id="الإعداد_والأدوات">الإعداد والأدوات</h2> + +<p dir="rtl">يحوي هذا القسم الأسئلة المتعلقة بالبرمجيات والأدوات التي يمكنك استخدامها لبناء موقعك.</p> + +<dl> + <dt> + <h3 dir="rtl" id="كم_يكلِف_إنشاء_شيء_ما_على_الويب؟"><a class="new" href="/ar/docs/Learn/How_much_does_it_cost" rel="nofollow">كم يكلِف إنشاء شيء ما على الويب؟</a></h3> + </dt> + <dd dir="rtl">عندما تنشر مشروعك، قد لا تُنفِق شيء أو قد تصل التكلفة إلى مستوى عالٍ جداً. سنناقش في هذه المقالة تكلفة كل شيء وما تحصَل عليه مقابل ما تدفعه (وما لا تدفعه).</dd> + <dt> + <h3 dir="rtl" id="ما_البرمجيات_التي_احتاجها_لبناء_موقع؟"><a href="/ar/docs/Learn/Common_questions/What_software_do_I_need">ما البرمجيات التي احتاجها لبناء موقع؟</a></h3> + </dt> + <dd dir="rtl">سنشرح في هذه المقالة البرمجيات التي تحتاجها عندما تقوم بتعديل، رفع (تحميل)، أو عرض موقعك.</dd> + <dt> + <h3 dir="rtl" id="ما_هي_محررات_النصوص_المتوفرة؟"><a href="/ar/docs/Learn/Common_questions/Available_text_editors">ما هي محررات النصوص المتوفرة؟</a></h3> + </dt> + <dd dir="rtl">سنُعنوِن في هذه المقالة بعض الأشياء التي عليك التمهل والتفكير حولها عندما تقوم بتثبيت محرر نصوص لاستخدامه في تطوير الويب.</dd> + <dt> + <h3 dir="rtl" id="ما_هي_أدوات_المطورين_في_المُتصفِح؟"><a href="/ar/docs/Learn/Common_questions/What_are_browser_developer_tools">ما هي أدوات المطورين في المُتصفِح؟</a></h3> + </dt> + <dd dir="rtl">يوفِر كل {{ glossary("browser", "مُتصفِح") }} مجموعة من أدوات المطورين لتنقيح شيفرات لغة ترميز النص الفائق، صفحات الأنماط الانسيابية، وغيرها من اللغات الأخرى. تشرح هذه المقالة كيفيّة استخدام الوظائف الأساسيّة لأدوات المطورين في مُتصفِحك.</dd> + <dt> + <h3 dir="rtl" id="كيف_تتأكَّد_من_أنَّ_موقعك_يعمل_بشكل_سليم؟"><a href="/ar/docs/Learn/Common_questions/Checking_that_your_web_site_is_working_properly">كيف تتأكَّد من أنَّ موقعك يعمل بشكل سليم؟</a></h3> + </dt> + <dd dir="rtl">الآن، وبعد أن نشرت موقعك على الأنترنت (مبارك عليك هذا)، هل تأكَّدت من أنَّه يعمل بشكل سليم؟ توفر هذه المقالة بعض الخطوات الأساسيّة في عمليّة استكشاف اﻷخطاء وإصلاحها.</dd> + <dt> + <h3 dir="rtl" id="كيف_تقوم_بإعداد_خادم_اختبار_محلي؟"><a href="/ar/docs/Learn/Common_questions/set_up_a_local_testing_server">كيف تقوم بإعداد خادم اختبار محلي؟</a></h3> + </dt> + <dd> + <div> + <p dir="rtl">تشرح هذه المقالة كيف يمكنك إعداد خادم اختبار محلي بسيط على جهازك، كما تشرح بعض اساسيات استخدامه.</p> + </div> + </dd> + <dt> + <h3 dir="rtl" id="كيف_تقوم_برفع_ملفاتك_إلى_خادم_الويب؟"><a href="/ar/docs/Learn/Common_questions/Upload_files_to_a_web_server">كيف تقوم برفع ملفاتك إلى خادم الويب؟</a></h3> + </dt> + <dd dir="rtl">تُظهِر هذه المقالة الكيفيّة التي يمكنك استخدامها لنشر موقعك باستخدام أدوات {{ glossary("FTP", "ميثاق نقل الملفات") }}، وهي إحدى أكثر الأدوات شيوعاً التي تستخدم لوضع موقعك على الإنترنت ليتمكن الآخرون من الدخول إليه عبر حواسيبهم.</dd> + <dt> + <h3 dir="rtl" id="كيف_استخدم_خدمة_صفحات_جيتهاب؟"><a href="/ar/docs/Learn/Common_questions/Using_GitHub_Pages">كيف استخدم خدمة "صفحات جيتهاب"؟</a></h3> + </dt> + <dd dir="rtl">توفِر هذه المقالة دليل بسيط لعمليّة نشر المحتوى باستخدام خدمة "صفحات جيتهاب (Github pages)".</dd> + <dt> + <h3 dir="rtl" id="كيف_تستضيف_موقعك_على_مُحرِّك_تطبيقات_جوجل؟"><a href="/ar/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">كيف تستضيف موقعك على مُحرِّك تطبيقات جوجل؟</a></h3> + </dt> + <dd dir="rtl">أتبحث عن مكان لاستضافة موقعك؟ إليك هذا الدليل التدريجي لاستضافة موقعك على خدمة مُحرِّك تطبيقات جوجل (Google App Engine).</dd> + <dt> + <h3 dir="rtl" id="ما_الأدوات_المتوفرة_لتنقيح_وتحسين_أداء_الموقع؟"><a href="/ar/docs/Tools/Performance">ما الأدوات المتوفرة لتنقيح وتحسين أداء الموقع؟</a></h3> + </dt> + <dd dir="rtl">تُظهِر لك مجموعة المقالات هذه طريقة استخدام أدوات المطورين في فايرفوكس لتنقيح وتحسين أداء موقعك، استخدام الأدوات لفحص استخدام الذاكرة، شجرة استدعاءات الجافاسكربت (JavaScript call tree)، وكميّة عقد DOM المعروضة، والمزيد من الأمور.</dd> +</dl> + +<h2 dir="rtl" id="التصميم_والإتاحة">التصميم والإتاحة</h2> + +<p dir="rtl">يسرُد هذا القسم الأسئلة المتعلقة بالأمور الجماليّة، تنظيم الصفحات، وتقنيات الإتاحة (accessibility) ...إلخ.</p> + +<dl> + <dt> + <h3 dir="rtl" id="كيف_أبدأ_تصميم_موقعي؟"><a href="/ar/docs/Learn/Common_questions/Thinking_before_coding">كيف أبدأ تصميم موقعي؟</a></h3> + </dt> + <dd dir="rtl">تغطي هذه المقالة جميع الجوانب المهمة للخطوة الأوليّة المهمة لكل مشروع وهي تحديد الغايّة التي تريد تحقيقها من خلاله.</dd> + <dt> + <h3 dir="rtl" id="ماذا_تحوي_نماذج_الويب_الشائعة؟"><a href="/ar/docs/Learn/Common_questions/Common_web_layouts">ماذا تحوي نماذج الويب الشائعة؟</a></h3> + </dt> + <dd dir="rtl">عند تصميم صفحات موقعك، من الجيد الحصول على فكرة عن أكثر النماذج (layouts) شيوعاً. تغطي هذه المقالة بعض نماذج الويب الشائعة، وتشرح الأجزاء المكوِّنة لكل نموذج منها.</dd> + <dt> + <h3 dir="rtl" id="ما_هي_الإتاحة؟"><a href="/ar/docs/Learn/Common_questions/What_is_accessibility">ما هي الإتاحة؟</a></h3> + </dt> + <dd dir="rtl">توفِر هذه المقالة مقدمة عن المفاهيم الأساسية للإتاحة.</dd> + <dt> + <h3 dir="rtl" id="كيف_يمكننا_إنشاء_تصميم_لجميع_أنواع_المُستخدمين؟"><a href="/ar/docs/Learn/Common_questions/Design_for_all_types_of_users">كيف يمكننا إنشاء تصميم لجميع أنواع المُستخدمين؟</a></h3> + </dt> + <dd dir="rtl">توفِر هذه المقالة بعض التقنيات البسيطة التي تساعد على تصميم مواقع لجميع أنواع المُستخدمين، حيث تحتوي على تكتيكات سريعة للإتاحة، وأمور أخرى مشابهة.</dd> + <dt> + <h3 dir="rtl" id="ما_هي_مميزات_لغة_ترميز_النص_الفائق_المُعزِّزة_للإتاحة؟"><a href="/ar/docs/Learn/Common_questions/HTML_features_for_accessibility">ما هي مميزات لغة ترميز النص الفائق المُعزِّزة للإتاحة؟</a></h3> + </dt> + <dd dir="rtl">تشرح هذه المقالة ميزات لغة ترميز النص الفائقة التي يُمكِن أن تُستخدَم لجعل صفحات الويب مُتاحة بشكل أكبر للأشخاص الذين يعانون من إعاقات مختلفة.</dd> +</dl> + +<h2 dir="rtl" id="أسئلة_عن_لغة_ترميز_النص_الفائق،_صفحات_الأنماط_الانسيابية،_والجافاسكربت">أسئلة عن لغة ترميز النص الفائق، صفحات الأنماط الانسيابية، والجافاسكربت</h2> + +<p dir="rtl">للحصول على حلول شائعة للمشاكل التي تصادفك في لغة ترميز النص الفائق (HTML)، صفحات الأنماط الانسيابية (CSS)، والجافاسكربت، أقرأ المقالات التالية:</p> + +<ul dir="rtl"> + <li><a href="/ar/docs/Learn/HTML/Howto">استخدام لغة ترميز النص الفائق لحل المشاكل الشائعة</a></li> + <li><a href="/ar/docs/Learn/CSS/Howto">استخدام صفحات الأنماط الانسيابية لحل المشاكل الشائعة</a></li> + <li><a href="/ar/docs/Learn/JavaScript/Howto">استخدام لغة الجافاسكربت لحل المشاكل الشائعة</a></li> +</ul> diff --git a/files/ar/learn/common_questions/what_is_a_web_server/index.html b/files/ar/learn/common_questions/what_is_a_web_server/index.html new file mode 100644 index 0000000000..f08c4cf37c --- /dev/null +++ b/files/ar/learn/common_questions/what_is_a_web_server/index.html @@ -0,0 +1,118 @@ +--- +title: ما هو خادم الويب؟ +slug: Learn/Common_questions/What_is_a_web_server +tags: + - مبتدئين +translation_of: Learn/Common_questions/What_is_a_web_server +--- +<div class="summary"> +<p dir="rtl"><span class="seoSummary">سنتعرف في هذه المقالة على ماهيّة خوادم الويب، كيفيّة عملها، وأهميتها.</span></p> +</div> + +<table class="learn-box standard-table" dir="rtl"> + <tbody> + <tr> + <th dir="rtl" scope="row">المتطلبات:</th> + <td dir="rtl">يجب أن تكون على علم مُسبَق <a href="/ar/docs/Learn/How_the_Internet_works">بكيفيّة عمل الإنترنت</a>، ومُتفَهِماً <a href="/ar/docs/Learn/page_vs_site_vs_server_vs_search_engine">الفرق بين صفحة الويب، الموقع، خادم الويب، ومُحرِّك البحث</a>.</td> + </tr> + <tr> + <th dir="rtl" scope="row">الهدف:</th> + <td dir="rtl">ستتعلم ماهيّة خوادم الويب وستحصل على فهم عام لكيفيّة عملها.</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="الخلاصة">الخلاصة</h2> + +<p dir="rtl">يُمكِن أن يشير مُصطلَح "خادم الويب (Web Server)" إلى برمجيّة أو جهاز، أو لكلاهما عندما يعملان معاً.</p> + +<ol dir="rtl"> + <li>خادم الويب (كجهاز) هو حاسوب يُخزِّن برمجيّة خادم الويب والملفات المكوِّنة للموقع (مثل ملفات {{ glossary("HTML", "لغة ترميز النص الفائق") }}، الصور، ملفات {{ glossary("CSS", "صفحات الأنماط الانسيابية") }}، وملفات الجافاسكربت). يتصِل هذا الخادم بالشابكة (الإنترنت) ويدعم التبادل المادي للبيانات مع الأجهزة الأخرى المتصلة بالويب.</li> + <li>خادم الويب (كبرمجيّة) يتضمن أجزاء عدَّة تتحكم بطريق وصول مُستخدمين الويب للملفات المُستضافة، يتضمن على الأقل <em>خادم ميثاق نقل النص الفائق</em> (HTTP Server). خادم ميثاق نقل النص الفائق هو جزء من برمجيّة تفهم {{Glossary("URL","الروابط")}} (عناوين الويب) و{{Glossary("HTTP", "ميثاق نقل النص الفائق")}} (ميثاق يستخدمه مُتصفِحُك لعرض صفحات الويب). يُمكِن الوصول لهذا الخادم عبر أسماء نطاقات الموقع (مثل <code>mozilla.org</code>) التي يُخزِنها، والوصول للمحتوى الذي تقدمه لأجهزة مستخدميها.</li> +</ol> + +<p dir="rtl">كشرح بسيط جداً، كلما احتاج المُتصفِح ملفاً مُستضافاً على خادم ويب، يطلب المُتصفِح الملف عبر ميثاق نقل النص الفائق (HTTP). عندما يصل الطلب لخادم الويب المطلوب (الجهاز)، يقبل خادم <em>ميثاق نقل النص الفائق</em> (البرمجيّة) هذا الطلب، ويبحث عن الملف المطلوب (إن لم يكن موجوداً، سيعيد الخادم رمز الحالة <a href="/ar/docs/Web/HTTP/Status/404">404</a>)، ثم يُعيدُه بواسطة ميثاق نقل النص الفائق إلى المُتصفِح.</p> + +<p><img alt="تمثيل بسيط للإتصال بين الخادم والعميل بواسط ميثاق نقل النص الفائق" src="https://mdn.mozillademos.org/files/15901/Client-Server-Model-Arabic.svg"></p> + +<p dir="rtl">تحتاج إما لخادم ويب ساكن (static) أو ديناميكي (dynamic) لنشر موقعك.</p> + +<p dir="rtl">يتألَّف <strong>خادم الويب الساكن</strong> من حاسب (الجهاز) وميثاق نقل النص الفائق (البرمجيّة). نُسمي هذا النوع من الخوادم "ساكناً" لأنَّه يُرسِل الملف المُستضاف كما هو إلى مُتصفِحك.</p> + +<p dir="rtl">يتألَّف <strong>خادم الويب الديناميكي</strong> من خادم ويب ساكن وبرمجيات إضافيّة، أكثرها شعبيّة <em>خادم التطبيق</em> (application server) و<em>قاعدة البيانات</em>. نُسمي هذا النوع من الخوادم "ديناميكياً" لأنَّ خادم التطبيق يُحدِّث الملفات المُستضافة قبل إرسالها إلى مُتصفِحك بواسطة خادم ميثاق نقل النص الفائق.</p> + +<p dir="rtl">على سبيل المثال، لإنتاج الصفحات النهائيّة التي تراها في مُتصفِحك، قد يملأ خادم التطبيق قالب لغة ترميز النص الفائق ببعض المحتويات من قاعدة البيانات. مواقع مثل شبكة مطوري موزيلا (MDN) والموسوعة الحرَّة (ويكيبيديا) تملك آلاف الصفحات، ولكنها ليست مستندات لغة ترميز نص فائق فعليّة، وإنما بضعة قوالب وقاعدة بيانات ضخمة. هذه الطريقة تجعل من السهل والسريع صيانة وتسليم المحتوى.</p> + +<h2 dir="rtl" id="التعلم_النشط">التعلم النشط</h2> + +<p dir="rtl">لا يوجد بعد قسم تعلم نشط في هذه الصفحة. <em>الرجاء <a href="/ar/docs/MDN/Getting_started">النظر في المُساهمة</a></em>.</p> + +<h2 dir="rtl" id="الشرح_بتعمُق">الشرح بتعمُق</h2> + +<p dir="rtl">لجلب الصفحات، كما ذكرنا مُسبقاً، يقوم مُتصفحك بإرسال طلب إلى خادم الويب، الذي يقوم بالبحث عن الملف المطلوب في مساحته التخزينيّة. حالما يجد الملف، يقوم الخادم بقراءته، معالجته حسب الحاجة، ومن ثم إرساله إلى المُتصفِح. دعنا نُلقي نظرة على هذه الخطوات بتعمُق أكبر.</p> + +<h3 dir="rtl" id="استضافة_الملفات">استضافة الملفات</h3> + +<p dir="rtl">على خادم الويب أولاً تخزين ملفات الموقع، أي جميع مستندات لغة ترميز النص الفائق وأصولها (assets)، بما فيها الصور، ملفات صفحات الأنماط الانسيابية، ملفات الجافاسكربت، الخطوط، والفيديوهات.</p> + +<p dir="rtl">تقنياً، يمكنك استضافة كل تلك الملفات على حاسبك الشخصي، ولكنه من الأكثر ملائمة تخزينهم في خادم ويب مخصص:</p> + +<ul dir="rtl"> + <li>يعمل طوال الوقت.</li> + <li>مُتصل بالإنترنت دوماً.</li> + <li>يملك عنوان الشبكة (IP) ثابِت (لا توفِر جميع {{Glossary("ISP", "مزودات الخدمة")}} عناوين شبكة ثابتة للخطوط المنزليّة).</li> + <li>تتم صيانته من قبل مزوِّد خارجي.</li> +</ul> + +<p dir="rtl">تبعاً لكل تلك الاسباب، إيجاد مزوِّد استضافة جيد هو جزء رئيسي من عمليّة بناء موقعك. ابحث بين عروض الشركات الخدميّة المتنوعة واختر العرض المناسب لاحتياحاتك وميزانيتك (تترواح أسعار الخدمات من المجان إلى الألف دولار في الشهر). يمكنك إيجاد المزيد من التفاصيل في <a href="/ar/Learn/How_much_does_it_cost#Hosting">هذه المقالة</a>.</p> + +<p dir="rtl">حالما تنتهي من إعداد استضافة الويب، سيكون عليك <a href="/ar/docs/Learn/Upload_files_to_a_web_server">رفع (تحميل) ملفاتك إلى خادم الويب</a>.</p> + +<h3 dir="rtl" id="التواصل_عبر_ميثاق_نقل_النص_الفائق">التواصل عبر ميثاق نقل النص الفائق</h3> + +<p dir="rtl">ثانياً، يوفِر خادم الويب دعماً {{Glossary("HTTP", "لميثاق نقل النص الفائق")}}. كما يوضِح اسمه، يحدد هذا الميثاق كيفيّة نقل النص الفائق (أي مستندات الويب المُرتَبِطة) بين حاسوبين.</p> + +<p dir="rtl">{{Glossary("Protocol", "الميثاق")}} (البروتوكول) هو مجموعة من القواعد التي تحدد كيفيّة تواصل حاسوبين مع بعضهما. يعد ميثاق نقل النص الفائق ميثاقاً نصيّاً (textual) وعديم الحالة (stateless).</p> + +<dl> + <dt dir="rtl">ميثاق نصي</dt> + <dd dir="rtl">أي أنَّ جميع الأومر نصيّة ومقروءة من قبل البشر (غير مُشفَرة أو معماة).</dd> + <dt dir="rtl">عديم الحالة</dt> + <dd dir="rtl">لا الخادم أو العميل يتذكر عمليّة التواصل السابقة. على سبيل المثال، بالإعتماد على ميثاق نقل النص الفائق وحسب، لن يكون الخادم قادراً على تذكر كلمة المرور التي أدخلتها، أو الخطوة التي أنت فيها في عمليّة التسجيل. تحتاج إلى خادم تطبيق لإنجاز هذه الأمور. (سنغطي نوع التقنيات هذا في مقالات مستقبليّة).</dd> +</dl> + +<p dir="rtl">يوفِر ميثاق نقل النص الفائق قواعد واضحة للكيفيّة التي يتواصل بها الخادم والعميل. سنغطي الأمور المتعلقة بالميثاق ذاته في <a href="/ar/docs/Web/HTTP">مقالة تقنيّة مرجعيّة</a> لاحقاً. حالياً عليك أن تعلم هذه الأمور وحسب:</p> + +<ul dir="rtl"> + <li>فقط <em>العميل</em> يمكنه إرسال الطلبات، <em>وللخادِم</em> وحسب. يُمكن للخوادم فقط <em>الرد</em> على طلبات <em>العميل</em>.</li> + <li>عندما يتم طلب ملف عبر ميثاق نقل النص الفائق، على العميل إرسال {{Glossary("URL", "رابط")}} الملف.</li> + <li>على خادم الويب <em>الإجابة</em> (لا خيار آخر) على كل طلب يأتيه، على الأقل عليه أن يرسل رسالة الخطأ.</li> +</ul> + +<p dir="rtl"><a href="https://developer.mozilla.org/en-US/404"><img alt="صفحة الحطأ 404 لشبكة مطوري موزيلا كمثال على صفحة خطأ" src="https://mdn.mozillademos.org/files/15900/404.png" style="float: left; height: 203px; width: 336px;"></a>في خادم الويب، يكون خادم ميثاق نقل النص الفائق مسؤولاً عن معالجة والإجابة على الطلبات الآتية.</p> + +<ol dir="rtl"> + <li>عند تلقي طلب، يقوم خادم ميثاق نقل النص الفائق بدايةً بالتحقق مما إذا كان رابط الملف المطلوب موجوداً.</li> + <li>إن كان كذلك، يُرسِل خادم الويب محتوى الملف إلى المُتصفِح. إن لم يكن، يقوم خادم التطبيق ببناءه (عندما يكون المحتوى ديناميكياً لا تُمثِل جميع الصفحات ملفاتاً، لذلك يبني خادم التطبيق الملف المطلوب من قالب آخر).</li> + <li>إن لم تكن كلتا العمليتين ممكنتين، يُرسِل خادم الويب رسالة خطأ إلى المُتصفِح، أكثر تلك الرسائل شيوعاً هي "404 غير موجود" (هذا الخطأ شائع لأنَّ الكثير من مصممي الويب يقضون وقتاً لتصميم <a href="http://www.404notfound.fr/">صفحة الخطأ 404</a>).</li> +</ol> + +<h3 dir="rtl" id="المحتوى_الساكن_والديناميكي">المحتوى الساكن والديناميكي</h3> + +<p dir="rtl">بشكل تقريبي، يُمكِن للخادم إما أن يُرسِل محتوى ساكناً أو ديناميكياً. يعني المُصطلَح "ساكن (Static)" أنَّ المحتوى "يُرسَل كما هو (served as-is)". المحتويات الساكنة هي الأكثر سهولةً في الإعداد، لذلك ننصحك بأن يكون أوَّل موقع لك ساكناً.</p> + +<p dir="rtl">يعني المُصطلَح "ديناميكي (Dynamic)" أنَّ الخادِم يعالِج المحتوى أو حتى يولِّده كاملاً من قاعدة البيانات. يوِفِر هذا حل أكثر مرونة، ولكن الجانب التقني يصبح التعامُل معه أكثر صعوبة، مما يجعل بناء الموقع أكثر صعوبة بمقدار كبير.</p> + +<p dir="rtl">لنأخذ الصفحة التي تقرأها الآن على سبيل المثال. على خادم الويب المُستضيف للموقع، يوجد خادم تطبيق يأخذ محتوى المقالة من قاعدة بيانات، ينسِقَهُ، يَضَعُهُ بداخل بعض القوالب، ومن ثم يرسِل لك النتائج. في مثالنا هذا، اسم خادم التطبيق هو <a href="/ar/docs/MDN/Kuma">كوما</a> (Kuma) وهو مبني بواسطة <a href="https://www.python.org/">بايثون</a> (باستخدام إطار <a href="https://www.djangoproject.com/">جانغو</a>). قام فريق موزيلا ببناء كوما وفقاً لاحتياجات الشبكة، ولكن توجد العديد من التطبيقات الأخرى المشابهة مبنيّة على العديد من التقنيات الأخرى.</p> + +<p dir="rtl">توجد العديد من خوادم التطبيقات مما يجعل من الصعب اقتراح واحد. تلبي بعض خوادم التطبيقات احتياجات فئة معينة من التطبيقات مثل المدونات، الموسوعات (wiki)، أو مواقع التسوق الإلكترونيّة، وأُخرى تدعى {{Glossary("CMS", "أنظمة إدارة المحتوى")}} (CMS) وهي أكثر عموميّة. إن كنت تبني موقعاً ديناميكياً، تمهل قليلاً لاختيار الأداة التي تناسب احتياجاتك. ما لم ترغب بتعلم بعض مهارات برمجة خوادم الويب (والذي يعد مجال مثير بحد ذاته!)، فأنت لا ترغَب بكتابة خادم تطبيق خاص بك. فهذا إعادة اختراع للعجلة!</p> + +<h2 dir="rtl" id="الخطوات_التالية">الخطوات التالية</h2> + +<p dir="rtl">الآن، وبمعرفتك لكيفيّة عمل خوادم الويب يمكنك:</p> + +<ul dir="rtl"> + <li>قراءة مقالة "<a href="/ar/docs/Learn/How_much_does_it_cost">كم يكلِف إنشاء شيء ما على الويب</a>"</li> + <li>تعلم المزيد حول <a href="/ar/docs/Learn/What_software_do_I_need">البرمجيات المتنوعة التي تحتاجها لبناء موقع</a></li> + <li>الانتقال إلى شيء عملي مثل <a href="/ar/docs/Learn/Upload_files_to_a_web_server">كيفيّة رفع الملفات إلى خادم الويب</a></li> +</ul> diff --git a/files/ar/learn/common_questions/كيفية_عمل/index.html b/files/ar/learn/common_questions/كيفية_عمل/index.html new file mode 100644 index 0000000000..2a3cd7e46f --- /dev/null +++ b/files/ar/learn/common_questions/كيفية_عمل/index.html @@ -0,0 +1,116 @@ +--- +title: كيف يعمل الإنترنت؟ +slug: Learn/Common_questions/كيفية_عمل +tags: + - الإنترنت + - درس + - دليل + - مبتدأ +translation_of: Learn/Common_questions/How_does_the_Internet_work +--- +<blockquote> +<div>{{LearnSidebar}}</div> +</blockquote> + +<div class="summary" dir="rtl"> +<p>يتحدث هذا المقال عن اﻹنترنت وكيفية عملها.</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th dir="rtl"> + <p>لا يوجد، لكن حبذا لو تقرأ المقال الآتي أولا: <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Thinking_before_coding">كيف أبدأ بتصميم موقعي</a>.</p> + </th> + <td dir="rtl"> + <p><strong>متطلبات:</strong></p> + </td> + </tr> + <tr> + <th dir="rtl"> + <p>سوف تتعلم الأساسيات التقنية للبنية التحتية للويب والفرق بين الشابكة (الإنترنت) والويب.</p> + </th> + <td dir="rtl"> + <p><strong>الهدف:</strong></p> + </td> + </tr> + </tbody> +</table> + +<p dir="rtl"></p> + +<h2 dir="rtl" id="ملخص">ملخص</h2> + +<p dir="rtl">الشابكة (الإنترنت) هي عماد الويب. والبنية التحتية التي جعلته ممكنا. وفي الأساس الإنترنت هي شبكة واسعة من الحواسيب التي تتواصل فيما بينها.</p> + +<p dir="rtl"><a href="https://ar.wikipedia.org/wiki/%D8%A5%D9%86%D8%AA%D8%B1%D9%86%D8%AA#%D8%A7%D9%84%D8%AA%D8%A7%D8%B1%D9%8A%D8%AE">تاريخ الإنترنت غير واضح تماما</a>. فقد بدأت في ستينات القرن الماضي كمشروع بحث للجيش الأمريكي، وبدعم العديد من الجامعات العمومية والشركات الخاصة تطورت إلى بنية تحتية عامة. التقانات المختلفة التي تدعم الإنترنت تطورت عبر الزمن، لكن الطريقة التي تعمل بها لم تتغير كثيرا: فالإنترنت هي طريقة اتصال الحواسيب مع بعضها وضمان أنه مهما حدث تبقى تلك الحواسيب متصلة.</p> + +<h2 dir="rtl" id="التعلم_الفعال">التعلم الفعال</h2> + +<ul dir="rtl"> + <li><a href="https://www.youtube.com/watch?v=7_LPdttKXPc">كيف تعمل الإنترنت في خمس دقائق</a>، فيديو لآرون تيتوس يشرح لك الأساسيات البسيطة للإنترنت.</li> +</ul> + +<h2 dir="rtl" id="نظرة_أعمق">نظرة أعمق</h2> + +<h3 dir="rtl" id="شبكة_بسيطة">شبكة بسيطة</h3> + +<p dir="rtl">عندما نرغب بجعل حاسوبين يتصلان ببعضهما، سنربطهما إما فيزيائيا (عادة ما يكون <a href="https://ar.wikipedia.org/wiki/%D9%83%D8%A8%D9%84_%D8%B9%D8%A8%D9%88%D8%B1_%D8%A5%D9%8A%D8%AB%D8%B1%D9%86%D8%AA">بكابل إيثرنت</a>) أو لاسلكيا (على سبيل المقال نظامي الوايفاي أو البلوتوث). جميع الحواسيب الحديثة تستطيع استعمال أي من هذه الارتباطات.</p> + +<div class="blockIndicator note"> +<p dir="rtl"> فيما تبقى من المقال سنتحدث فقط عن الكابلات الفيزيائية، لكن الشبكات اللاسلكية تعمل بنفس المبدأ.</p> +</div> + +<p><img alt="Two computers linked together" src="https://mdn.mozillademos.org/files/8441/internet-schema-1.png" style="height: 152px; width: 600px;"></p> + +<p dir="rtl">شبكة كهذه ليست محدودة بحاسوبين فحسب، يمكنك ربط حواسيب أخرى قدر ما تريد. لكن سرعان ما تصبح هذه الشبكة معقدة. مثلا لنقل أنك تريد ربط عشر حواسيب فستحتاج إلى 45 كابلا مع تسعة قوابس في كل حاسوب!</p> + +<p><img alt="Ten computers all together" src="https://mdn.mozillademos.org/files/8443/internet-schema-2.png" style="height: 576px; width: 600px;"></p> + +<p dir="rtl">لحل هذه المشكلة، يجب أن نربط كل حاسوب في الشبكة بحاسوب مصغر خاص يسمى <strong>روتر. </strong>هذا الروتر كعامل الإشارة في السكك الحديدية، لديه مهمة واحدة وهي ضمان وصول رسالة ما من حاسوب إلى الحاسوب المقصود الصحيح. لإرسال رسالة إلى الحاسوب B، على الحاسوب A أن يُرسل الرسالة إلى الروتر، الذي سيُوجهها بدوره إلى الحاسوب B ويضمن أن لا تُرسل إلى الحاسوب C مثلا.</p> + +<p dir="rtl">عند إضافة روتر إلى الشبكة من عشرة حواسيب، كل ما نحتاجه هو عشرة كابلات مع مقبس في كل حاسوب وروتر بعشرة مقابس.</p> + +<p><img alt="Ten computers with a router" src="https://mdn.mozillademos.org/files/8445/internet-schema-3.png" style="height: 576px; width: 600px;"></p> + +<h3 dir="rtl" id="شبكة_من_الشبكات">شبكة من الشبكات</h3> + +<ul dir="rtl"> + <li>إلى هذا الحد جيد جداً<strong>، </strong>ولكن مذا عن ربط المئات<strong>، </strong>الآلاف<strong>، </strong>المليارات من أجهزة الكمبيوتر<strong>؟</strong> بالطبع لا يستطيع جهاز توجيه (<u><em><strong>router</strong></em></u>) واحد أن يصل إلى هذا الحد<strong>،</strong> لكن<strong>،</strong> إذا قرأت بعناية<strong>,</strong> قلنا أن جهاز التوجيه هو جهاز كمبيوتر مثل أي جهاز آخر<strong>، </strong>إذن ما الذي يمنعنا من توصيل جهازي توجيه معاً<strong>،</strong> لاشئ<strong>، </strong>لذلك دعونا نفعل ذلك<strong>.</strong></li> +</ul> + +<p><img alt="Two routers linked together" src="https://mdn.mozillademos.org/files/8447/internet-schema-4.png"></p> + +<ul dir="rtl"> + <li>عن طريق توصيل أجهزة الكمبيوتر بأجهزة التوجيه (<em><strong>router</strong></em>)<strong>،</strong> ثم أجهزة التوجيه إلى أجهزة التوجيه<strong>، </strong>نحن قادرون على التوسع إلى ما لا نهاية<strong>.</strong></li> +</ul> + +<p><img alt="Routers linked to routers" src="https://mdn.mozillademos.org/files/8449/internet-schema-5.png" style="height: 563px; width: 600px;"></p> + +<p>Such a network comes very close to what we call the Internet, but we're missing something. We built that network for our own purposes. There are other networks out there: your friends, your neighbors, anyone can have their own network of computers. But it's not really possible to set cables up between your house and the rest of the world, so how can you handle this? Well, there are already cables linked to your house, for example, electric power and telephone. The telephone infrastructure already connects your house with anyone in the world so it is the perfect wire we need. To connect our network to the telephone infrastructure, we need a special piece of equipment called a <em>modem</em>. This <em>modem</em> turns the information from our network into information manageable by the telephone infrastructure and vice versa.</p> + +<p><img alt="A router linked to a modem" src="https://mdn.mozillademos.org/files/8451/internet-schema-6.png" style="height: 340px; width: 600px;"></p> + +<p>So we are connected to the telephone infrastructure. The next step is to send the messages from our network to the network we want to reach. To do that, we will connect our network to an Internet Service Provider (ISP). An ISP is a company that manages some special <em>routers</em> that are all linked together and can also access other ISPs' routers. So the message from our network is carried through the network of ISP networks to the destination network. The Internet consists of this whole infrastructure of networks.</p> + +<p><img alt="Full Internet stack" src="https://mdn.mozillademos.org/files/8453/internet-schema-7.png" style="height: 1293px; width: 340px;"></p> + +<h3 id="Finding_computers">Finding computers</h3> + +<p>If you want to send a message to a computer, you have to specify which one. Thus any computer linked to a network has a unique address that identifies it, called an "IP address" (where IP stands for <em>Internet Protocol</em>). It's an address made of a series of four numbers separated by dots, for example: <code>192.168.2.10</code>.</p> + +<p>That's perfectly fine for computers, but we human beings have a hard time remembering that sort of address. To make things easier, we can alias an IP address with a human readable name called a <em>domain name</em>. For example, <code>google.com</code> is the domain name used on top of the IP address <code>173.194.121.32</code>. So using the domain name is the easiest way for us to reach a computer over the Internet.</p> + +<p><img alt="Show how a domain name can alias an IP address" src="https://mdn.mozillademos.org/files/8405/dns-ip.png" style="height: 160px; width: 330px;"></p> + +<h3 id="Internet_and_the_web">Internet and the web</h3> + +<p>As you might notice, when we browse the Web with a Web browser, we usually use the domain name to reach a website. Does that mean the Internet and the Web are the same thing? It's not that simple. As we saw, the Internet is a technical infrastructure which allows billions of computers to be connected all together. Among those computers, some computers (called <em>Web servers</em>) can send messages intelligible to web browsers. The <em>Internet</em> is an infrastructure, whereas the <em>Web</em> is a service built on top of the infrastructure. It is worth noting there are several other services built on top of the Internet, such as email and {{Glossary("IRC")}}.</p> + +<h2 id="Next_steps">Next steps</h2> + +<ul> + <li><a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">How the Web works</a></li> + <li><a href="/en-US/docs/Learn/page_vs_site_vs_server_vs_search_engine">Understanding the difference between a web page, a web site, a web server and a search engine</a></li> + <li><a href="/en-US/docs/Learn/Understanding_domain_names">Understanding domain names</a></li> +</ul> diff --git a/files/ar/learn/css/building_blocks/index.html b/files/ar/learn/css/building_blocks/index.html new file mode 100644 index 0000000000..8768d600eb --- /dev/null +++ b/files/ar/learn/css/building_blocks/index.html @@ -0,0 +1,90 @@ +--- +title: CSS building blocks +slug: Learn/CSS/Building_blocks +tags: + - Beginner + - CSS + - Learn + - NeedsTranslation + - TopicStub + - building blocks +translation_of: Learn/CSS/Building_blocks +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">This module carries on where <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a> left off — now you've gained familiarity with the language and its syntax, and got some basic experience with using it, its time to dive a bit deeper. This module looks at the cascade and inheritance, all the selector types we have available, units, sizing, styling backgrounds and borders, debugging, and lots more.</p> + +<p class="summary">The aim here is to provide you with a toolkit for writing competent CSS and help you understand all the essential theory, before moving on to more specific disciplines like <a href="/en-US/docs/Learn/CSS/Styling_text">text styling</a> and <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a>.</p> + +<h2 id="Prerequisites">Prerequisites</h2> + +<p>Before starting this module, you should have:</p> + +<ol> + <li>Basic familiarity with using computers, and using the Web passively (i.e. just looking at it, consuming the content.)</li> + <li>A basic work environment set up as detailed in <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a>, and an understanding of how to create and manage files, as detailed in <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a>.</li> + <li>Basic familiarity with HTML, as discussed in the <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module.</li> + <li>An understanding of the basics of CSS, as discussed in the <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a> module.</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: If you are working on a computer/tablet/another device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://glitch.com/">Glitch</a>.</p> +</div> + +<h2 id="Guides">Guides</h2> + +<p>This module contains the following articles, which cover the most essential parts of the CSS language. Along the way you'll come across plenty of exercises to allow you to test your understanding.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></dt> + <dd>The aim of this lesson is to develop your understanding of some of the most fundamental concepts of CSS — the cascade, specificity, and inheritance — which control how CSS is applied to HTML and how conflicts are resolved.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a></dt> + <dd>There are a wide variety of CSS selectors available, allowing for fine-grained precision when selecting elements to style. In this article and its sub-articles, we'll run through the different types in great detail, seeing how they work. The sub-articles are as follows: + <ul> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> + </ul> + </dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></dt> + <dd>Everything in CSS has a box around it, and understanding these boxes is key to being able to create layouts with CSS, or to align items with other items. In this lesson, we will take a proper look at the CSS <em>Box Model</em>, in order that you can move onto more complex layout tasks with an understanding of how it works and the terminology that relates to it.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></dt> + <dd>In this lesson we will take a look at some of the creative things you can do with CSS backgrounds and borders. From adding gradients, background images, and rounded corners, backgrounds and borders are the answer to a lot of styling questions in CSS.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></dt> + <dd>In recent years, CSS has evolved in order to better support different directionality of content, including right-to-left but also top-to-bottom content (such as Japanese) — these different directionalities are called <strong>writing modes</strong>. As you progress in your study and begin to work with layout, an understanding of writing modes will be very helpful to you, therefore we will introduce them in this article.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></dt> + <dd>In this lesson we will look at another important concept in CSS — <strong>overflow</strong>. Overflow is what happens when there is too much content to be contained comfortably inside a box. In this guide, you will learn what it is and how to manage it.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">CSS values and units</a></dt> + <dd>Every property used in CSS has a value or set of values that are allowed for that property. In this lesson, we will take a look at some of the most common values and units in use.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></dt> + <dd>In the various lessons so far you have come across a number of ways to size items on a web page using CSS. Understanding how big the different features in your design will be is important, and in this lesson, we will summarize the various ways elements get a size via CSS and define a few terms around sizing that will help you in the future.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></dt> + <dd>In this lesson we will take a look at how certain special elements are treated in CSS. Images, other media, and form elements behave a little differently in terms of your ability to style them with CSS than regular boxes. Understanding what is and isn't possible can save some frustration, and this lesson will highlight some of the main things that you need to know.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></dt> + <dd>Styling an HTML table isn't the most glamorous job in the world, but sometimes we all have to do it. This article provides a guide to making HTML tables look good, with some specific table styling techniques highlighted.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></dt> + <dd>Sometimes when writing CSS you will encounter an issue where your CSS doesn't seem to be doing what you expect. This article will give you guidance on how to go about debugging a CSS problem, and show you how the DevTools included in all modern browsers can help you find out what is going on.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></dt> + <dd>As you start to work on larger stylesheets and big projects you will discover that maintaining a huge CSS file can be challenging. In this article, we will take a brief look at some best practices for writing your CSS to make it easily maintainable, and some of the solutions you will find in use by others to help improve maintainability.</dd> +</dl> + +<h2 id="Assessments">Assessments</h2> + +<p>Want to test your CSS skills? The following assessments will test your understanding of the CSS covered in the guides above.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension">Fundamental CSS comprehension</a></dt> + <dd>This assessment tests your understanding of basic syntax, selectors, specificity, box model, and more.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">Creating fancy letterheaded paper</a></dt> + <dd>If you want to make the right impression, writing a letter on nice letterheaded paper can be a really good start. In this assessment, we'll challenge you to create an online template to achieve such a look.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes/A_cool_looking_box">A cool looking box</a></dt> + <dd>Here you'll get some practice in using background and border styling to create an eye-catching box.</dd> +</dl> + +<h2 id="See_also">See also</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Advanced_styling_effects">Advanced styling effects</a></dt> + <dd>This article acts as a box of tricks, providing an introduction to some interesting advanced styling features such as box shadows, blend modes, and filters.</dd> +</dl> diff --git a/files/ar/learn/css/building_blocks/selectors/index.html b/files/ar/learn/css/building_blocks/selectors/index.html new file mode 100644 index 0000000000..9bc86d8abc --- /dev/null +++ b/files/ar/learn/css/building_blocks/selectors/index.html @@ -0,0 +1,223 @@ +--- +title: CSS selectors +slug: Learn/CSS/Building_blocks/Selectors +translation_of: Learn/CSS/Building_blocks/Selectors +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</div> + +<p class="summary">In {{Glossary("CSS")}}, selectors are used to target the {{glossary("HTML")}} elements on our web pages that we want to style. There are a wide variety of CSS selectors available, allowing for fine-grained precision when selecting elements to style. In this article and its sub-articles we'll run through the different types in great detail, seeing how they work.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisites:</th> + <td>Basic computer literacy, <a href="/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">basic software installed</a>, basic knowledge of <a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">working with files</a>, HTML basics (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a>.)</td> + </tr> + <tr> + <th scope="row">Objective:</th> + <td>To learn how CSS selectors work in detail.</td> + </tr> + </tbody> +</table> + +<h2 id="What_is_a_selector">What is a selector?</h2> + +<p>You have met selectors already. A CSS selector is the first part of a CSS Rule. It is a pattern of elements and other terms that tell the browser which HTML elements should be selected to have the CSS property values inside the rule applied to them. The element or elements which are selected by the selector are referred to as the <em>subject of the selector</em>.</p> + +<p><img alt="Some code with the h1 highlighted." src="https://mdn.mozillademos.org/files/16550/selector.png" style="border: 1px solid #cccccc; height: 218px; width: 471px;"></p> + +<p>In earlier articles you met some different selectors, and learned that there are selectors that target the document in different ways — for example by selecting an element such as <code>h1</code>, or a class such as <code>.special</code>.</p> + +<p>In CSS, selectors are defined in the CSS Selectors specification; like any other part of CSS they need to have support in browsers for them to work. The majority of selectors that you will come across are defined in the <a href="https://www.w3.org/TR/selectors-3/">Level 3 Selectors specification</a>, which is a mature specification, therefore you will find excellent browser support for these selectors.</p> + +<h2 id="Selector_lists">Selector lists</h2> + +<p>If you have more than one thing which uses the same CSS then the individual selectors can be combined into a <em>selector list</em> so that the rule is applied to all of the individual selectors. For example, if I have the same CSS for an <code>h1</code> and also a class of <code>.special</code>, I could write this as two separate rules.</p> + +<pre class="brush: css notranslate"><code>h1 { + color: blue; +} + +.special { + color: blue; +} </code></pre> + +<p>I could also combine these into a selector list, by adding a comma between them.</p> + +<pre class="brush: css notranslate"><code>h1, .special { + color: blue; +} </code></pre> + +<p>White space is valid before or after the comma. You may also find the selectors more readable if each is on a new line.</p> + +<pre class="brush: css notranslate"><code>h1, +.special { + color: blue; +} </code></pre> + +<p>In the live example below try combining the two selectors which have identical declarations. The visual display should be the same after combining them.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} </p> + +<p>When you group selectors in this way, if any selector is invalid the whole rule will be ignored.</p> + +<p>In the following example, the invalid class selector rule will be ignored, whereas the <code>h1</code> would still be styled.</p> + +<pre class="brush: css notranslate"><code>h1 { + color: blue; +} + +..special { + color: blue; +} </code></pre> + +<p>When combined however, neither the <code>h1</code> nor the class will be styled as the entire rule is deemed invalid.</p> + +<pre class="brush: css notranslate"><code>h1, ..special { + color: blue; +} </code></pre> + +<h2 id="Types_of_selectors">Types of selectors</h2> + +<p>There are a few different groupings of selectors, and knowing which type of selector you might need will help you to find the right tool for the job. In this article's subarticles we will look at the different groups of selectors in more detail.</p> + +<h3 id="Type_class_and_ID_selectors">Type, class, and ID selectors</h3> + +<p>This group includes selectors that target an HTML element such as an <code><h1></code>.</p> + +<pre class="brush: css notranslate">h1 { }</pre> + +<p>It also includes selectors which target a class:</p> + +<pre class="brush: css notranslate">.box { }</pre> + +<p>or, an ID:</p> + +<pre class="brush: css notranslate">#unique { }</pre> + +<h3 id="Attribute_selectors">Attribute selectors</h3> + +<p>This group of selectors gives you different ways to select elements based on the presence of a certain attribute on an element:</p> + +<pre class="brush: css notranslate">a[title] { }</pre> + +<p>Or even make a selection based on the presence of an attribute with a particular value:</p> + +<pre class="brush: css notranslate">a[href="https://example.com"] { }</pre> + +<h3 id="Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</h3> + +<p>This group of selectors includes pseudo-classes, which style certain states of an element. The <code>:hover</code> pseudo-class for example selects an element only when it is being hovered over by the mouse pointer:</p> + +<pre class="brush: css notranslate">a:hover { }</pre> + +<p>It also includes pseudo-elements, which select a certain part of an element rather than the element itself. For example, <code>::first-line</code> always selects the first line of text inside an element (a <code><p></code> in the below case), acting as if a <code><span></code> was wrapped around the first formatted line and then selected.</p> + +<pre class="brush: css notranslate">p::first-line { }</pre> + +<h3 id="Combinators">Combinators</h3> + +<p>The final group of selectors combine other selectors in order to target elements within our documents. The following for example selects paragraphs that are direct children of <code><article></code> elements using the child combinator (<code>></code>):</p> + +<pre class="brush: css notranslate">article > p { }</pre> + +<h2 id="Next_steps">Next steps</h2> + +<p>You can take a look at the reference table of selectors below for direct links to the various types of selectors in this Learn section or on MDN in general, or continue on to start your journey by finding out about <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">type, class, and ID selectors</a>.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="Reference_table_of_selectors">Reference table of selectors</h2> + +<p>The below table gives you an overview of the selectors you have available to use, along with links to the pages in this guide which will show you how to use each type of selector. I have also included a link to the MDN page for each selector where you can check browser support information. You can use this as a reference to come back to when you need to look up selectors later in the material, or as you experiment with CSS generally.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Selector</th> + <th scope="col">Example</th> + <th scope="col">Learn CSS tutorial</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/en-US/docs/Web/CSS/Type_selectors">Type selector</a></td> + <td><code>h1 { }</code></td> + <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#Type_selectors">Type selectors</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Universal_selectors">Universal selector</a></td> + <td><code>* { }</code></td> + <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#The_universal_selector">The universal selector</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Class_selectors">Class selector</a></td> + <td><code>.box { }</code></td> + <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#Class_selectors">Class selectors</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/ID_selectors">id selector</a></td> + <td><code>#unique { }</code></td> + <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#ID_Selectors">ID selectors</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Attribute_selectors">Attribute selector</a></td> + <td><code>a[title] { }</code></td> + <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Pseudo-classes">Pseudo-class selectors</a></td> + <td><code>p:first-child { }</code></td> + <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-class">Pseudo-classes</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudo-element selectors</a></td> + <td><code>p::first-line { }</code></td> + <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-element">Pseudo-elements</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Descendant_combinator">Descendant combinator</a></td> + <td><code>article p</code></td> + <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators#Descendant_Selector">Descendant combinator</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Child_combinator">Child combinator</a></td> + <td><code>article > p</code></td> + <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators#Child_combinator">Child combinator</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Adjacent_sibling_combinator">Adjacent sibling combinator</a></td> + <td><code>h1 + p</code></td> + <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators#Adjacent_sibling">Adjacent sibling</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/General_sibling_combinator">General sibling combinator</a></td> + <td><code>h1 ~ p</code></td> + <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators#General_sibling">General sibling</a></td> + </tr> + </tbody> +</table> + +<h2 id="In_this_module">In this module</h2> + +<ol> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a> + <ul> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> + </ul> + </li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li> +</ol> diff --git a/files/ar/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html b/files/ar/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html new file mode 100644 index 0000000000..749f576534 --- /dev/null +++ b/files/ar/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html @@ -0,0 +1,119 @@ +--- +title: 'Type, class, and ID selectors' +slug: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors +translation_of: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors +--- +<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}</p> + +<p>In this lesson we will take a look at the simplest selectors that are available, which you will probably use the most in your work.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisites:</th> + <td>Basic computer literacy, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">basic software installed</a>, basic knowledge of <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">working with files</a>, HTML basics (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a>.)</td> + </tr> + <tr> + <th scope="row">Objective:</th> + <td>To learn about the different CSS selectors we can use to apply CSS to a document.</td> + </tr> + </tbody> +</table> + +<h2 id="Type_selectors">Type selectors</h2> + +<p>A <strong>type selector</strong> is sometimes referred to as a <em>tag name selector</em> or <em>element selector</em>, because it selects an HTML tag/element in your document. In the example below we have used the span, em and strong selectors. All instances of <code><span></code>, <code><em></code> and <code><strong></code> elements are therefore styled accordingly.</p> + +<p><strong>Try adding a CSS rule to select the <code><h1></code> element and change its color to blue.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/type.html", '100%', 1100)}}</p> + +<h2 id="The_universal_selector">The universal selector</h2> + +<p>The universal selector is indicated by an asterisk (<code>*</code>) and selects everything in the document (or inside the parent element if it is being chained together with another element and a descendant combinator). In the following example we have used the universal selector to remove the margins on all elements. This means that instead of the default styling added by the browser, which spaces out headings and paragraphs with margins, everything is close together and we can't see the different paragraphs easily.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/universal.html", '100%', 750)}}</p> + +<p>This kind of behavior can sometimes be seen in "reset stylesheets", which strips out all of the browser styling. Since the universal selector makes global changes, we use it to deal with very specific situations such as the one outlined below.</p> + +<h3 id="Using_the_universal_selector_to_make_your_selectors_easier_to_read">Using the universal selector to make your selectors easier to read</h3> + +<p>One use of the universal selector is to make selectors easier to read and more obvious in terms of what they are doing. For example, if I wanted to select the first child of any descendant element of <code><article></code> , no matter what element it was, and make it bold, I could use the {{cssxref(":first-child")}} selector, which we will learn more about in the lesson on <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">pseudo-classes and pseudo-elements</a>, as a descendant selector along with the <code><article></code> element selector: </p> + +<pre class="brush: css notranslate">article :first-child { + +}</pre> + +<p>This could be confused however with <code>article:first-child</code>, which will select any <code><article></code> element that is the first child of another element.</p> + +<p>To avoid this confusion we can add the universal selector to the <code>:first-child</code> selector, so it is obvious what the selector is doing. It is selecting <em>any</em> element which is the first-child of any descendant element of <code><article></code>:</p> + +<pre class="brush: css notranslate">article *:first-child { + +} </pre> + +<p>Although both do the same thing, the readability is significantly improved.</p> + +<h2 id="Class_selectors">Class selectors</h2> + +<p>The class selector starts with a full stop (<code>.</code>) character and will select everything in the document with that class applied to it. In the live example below we have created a class called <code>.highlight</code>, and have applied it to several places in my document. All of the elements that have the class applied are highlighted.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class.html", '100%', 750)}}</p> + +<h3 id="Targeting_classes_on_particular_elements">Targeting classes on particular elements</h3> + +<p>You can create a selector that will target specific elements with the class applied. In this next example we will highlight a <code><span></code> with a class of <code>highlight</code> differently to an <code><h1></code> heading with a class of <code>highlight</code>. We do this by using the type selector for the element I want to target, with the class appended using a dot, with no white space in between.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class-type.html", '100%', 750)}}</p> + +<p>This approach reduces the scope of a rule as the rule will only apply to that particular element & class combination; so you would need to add another selector if you decided the rule should apply to other elements too.</p> + +<h3 id="Target_an_element_if_it_has_more_than_one_class_applied">Target an element if it has more than one class applied</h3> + +<p>You can apply multiple classes to an element and target them individually, or only select the element when all of the classes in the selector are present. This can be helpful when building up components that can be combined in different ways on your site.</p> + +<p>In the example below we have a <code><div></code> that contains a note. The grey border is applied when the box has a class of <code>notebox</code>. If it also has a class of <code>warning</code> or <code>danger</code>, we change the {{cssxref("border-color")}}.</p> + +<p>We can tell the browser that we only want to match the element if it has two classes applied by chaining them together with no white space between them. You'll see that the last <code><div></code> doesn't get any styling applied, as it only has the <code>danger</code> class; it needs <code>notebox</code> as well to get anything applied.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class-many.html", '100%', 900)}}</p> + +<h2 id="ID_Selectors">ID Selectors</h2> + +<p>An ID selector begins with a <code>#</code> rather than a full stop character, but is basically used in the same way as a class selector. An ID however can be used only once per document. It can select an element that has the <code>id</code> set on it, and you can precede the ID with a type selector to only target the element if both the element and ID match. You can see both of these uses in the following example:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}}</p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: As we learned in the lesson on specificity, an ID has high specificity and will overrule most other selectors. This can make them difficult to deal with. In most cases it is preferable to add a class to the element rather than use an ID, however if using the ID is the only way to target the element — perhaps because you do not have access to the markup and so cannot edit it — this will work.</p> +</div> + +<h2 id="In_the_next_article">In the next article</h2> + +<p>We'll continue exploring selectors by looking at <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">attribute selectors</a>.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ol> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a> + <ul> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> + </ul> + </li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li> +</ol> diff --git a/files/ar/learn/css/css_layout/index.html b/files/ar/learn/css/css_layout/index.html new file mode 100644 index 0000000000..a0fadc9403 --- /dev/null +++ b/files/ar/learn/css/css_layout/index.html @@ -0,0 +1,77 @@ +--- +title: تخطيط التصميم في CSS +slug: Learn/CSS/CSS_layout +tags: + - Beginner + - CSS + - Floating + - Grids + - Guide + - Landing + - Layout + - Learn + - Module + - Multiple column + - NeedsTranslation + - Positioning + - TopicStub + - alignment + - flexbox + - float + - table +translation_of: Learn/CSS/CSS_layout +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">At this point we've already looked at CSS fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. Now it's time to look at how to place your boxes in the right place in relation to the viewport, and one another. We have covered the necessary prerequisites so we can now dive deep into CSS layout, looking at different display settings, modern layout tools like flexbox, CSS grid, and positioning, and some of the legacy techniques you might still want to know about.</p> + +<h2 id="Prerequisites">Prerequisites</h2> + +<p>Before starting this module, you should already:</p> + +<ol> + <li>Have basic familiarity with HTML, as discussed in the <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module.</li> + <li>Be comfortable with CSS fundamentals, as discussed in <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.</li> + <li>Understand how to <a href="/en-US/docs/Learn/CSS/Styling_boxes">style boxes</a>.</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Guides">Guides</h2> + +<p>These articles will provide instruction on the fundamental layout tools and techniques available in CSS. At the end of the lessons is an assessment to help you check your understanding of layout methods, by laying out a webpage.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></dt> + <dd>This article will recap some of the CSS layout features we've already touched upon in previous modules — such as different {{cssxref("display")}} values — and introduce some of the concepts we'll be covering throughout this module.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></dt> + <dd>Elements on webpages lay themselves out according to <em>normal flow</em> - until we do something to change that. This article explains the basics of normal flow as a grounding for learning how to change it.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></dt> + <dd><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">Flexbox</a> is a one-dimensional layout method for laying out items in rows or columns. Items flex to fill additional space and shrink to fit into smaller spaces. This article explains all the fundamentals.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grids</a></dt> + <dd>CSS Grid Layout is a two-dimensional layout system for the web. It lets you lay content out in rows and columns, and has many feature that make building complex layouts straightforward. This article will give you all you need to know to get started with page layout.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></dt> + <dd>Originally for floating images inside blocks of text, the {{cssxref("float")}} property became one of the most commonly used tools for creating multiple column layouts on webpages. With the advent of Flexbox and Grid it has now returned to its original purpose, as this article explains.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></dt> + <dd>Positioning allows you to take elements out of the normal document layout flow, and make them behave differently, for example sitting on top of one another, or always remaining in the same place inside the browser viewport. This article explains the different {{cssxref("position")}} values, and how to use them.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column layout</a></dt> + <dd>The multiple-column layout specification gives you a method of laying content out in columns, as you might see in a newspaper. This article explains how to use this feature.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy layout methods</a></dt> + <dd>Grid systems are a very common feature used in CSS layouts, and before CSS Grid Layout they tended to be implemented using floats or other layout features. You imagine your layout as a set number of columns (e.g. 4, 6, or 12), and then fit your content columns inside these imaginary columns. In this article we'll explore how these older methods work, in order that you understand how they were used if you work on an older project.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></dt> + <dd> + <p>In this module we recommend using Flexbox and Grid as the main layout methods for your designs. However there will be visitors to your site who use older browsers, or browsers which do not support the methods you have used. This will always be the case on the web — as new features are developed, different browsers will prioritise different things. This article explains how to use modern web techniques without locking out users of older technology.</p> + </dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension</a></dt> + <dd>An assessment to test your knowledge of different layout methods by laying out a webpage.</dd> +</dl> + +<h2 id="See_also">See also</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Practical positioning examples</a></dt> + <dd>This article shows how to build some real world examples to illustrate what kinds of things you can do with positioning.</dd> + <dt></dt> +</dl> diff --git a/files/ar/learn/css/first_steps/index.html b/files/ar/learn/css/first_steps/index.html new file mode 100644 index 0000000000..34b8e9fefb --- /dev/null +++ b/files/ar/learn/css/first_steps/index.html @@ -0,0 +1,46 @@ +--- +title: CSS first steps +slug: Learn/CSS/First_steps +translation_of: Learn/CSS/First_steps +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">CSS (Cascading Style Sheets) is used to style and lay out web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. This module provides a gentle beginning to your path towards CSS mastery with the basics of how it works, what the syntax looks like, and how you can start using it to add styling to HTML.</p> + +<h2 id="Prerequisites">Prerequisites</h2> + +<p>Before starting this module, you should have:</p> + +<ol> + <li>Basic familiarity with using computers, and using the Web passively (i.e. looking at it, consuming the content.)</li> + <li>A basic work environment set up as detailed in <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a>, and an understanding of how to create and manage files, as detailed in <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a>.</li> + <li>Basic familiarity with HTML, as discussed in the <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module.</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Guides">Guides</h2> + +<p>This module contains the following articles, which will take you through all the basic theory of CSS, and provide opportunities for you to test out some skills.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">What is CSS?</a></dt> + <dd><strong>{{Glossary("CSS")}}</strong> (Cascading Style Sheets) allows you to create great-looking web pages, but how does it work under the hood? This article explains what CSS is, with a simple syntax example, and also covers some key terms about the language.</dd> + <dt><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">Getting started with CSS</a></dt> + <dd>In this article we will take a simple HTML document and apply CSS to it, learning some practical things about the language along the way.</dd> + <dt><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">How CSS is structured</a></dt> + <dd>Now that you have an idea about what CSS is and the basics of using it, it is time to look a little deeper into the structure of the language itself. We have already met many of the concepts discussed here; you can return to this one to recap if you find any later concepts confusing.</dd> + <dt><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">How CSS works</a></dt> + <dd>We have learned the basics of CSS, what it is for and how to write simple stylesheets. In this lesson we will take a look at how a browser takes CSS and HTML and turns that into a webpage.</dd> + <dt><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Using your new knowledge</a></dt> + <dd>With the things you have learned in the last few lessons you should find that you can format simple text documents using CSS, to add your own style to them. This article gives you a chance to do that.</dd> +</dl> + +<h2 id="See_also">See also</h2> + +<dl> + <dt><a href="https://teach.mozilla.org/activities/intermediate-web-lit/">Intermediate Web Literacy 1: Intro to CSS</a></dt> + <dd>An excellent Mozilla foundation course that explores and tests a lot of the skills talked about in the <em>Introduction to CSS</em> module. Learn about styling HTML elements on a webpage, CSS selectors, attributes, and values.</dd> +</dl> diff --git a/files/ar/learn/css/index.html b/files/ar/learn/css/index.html new file mode 100644 index 0000000000..3a56c01335 --- /dev/null +++ b/files/ar/learn/css/index.html @@ -0,0 +1,63 @@ +--- +title: CSS +slug: Learn/CSS +tags: + - Beginner + - CSS + - CodingScripting + - Debugging + - Landing + - NeedsContent + - NeedsTranslation + - Topic + - TopicStub + - length + - specificity +translation_of: Learn/CSS +--- +<p class="summary" dir="rtl">الترجمة الحرفية للـ {{glossary("CSS")}} لن تفيدك كثيراً ولكن من باب العلم بها فمعناها (أوراق النمط المتعاقب)، لكن دعنا نتعرف أكثر ما هي الـ CSS وما الذي تقوم به، هي التقنية الأولى من تقنيات الويب التي يجب أن تبدأ بها رحلتك في تعلم تطوير الويب، في حين تقوم بإستخدام الـ HTML في إنشاء العناصر الأساسية للصفحة (هيكلة صفحة الويب)، تقوم بإستخدام الـ CSS في إضفاء الشكل الجمالي لصفحات الويب من خلال إضافة الألوان والمساحات وأماكن العناصر المختلفة، أو إضافة تأثيرات الحركة على بعض العناصر في صفحة الويب.</p> + +<h2 dir="rtl" id="مسار_التعلم_المتبع">مسار التعلم المتبع</h2> + +<p dir="rtl">يجب عليك تعلم اساسيات HTML أولاً قبل الشروع في تعلم الـ CSS، فكيف تقوم بإضافة الجماليات على صفحة ويب لم يتم إنشاءها بعد؟ لذلك ننصحك بتعمل أساسيات الـ HTML من هنا <a href="/ar/docs/Learn/HTML/Introduction_to_HTML">مقدمة في الـ HTML</a> بعد ذلك يمكنك تعلم:</p> + +<ul dir="rtl"> + <li>تبدأ بتعلم <a href="/ar/docs/Learn/HTML/Introduction_to_HTML">مقدمة في الـ CSS</a></li> + <li><a href="/ar/Learn/HTML#Modules">نماذج الـ HTML الأكثر تقدماً</a></li> + <li><a href="/ar/docs/Learn/JavaScript">جافاسكربت</a>، وكيف تقوم بإستخدامها في إضافة وظائف ديناميكية لصفحات الويب.</li> +</ul> + +<p dir="rtl">مباشرةً عندما تجد نفسك مستوعباً لأساسيات الـ HTML, ننصحك بتعلم الـ HTML والـ CSS بشكل متزامن (في نفس الوقت) لانك غالباً ستحتاج إلى تطوير نفسك في كليهما بشكل مستمر. وأيضاً لان الـ HTML شيقة في التعلم لسهولة تطبيقها خلال رحلة تعلمك، وستجد أنك تستوعبها سريعاً، وستجد أيضاً انها اكثر متعه عندما تقوم بتطبيق ما تعلمته من الـ CSS. وتذكر دائماً انك لن تستطيع تعلم الـ CSS بدون معرفة الـ HTML.</p> + +<p dir="rtl">قبل البداية في تعمل هذه التقنية، لابد من تعلم أساسيات التعامل مع الحاسب وإستخدام الويب، أيضاً لابد من تهيئة بيئة العمل التي تحتاجها لإنشاء صفحات الويب كما تم شرحها في<a href="/ar/docs/Learn/Getting_started_with_the_web/Installing_basic_software"> تنصيب البرامج المستخدمة في بيئة العمل</a>، وكيفية إنشاء وإدارة الملفات كما تم شرحنا في<a href="/ar/docs/Learn/Getting_started_with_the_web/Dealing_with_files"> التعامل مع الملفات</a>، هذين المقالين أجزاء من ملف شرح<a href="/ar/docs/Learn/Getting_started_with_the_web"> البداية في تعلم الويب</a> للمبتدئين.</p> + +<p dir="rtl">وننصحك أيضاً أن تقوم بتعلم<a href="/ar/docs/Learn/Getting_started_with_the_web"> البداية في تعلم الويب</a> قبل الشروع في هذا المقال، على كل حال هذا ليس ضرورياً للغاية، كثيرا مما تم شرحه في أساسيات CSS تم شرحه أيضاً في مقدمة CSS ولكن بشكل أكثر تفصيلاً.</p> + +<h2 dir="rtl" id="العناصر">العناصر</h2> + +<p dir="rtl">هذا الموضوع يحتوى على العناصر التالية، نقترح عليك أن تبدأ في تعلمهم بهذا الترتيب، ويجب عليك بشكل مؤكد أن تبدأ بالعنصر الأول لأهميته.</p> + +<dl> + <dt dir="rtl"><a href="/ar/docs/Learn/CSS/Introduction_to_CSS">مقدمة في CSS</a></dt> + <dd dir="rtl">في هذا الجزء سنبدأ في تعلم أساسيات كيفية عمل الـ CSS وسنقوم بشرح المحددات (Selectors) والخصائص (Properties) وكيفية كتاب قواعد الـ CSS وكيفية تطبيق CSS على عناصر HTML، كيف تحدد الطول واللون والوحدات الأخرى في CSS وسنقوم أيضاً بشرح وراثة القيم وأساسيات العناصر الأساسية في الصفحة (Box Model) وكيفية معالجة الأخطاء في CSS.</dd> + <dt dir="rtl"><a href="/ar/docs/Learn/CSS/Styling_text">تنسيق/شكل الخطوط</a></dt> + <dd dir="rtl">هنا ، ننظر إلى أساسيات تصميم النصوص ، بما في ذلك ضبط الخط ، السماكة ، والميول ; الخط والمسافات بين الحروف </dd> + <dd dir="rtl">هنا نلقي نظرة على أساسيات تصميم النص ، بما في ذلك تعيين الخط والخط الجريء والخط المائل وتباعد الأسطر والحروف والظلال المسقطة وميزات النص الأخرى. ننهي الوحدة من خلال النظر في تطبيق الخطوط المخصصة على صفحتك وقوائم التصميم والروابط.</dd> + <dt dir="rtl"><a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a></dt> + <dd dir="rtl">بعد ذلك ، نلقي نظرة على مربعات التصميم ، وهي إحدى الخطوات الأساسية نحو تخطيط صفحة الويب. في هذه الوحدة ، نلخص نموذج الصندوق ثم ننظر إلى التحكم في تخطيطات الصندوق عن طريق تعيين المساحة المتروكة والحدود والهوامش ، وتعيين ألوان خلفية مخصصة وصور وميزات أخرى ، وميزات فاخرة مثل الظلال المسقطة والمرشحات على الصناديق.</dd> + <dt dir="rtl"><a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a></dt> + <dd dir="rtl">في هذه المرحلة ، اطلعنا بالفعل على أساسيات CSS ، وكيفية تصميم النص ، وكيفية تصميم ومعالجة المربعات الموجودة في المحتوى الخاص بك. حان الوقت الآن للنظر في كيفية وضع مربعاتك في المكان المناسب بالنسبة إلى إطار العرض ، وبعضها البعض. لقد قمنا بتغطية المتطلبات الأساسية اللازمة حتى تتمكن الآن من التعمق في تخطيط CSS ، والنظر في إعدادات العرض المختلفة ، وطرق التخطيط التقليدية التي تتضمن العوامة وتحديد المواقع ، وأدوات التخطيط الجديدة المتشعبة مثل flexbox.</dd> + <dt dir="rtl">Responsive design (TBD)</dt> + <dd dir="rtl">مع وجود العديد من الأنواع المختلفة من الأجهزة التي يمكنها تصفح الويب هذه الأيام ،<a href="/en-US/docs/Web/Guide/Responsive_design">responsive web design</a> (RWD) أصبحت مهارة تطوير الويب الأساسية. ستغطي هذه الوحدة المبادئ والأدوات الأساسية لـ RWD ، وتشرح كيفية تطبيق CSS مختلفة على مستند اعتمادًا على ميزات الجهاز مثل عرض الشاشة ، والتوجيه ، والدقة ، واستكشاف التقنيات المتاحة لتقديم الفيديو والصور المختلفة اعتمادًا على هذه الميزات.</dd> +</dl> + +<h2 dir="rtl" id="Solving_common_CSS_problems">Solving common CSS problems</h2> + +<p dir="rtl"><a href="/en-US/docs/Learn/CSS/Howto">Use CSS to solve common problems</a> provides links to sections of content explaining how to use CSS to solve very common problems when creating a webpage.</p> + +<h2 dir="rtl" id="See_also">See also</h2> + +<dl> + <dt dir="rtl"><a href="/en-US/docs/Web/CSS">CSS on MDN</a></dt> + <dd dir="rtl">The main entry point for CSS documentation on MDN, where you'll find detailed reference documentation for all features of the CSS language. Want to know all the values a property can take? This is a good place to go.</dd> +</dl> diff --git a/files/ar/learn/front-end_web_developer/index.html b/files/ar/learn/front-end_web_developer/index.html new file mode 100644 index 0000000000..a062423f96 --- /dev/null +++ b/files/ar/learn/front-end_web_developer/index.html @@ -0,0 +1,189 @@ +--- +title: Front-end web developer +slug: Learn/Front-end_web_developer +translation_of: Learn/Front-end_web_developer +--- +<p><font><font>{{Learnsidebar}}</font></font></p> + +<p><font><font>مرحبًا بك في مسار تعلم مطوري الويب الأمامي!</font></font></p> + +<p><font><font>هنا نقدم لك دورة منظمة ستعلمك كل ما تحتاج إلى معرفته لتصبح مطور ويب أمامي. </font><font>ما عليك سوى العمل من خلال كل قسم ، وتعلم مهارات جديدة (أو تحسين المهارات الحالية) أثناء تقدمك. </font><font>يتضمن كل قسم تمارين وتقييمات لاختبار فهمك قبل المضي قدمًا.</font></font></p> + +<h2 id="الموضوعات_المشمولة"><font><font>الموضوعات المشمولة</font></font></h2> + +<p><font><font>الموضوعات المشمولة هي:</font></font></p> + +<ul> + <li><font><font>الإعداد الأساسي وتعلم كيفية التعلم</font></font></li> + <li><font><font>معايير الويب وأفضل الممارسات (مثل إمكانية الوصول والتوافق عبر المتصفحات)</font></font></li> + <li><font><font>HTML ، اللغة التي تعطي بنية محتوى الويب والمعنى</font></font></li> + <li><font><font>CSS ، اللغة المستخدمة في تصميم صفحات الويب</font></font></li> + <li><font><font>JavaScript ، لغة البرمجة النصية المستخدمة لإنشاء وظائف ديناميكية على الويب</font></font></li> + <li><font><font>الأدوات المستخدمة لتسهيل تطوير الويب الحديث من جانب العميل.</font></font></li> +</ul> + +<p><font><font>يمكنك العمل من خلال الأقسام بالترتيب ، ولكن كل قسم قائم بذاته. </font><font>على سبيل المثال ، إذا كنت تعرف HTML بالفعل ، يمكنك التخطي إلى قسم CSS.</font></font></p> + +<h2 id="المتطلبات_الأساسية"><font><font>المتطلبات الأساسية</font></font></h2> + +<p><font><font>لا تحتاج إلى أي معرفة سابقة لبدء هذه الدورة. </font><font>كل ما تحتاجه هو جهاز كمبيوتر يمكنه تشغيل متصفحات الويب الحديثة واتصال بالإنترنت والرغبة في التعلم.</font></font></p> + +<p><font><font>إذا لم تكن متأكدًا مما إذا كان تطوير الويب من أجلك أم لا ، و / أو كنت تريد مقدمة لطيفة قبل البدء في دورة تدريبية أطول وأكثر اكتمالًا ، فقم بالعمل من خلال </font></font><a href="/en-US/docs/Learn/Getting_started_with_the_web"><font><font>البدء باستخدام</font></font></a><font><font> وحدة </font><a href="/en-US/docs/Learn/Getting_started_with_the_web"><font>الويب</font></a><font> أولاً.</font></font></p> + +<h2 id="الحصول_على_مساعدة"><font><font>الحصول على مساعدة</font></font></h2> + +<p><font><font>لقد حاولنا أن نجعل تعلم تطوير الواجهة الأمامية أمرًا مريحًا قدر الإمكان ، ولكن ربما ستظل عالقًا لأنك لا تفهم شيئًا ، أو أن بعض التعليمات البرمجية لا تعمل.</font></font></p> + +<p><font><font>لا داعي للذعر. </font><font>نتعثر جميعًا ، سواء كنا مبتدئين أو مطورين ويب محترفين. </font><font>في </font></font><a href="/en-US/docs/Learn/Learning_and_getting_help"><font><font>التعلم والحصول على تعليمات</font></font></a><font><font> المادة يوفر لك مجموعة من النصائح ليبحث عن معلومات ومساعدة نفسك. </font><font>إذا كنت لا تزال عالقًا ، فلا تتردد في نشر سؤال في </font></font><a href="https://discourse.mozilla.org/c/mdn/learn/"><font><font>منتدى الخطاب</font></font></a><font><font> الخاص بنا </font><font>.</font></font></p> + +<p><font><font>هيا بنا نبدأ. </font><font>حظا سعيدا!</font></font></p> + +<h2 id="مسار_التعلم"><font><font>مسار التعلم</font></font></h2> + +<h3 id="البدء"> <strong>البدء</strong> </h3> + +<p>الوقت اللازم للانهاء: 1.5 - 2 ساعة</p> + +<p><strong>المتطلبات الاساسية </strong></p> + +<p>لا شيء عدا المعرفة في اساسيات الحاسب الالي.</p> + +<h4 id="كيف_اعرف_انني_جاهز_للبدء؟"><strong>كيف اعرف انني جاهز للبدء؟</strong></h4> + +<p>There are no assessments in this part of the course. But make sure you don't skip. It is important to get you set up and ready to do work for exercises later on in the course.</p> + +<h4 id="ارشادات_قبل_البدء">ارشادات قبل البدء</h4> + +<ul> + <li><a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a> — basic tool setup (15 min read)</li> + <li><a href="/en-US/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards">Background on the web and web standards</a> (45 min read)</li> + <li><a href="/en-US/docs/Learn/Learning_and_getting_help">Learning and getting help</a> (45 min read)</li> +</ul> + +<h3 id="Semantics_and_structure_with_HTML">Semantics and structure with HTML</h3> + +<p>الوقت اللازم للانهاء: 35 - 50 ساعة</p> + +<p><strong>المتطلبات الاساسية </strong></p> + +<p><span style="">Nothing except basic computer literacy, and a basic web development environment.</span></p> + +<h4 id="How_will_I_know_Im_ready_to_move_on">How will I know I'm ready to move on?</h4> + +<p>The assessments in each module are designed to test your knowledge of the subject matter. Completing the assessments confirms that you are ready to move on to the next module.</p> + +<h4 id="Modules">Modules</h4> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> (15–20 hour read/exercises)</li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia and embedding</a> (15–20 hour read/exercises)</li> + <li><a href="/en-US/docs/Learn/HTML/Tables">HTML tables</a> (5–10 hour read/exercises)</li> +</ul> + +<h3 id="Styling_and_layout_with_CSS">Styling and layout with CSS</h3> + +<p>Time to complete: 90–120 hours</p> + +<h4 id="Prerequisites">Prerequisites</h4> + +<p>It is recommended that you have basic HTML knowledge before starting to learn CSS. You should at least study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> first.</p> + +<h4 id="How_will_I_know_Im_ready_to_move_on_2">How will I know I'm ready to move on?</h4> + +<p>The assessments in each module are designed to test your knowledge of the subject matter. Completing the assessments confirms that you are ready to move on to the next module.</p> + +<h4 id="Modules_2">Modules</h4> + +<ul> + <li><a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a> (10–15 hour read/exercises)</li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks">CSS building blocks</a> (35–45 hour read/exercises)</li> + <li><a href="/en-US/docs/Learn/CSS/Styling_text">Styling text</a> (15–20 hour read/exercises)</li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a> (30–40 hour read/exercises)</li> +</ul> + +<h4 id="Additional_resources">Additional resources</h4> + +<ul> + <li><a href="/en-US/docs/Web/CSS/Layout_cookbook">CSS layout cookbook</a></li> +</ul> + +<h3 id="Interactivity_with_JavaScript">Interactivity with JavaScript</h3> + +<p>Time to complete: 135–185 hours</p> + +<h4 id="Prerequisites_2">Prerequisites</h4> + +<p>It is recommended that you have basic HTML knowledge before starting to learn JavaScript. You should at least study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> first.</p> + +<h4 id="How_will_I_know_Im_ready_to_move_on_3">How will I know I'm ready to move on?</h4> + +<p>The assessments in each module are designed to test your knowledge of the subject matter. Completing the assessments confirms that you are ready to move on to the next module.</p> + +<h4 id="Modules_3">Modules</h4> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a> (30–40 hour read/exercises)</li> + <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks">JavaScript building blocks</a> (25–35 hour read/exercises)</li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects">Introducing JavaScript objects</a> (25–35 hour read/exercises)</li> + <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Client-side web APIs</a> (30–40 hour read/exercises)</li> + <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous">Asynchronous JavaScript</a> (25–35 hour read/exercises)</li> +</ul> + +<h3 id="Web_forms_—_Working_with_user_data">Web forms — Working with user data</h3> + +<p>Time to complete: 40–50 hours</p> + +<h4 id="Prerequisites_3">Prerequisites</h4> + +<p>Forms require HTML, CSS, and JavaScript knowledge. Given the complexity of working with forms, it is a dedicated topic.</p> + +<h4 id="How_will_I_know_Im_ready_to_move_on_4">How will I know I'm ready to move on?</h4> + +<p>The assessments in each module are designed to test your knowledge of the subject matter. Completing the assessments confirms that you are ready to move on to the next module.</p> + +<h4 id="Modules_4">Modules</h4> + +<ul> + <li><a href="/en-US/docs/Learn/Forms">Web forms</a> (40–50 hours)</li> +</ul> + +<h3 id="Making_the_web_work_for_everyone">Making the web work for everyone</h3> + +<p>Time to complete: 60–75 hours</p> + +<h4 id="Prerequisites_4">Prerequisites</h4> + +<p>It is a good idea to know HTML, CSS, and JavaScript before working through this section. Many of the techniques and best practices touch on multiple technologies.</p> + +<h4 id="How_will_I_know_Im_ready_to_move_on_5">How will I know I'm ready to move on?</h4> + +<p>The assessments in each module are designed to test your knowledge of the subject matter. Completing the assessments confirms that you are ready to move on to the next module.</p> + +<h4 id="Modules_5">Modules</h4> + +<ul> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Cross-browser testing</a> (25–30 hour read/exercises)</li> + <li><a href="/en-US/docs/Learn/Accessibility">Accessibility</a> (20–25 hour read/exercises)</li> +</ul> + +<h3 id="Modern_tooling">Modern tooling</h3> + +<p>Time to complete: 55–90 hours</p> + +<h4 id="Prerequisites_5">Prerequisites</h4> + +<p>It is a good idea to know HTML, CSS, and JavaScript before working through this section, as the tools discussed work alongside many of these technologies.</p> + +<h4 id="How_will_I_know_Im_ready_to_move_on_6">How will I know I'm ready to move on?</h4> + +<p><font><font>لا توجد مقالات تقييم محددة في هذه المجموعة من الوحدات. </font><font>تُعدك دروس دراسة الحالة في نهاية الوحدتين الثانية والثالثة لاستيعاب أساسيات الأدوات الحديثة.</font></font></p> + +<h4 id="الوحدات"><font><font>الوحدات</font></font></h4> + +<ul> + <li><a href="/en-US/docs/Learn/Tools_and_testing/GitHub"><font><font>Git و GitHub</font></font></a><font><font> (قراءة لمدة 5 ساعات)</font></font></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools"><font><font>فهم أدوات تطوير الويب من جانب العميل</font></font></a><font><font> (قراءة 20-25 ساعة)</font></font></li> + <li> + <p><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks"><font><font>فهم أطر عمل جافا سكريبت من جانب العميل</font></font></a><font><font> (قراءة / تمارين لمدة 30-60 ساعة)</font></font></p> + </li> +</ul> diff --git a/files/ar/learn/getting_started_with_the_web/dealing_with_files/index.html b/files/ar/learn/getting_started_with_the_web/dealing_with_files/index.html new file mode 100644 index 0000000000..ba85c7a629 --- /dev/null +++ b/files/ar/learn/getting_started_with_the_web/dealing_with_files/index.html @@ -0,0 +1,112 @@ +--- +title: التعامل مع الملفات +slug: Learn/Getting_started_with_the_web/Dealing_with_files +tags: + - البدء مع الويب + - لغة ترميز النص الفائق + - مبتدئين +translation_of: Learn/Getting_started_with_the_web/Dealing_with_files +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p dir="rtl">يتألف الموقع من العديد من الملفات: المحتوى النصي، والنص المصدري، وملفات التصميم (ملفات الأنماط)، والوسائط، والكثير من الملفات الأخرى. عندما تبني موقعك، سوف تحتاج لتجميع جميع تلك الملفات بهيكليّة منطقيّة، وتتأكد من أنَّهم قادرين على الوصول لبعضهم البعض. مقالة <a href="https://developer.mozilla.org/ar/Learn/Getting_started_with_the_web/Dealing_with_files">التعامل مع الملفات</a> تشرح كيف يمكنك إعداد هيكلة ملفات منطقيّة لموقعك، وما المشاكل التي يجب أن تكون حذر منها.</p> +</div> + +<h2 dir="rtl" id="في_أي_مكان_يجب_أن_أضع_موقعي؟">في أي مكان يجب أن أضع موقعي؟</h2> + +<p dir="rtl">عندما تكون قيد العمل على موقع محلياً على حاسبك، فيجب عليك وضع جميع الملفات في مجلد واحد يعكس هيكلة الملفات الموجودة على {{Glossary("Server", "الخادم") }}. يمكنك وضع ذلك المجلد في أي مكان تريد، ولكن يجب أن تحرص على وضعه في مكان يسهل عليك العثور عليه، في سطح المكتب مثلاً، أو في مجلد المنزل، أو في مجلد الجذر على القرص الصلب.</p> + +<ol dir="rtl"> + <li>اختر مكان لتحتفظ فيه بملفات المشروع. قم بإنشاء مجلد في ذلك المكان ولندعوه بـ <code>web-projects</code> على سبيل المثال (أو أي شيء مشابه). في هذا المجلد سيكون جميع ملفات مشاريعك.</li> + <li>في نفس المجلد، أنشئ مُجلداً آخر وسمه <code>test-site</code> (أو شيء أكثر دلالةً).</li> +</ol> + +<h2 dir="rtl" id="حالة_الحروف_والمسافات">حالة الحروف والمسافات</h2> + +<p dir="rtl">ستلاحظ خلال هذه المقالة أننا سنخبرك أن تسمي جميع المجلدات والملفات بأحرف صغيرة (lowercase) وبدون مسافات. وهذا بسبب أنَّ:</p> + +<ol dir="rtl"> + <li>العديد من الحواسيب، وخاصةً خوادم الويب، حسّاسة لحالة الحروف. فعلى سبيل المثال، إذا وضعت صورة في موقعك في المسار <code>test-site/MyImage.jpg</code>، ومن ثم في ملف آخر حاولتَ استدعاء تلك الصورة بالاسم <code>test-site/myimage.jpg</code> قد لا ينجح الاستدعاء.</li> + <li>الخوادم، وخوادم الويب، ولغات البرمجة لاتتعامل مع المسافات بشكل جيد. فعلى سبيل المثال، إذا قمت باستخدام مسافات خلال كتابتك لاسم ملفك، بعض الأنظمة قد تعامل اسم الملف على أنَّه اسم لملفين. وبعض الخوادم ستستبدل المسافات في اسم ملفك ب "%20" (رمز المسافات في روابط URI)، مما سيؤدي إلى تلف جميع الروابط. من الأفضل الفصل بين الكلمات باستخدام شرطات بدلاً من شرطة السفلية: <code>my-file.html</code> بدلاً من <code>my_file.html</code>.</li> +</ol> + +<p dir="rtl">الجواب القصير أنَّه يجب عليك استخدام شرطة في اسماء ملفاتك. يعامل مُحرِّك البحث جوجل الشرطة على أنَّها فارزة للكلمة، ولكنه لا يعامل الشرطة السفلية بهذه الطريقة. لهذه الأسباب، من الأفضل الاعتياد على كتابة اسماء مجلداتك وملفاتك بدون مسافات وبكلمات منفصلة باستخدام شرطات، على الأقل حتى تبدأ بمعرفة ماذا تفعل (تصل لمرحلة متقدمة قليلاً بالتعلُّم). وبهذه الطريقة ستواجه مشاكل أقل لاحقاً أثناء تعلمك.</p> + +<h2 dir="rtl" id="كيف_يجب_أن_تكون_هكيليّة_الملفات_لموقعي؟">كيف يجب أن تكون هكيليّة الملفات لموقعي؟</h2> + +<p dir="rtl">الآن دعنا نأخذ نظرة على هيكليّة الملفات للموقع التجريبي خاصتنا. أكثر الأشياء شيوعاً التي سنقوم بها في أي موقع هي إنشاء ملف ل.ت.ن.ف (لغة ترميز النص الفائق - HTML) يسمى index ومجلدات تحوي الصور، وملفات التصميم، والملفات البرمجيّة. دعنا الآن ننشئ الأشياء التالية:</p> + +<ol dir="rtl"> + <li><strong>الملف <code>index.html</code></strong>: يحوي هذا الملف عادةً على محتويات الصفحة الرئيسية لموقعك، والتي تحتوي على النصوص والصور التي سيراها الناس عندما سيزورون الموقع. استخدم محرِّر النصوص وأنشئ ملفاً جديداً بالاسم <code>index.html</code> ومن ثم احفظه بداخل المجلد <code>text-site</code>.</li> + <li><strong>المجلد</strong> <strong><code>images</code></strong>: سيوضع في هذا المجلد جميع الصور التي ستستخدمها في موقعك. أنشئ مجلداً يسمى <code>images</code> بداخل المجلد <code>test-site</code>.</li> + <li><strong>المجلد <code>styles</code></strong>: سيحتوي هذا المجلد على جميع ملفات ص.أ.ا (صفحات الأنماط الانسيابية - CSS) المُستخدمة لتنسيق محتوى الموقع.</li> + <li><strong>مجلد <code>scripts</code></strong>: سيحتوي هذا المجلد على جميع ملفات الجافالسكربت (JavaScript) المُستخدمة لإضافة مزايا تفاعليّة لموقعك (مثال: تحميل بيانات عندما يتم الضغط على أزرار معينة). أنشئ مجلد يدعى <code>scripts</code> بداخل المجلد <code>test-site</code>.</li> +</ol> + +<div class="note"> +<p dir="rtl"><strong>ملاحظة</strong>: على الحواسيب بنظام ويندوز قد تواجه صعوبة برؤية اسماء الملفات، وذلك لأنَّ نظام ملفات الويندوز يحتوي على خيار <strong>إخفاء لاحقة أنواع الملفات المعروفة</strong> مُمكناً بشكل إفتراضي. يمكنك تعطيل هذا الخيار عادةً بالذهاب إلى متصفح ملفات ويندوز واختيار الخيار <strong>خيارات المجلد...</strong>، وإزالة علامة الصح عن الخيار <strong>إخفاء لاحقة أنواع الملفات المعروفة</strong>، وبعدها قم بالضغط على <strong>موافق</strong>. للمزيد من المعلومات حول إصدار الويندوز خاصتك، قم بالبحث في الإنترنت.</p> +</div> + +<h2 dir="rtl" id="مسارات_الملفات">مسارات الملفات</h2> + +<p dir="rtl">لتجعل الملفات تصل لبعضها البعض عليك توفير مسار الملف لكل واحدٍ منهم (أو بمعنى آخر عنوان مكان تواجد كل ملف). لتوضيح هذا، سنضع شيفرة صغيرة في ملف <code>index.html</code>، وسنجعلها تُظهِر الصورة التي اخترتها في مقالة <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like">"كيف سيكون مظهر موقعك؟"</a>.</p> + +<ol dir="rtl"> + <li>انسخ الصورة التي اخترتها وقم بوضعها في المجلد <code>images</code>.</li> + <li>افتح الملف <code>index.html</code> وقم بوضع هذه الشيفرة بداخله (كما أدناه). لا تهتم حيال ما تعنيه تلك الشيفرة حالياً (سنتكلم عنها بالتفصيل لاحقاً في السلسلة). + <pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>My test page</title> + </head> + <body> + <img src="" alt="My test image"> + </body> +</html> </pre> + </li> + <li>السطر <code><"img src="" alt="My test image></code> هو التعليمة التي تُستخدَم لعرض صورة في الصفحة. علينا إخبار ل.ت.ن.ف أيّة صورة نريد. توجد هذه الصورة في المجلد <em>images</em>، والذي يقع في نفس المجلد الذي يوجد فيه الملف <code>index.html</code>. لتستطيع الصفحة أن تصل لمجلد تلك الصورة، نحن بحاجة إلى وضع المسار التالي <code>images/your-image-filename</code>. على سبيل المثال، إن كانت صورتنا تسمى <code>firefox-icon.png</code> إذاً مسار الملف سيكون <code>images/firefox-icon.png</code>.</li> + <li>ضع مسار الملف داخل شيفرة ل.ت.ن.ف بين علامتي التنصيص في التعليمة <code>src==""</code>.</li> + <li>قم بحفظ الملف <code>index.html</code> وقم بفتحه في متصفح الويب (انقر عليه مرتين). يجب أن ترى صفحة ويب جديدة تعرض صورتك.</li> +</ol> + +<p><img alt="A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world" src="https://mdn.mozillademos.org/files/9229/website-screenshot.png" style="display: block; height: 542px; margin: 0px auto; width: 690px;"></p> + +<p dir="rtl">بعض القواعد الأساسية لمسارات الملفات:</p> + +<ul dir="rtl"> + <li>لتربط الملف الهدف الموجود في نفس المجلد الذي يوجد فيه ملف ل.ت.ن.ف، استخدم اسم الملف فقط، مثال <code>my-image.jpg</code>.</li> + <li>للإشارة إلى ملف في دليل فرعي، اكتب اسم الدليل في مقدمة المسار، وبعدها شرطة مائلة، مثال: <code>subdirectory/my-image.jpg</code>.</li> + <li>لربط الملف الهدف الموجود بمجلد <strong>يسبق</strong> المجلد الذي يوجد فيه ملف ل.ت.ن.ف، اكتب نقطتين. فعلى سبيل المثال، إذا كان الملف <code>index.html</code> داخل مجلد فرعي في المجلد <code>test-site</code> وكانت الصورة <code>my-image.jpg</code> داخل المجلد <code>test-site</code>، يمكنك الإشارة للصورة <code>my-image.jpg</code> من الملف <code>index.html</code> باستخدام المسار <code>../my-image.jpg</code>.</li> + <li>يمكنك الدمج بين تلك القواعد كما تشاء، على سبيل المثال: <code>../subdirectory/another-subdirectory/my-image.jpg</code>.</li> +</ul> + +<p dir="rtl">هذا كل ما تحتاج معرفته حالياً.</p> + +<div class="note"> +<p dir="rtl"><strong>ملاحظة</strong>: يستخدم نظام ملفات ويندوز المائلة الخلفية، وليس الأمامية، مثال <code>C:\windows</code>. هذا لا يهم عند استخدام ل.ت.ن.ف (فحتى عندما تقوم بتطوير موقعك على ويندوز، فعليك استخدام المائلة الأمامية في شيفرتك).</p> +</div> + +<h2 dir="rtl" id="ماذا_يجب_أن_أفعل_أيضاً؟">ماذا يجب أن أفعل أيضاً؟</h2> + +<p dir="rtl">هذا كل شيء للوقت الراهن. هيكيّلة مجلداتك يجب أن تبدو كشيء من هذا القبيل:</p> + +<p><img alt="A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file" src="https://mdn.mozillademos.org/files/9231/file-structure.png" style="display: block; height: 577px; margin: 0px auto; width: 929px;"></p> + +<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</p> + +<h2 dir="rtl" id="في_هذه_الوحدة_أيضاًEditEdit">في هذه الوحدة أيضاً<a class="button new only-icon section-edit" href="https://developer.mozilla.org/ar/docs/Learn/Getting_started_with_the_web/%D8%A3%D8%B3%D8%A7%D8%B3%D9%8A%D8%A7%D8%AA_%D9%84%D8%BA%D8%A9_%D8%AA%D8%B1%D9%85%D9%8A%D8%B2_%D8%A7%D9%84%D9%86%D8%B5_%D8%A7%D9%84%D9%81%D8%A7%D8%A6%D9%82$edit#في_هذه_الوحدة" rel="nofollow nofollow, noindex"><span>Edit</span></a><a class="button section-edit only-icon" href="https://developer.mozilla.org/ar/docs/Learn/Getting_started_with_the_web/Installing_basic_software$edit#في_هذه_الوحدةEdit" rel="nofollow, noindex"><span>Edit</span></a></h2> + +<ul dir="rtl"> + <li><a href="/ar/Learn/Getting_started_with_the_web/Installing_basic_software">تثبيت البرمجيات الأساسية</a></li> + <li><a href="/ar/Learn/Getting_started_with_the_web/What_will_your_website_look_like">كيف سيكون مظهر موقعك؟</a></li> + <li><a href="/ar/Learn/Getting_started_with_the_web/Dealing_with_files">التعامل مع الملفات</a></li> + <li><a href="/ar/Learn/Getting_started_with_the_web/HTML_basics">أساسيات لغة ترميز النص الفائق</a></li> + <li><a href="/ar/Learn/Getting_started_with_the_web/CSS_basics">أساسيات صفحات الأنماط الانسيابية</a></li> + <li><a href="/ar/Learn/Getting_started_with_the_web/JavaScript_basics">أساسيات الجافاسكربت</a></li> + <li><a href="/ar/Learn/Getting_started_with_the_web/Publishing_your_website">نشر موقعك</a></li> + <li><a href="/ar/Learn/Getting_started_with_the_web/How_the_Web_works">كيف يعمل الويب</a></li> +</ul> diff --git a/files/ar/learn/getting_started_with_the_web/how_the_web_works/index.html b/files/ar/learn/getting_started_with_the_web/how_the_web_works/index.html new file mode 100644 index 0000000000..915bcef409 --- /dev/null +++ b/files/ar/learn/getting_started_with_the_web/how_the_web_works/index.html @@ -0,0 +1,109 @@ +--- +title: كيف يعمل الويب +slug: Learn/Getting_started_with_the_web/How_the_Web_works +translation_of: Learn/Getting_started_with_the_web/How_the_Web_works +--- +<div dir="rtl">{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p class="simple-translate-result" dir="rtl" style="color: rgb(0, 0, 0);">توفر طريقة عمل الويب طريقة عرض مبسطة لما يحدث عند عرض صفحة ويب في مستعرض ويب على الكمبيوتر أو الهاتف.</p> +</div> + +<p class="simple-translate-result" dir="rtl" style="color: rgb(0, 0, 0);">هذه النظرية ليست ضرورية لكتابة كود الويب على المدى القصير ، ولكن قبل وقت طويل سوف تبدأ حقًا بالاستفادة من فهم ما يحدث في الخلفية.</p> + +<h2 dir="rtl" id="العملاء_والخوادم_Clients_and_servers">العملاء والخوادم | Clients and servers</h2> + +<p class="simple-translate-result" dir="rtl" style="direction: rtl; color: rgb(0, 0, 0);">تقسم أجهزة الكمبيوتر المتصلة بشبكة الإنترنت الى عملاء (<strong>clients</strong>) وخوادم (<strong>servers</strong>). حيث يوضح الرسم التخطيطي المبسط كيفية تفاعلهم هكذا:</p> + +<p dir="rtl"><img alt="" src="https://mdn.mozillademos.org/files/8973/Client-server.jpg" style="height: 123px; width: 336px;"></p> + +<ul dir="rtl"> + <li> + <p class="simple-translate-result" style="color: rgb(0, 0, 0);">ويطلق مصطلح العميل أو العملاء على الأجهزة المتصلة بالانترنت اوالبرمجيات المثبتة عليها والتي تستهلك الخدمات المختلفة المتوفرة على الشبكة بدأً من برامج تصفح المواقع ( مثل Firefox أو Chrome ). مرورا بالتطبيقات المختلفة التي تعتمد على الاتصال بالانترنت كتطبيقات تصفح البريد الاكتروني (outlook) وغيرها.</p> + </li> + <li> + <p class="simple-translate-result" style="color: rgb(0, 0, 0);">اما الخوادم فهي الاجهزة والبرمجيات التي تخزن وتوفر صفحات الويب أو المواقع أو التطبيقات. أو البرمجيات التي تقدم خدمات متعلقة بخزين واستعادة البيانات عبر واجهة برمجية معينة (API) فمثلا عندما يريد عميل ما الوصول إلى صفحة ويب، يطلبها من الخادم فيقوم بارسال او تنزيل نسخة منها على جهاز العميل ليتم عرضها في متصفح الويب الخاص بالمستخدم.</p> + </li> +</ul> + +<h2 dir="rtl" id="الأجزاء_الأخرى_من_الأدوات">الأجزاء الأخرى من الأدوات</h2> + +<p class="simple-translate-result" dir="rtl" style="color: rgb(0, 0, 0);">العميل والخادم الذي وصفناه أعلاه لا يخبران القصة بأكملها. هناك العديد من الأجزاء الأخرى المعنية ، وسنقوم بوصفها أدناه.</p> + +<p class="simple-translate-result" dir="rtl" style="color: rgb(0, 0, 0);">الآن ، دعنا نتخيل أن الويب هو طريق. على طرف واحد من الطريق هو العميل ، الذي يشبه منزلك. على الطرف الآخر من الطريق ، يوجد الخادم ، وهو متجر تريد شراء شيء منه.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9749/road.jpg" style="display: block; height: 427px; margin: 0px auto; width: 640px;"></p> + +<p class="simple-translate-result" dir="rtl" style="color: rgb(0, 0, 0);">بالإضافة إلى العميل والخادم ، نحتاج أيضًا أن نقول مرحباً بما يلي:</p> + +<ul> + <li style="direction: rtl;"><strong>اتصال الإنترنت الخاص بك</strong>: تيح لك إرسال واستقبال البيانات على شبكة الإنترنت. انها في الأساس مثل الشارع بين منزلك والمتجر.</li> + <li> + <div style="direction: rtl;"><strong>TCP/IP</strong><span>: بروتوكول التحكم في الإرسال وبروتوكول الإنترنت هما بروتوكولا اتصال يحددان كيفية انتقال البيانات عبر الويب. هذا يشبه آليات النقل التي تتيح لك تقديم طلب ، والذهاب إلى المتجر ، وشراء البضائع الخاصة بك. في مثالنا ، هذا يشبه سيارة أو دراجة (أو مع ذلك ، قد تتجول).</span></div> + + <div style="direction: rtl;"></div> + </li> + <li style="direction: rtl;"><strong>DNS</strong>: خوادم اسم المجال تشبه دفتر العناوين لمواقع الويب. عندما تكتب عنوان ويب في المستعرض الخاص بك ، يبحث المستعرض في DNS للعثور على عنوان موقع الويب الحقيقي قبل أن يتمكن من استرداد موقع الويب. يحتاج المتصفح إلى معرفة الخادم الذي يعمل عليه الموقع ، حتى يتمكن من إرسال رسائل HTTP إلى المكان الصحيح (انظر أدناه). هذا يشبه البحث عن عنوان المتجر حتى تتمكن من الوصول إليه.<br> + <strong>HTTP</strong>: بروتوكول نقل "النصوص المترابطة" وهو احد البروتوكولات "يمكن تخيله على انه اللغة المشتركة" التي يتم من خلالها التواصل والتفاعل بين الخادم والعميل. </li> + <li> + <div style="direction: rtl;"><strong>Component files</strong><span>:يتكون موقع الويب من العديد من الملفات المختلفة ، والتي تشبه الأجزاء المختلفة للبضائع التي </span><span>تشتريها من المتجر. هذه الملفات تأتي في نوعين رئيسيين:</span></div> + + <ul> + <li style="direction: rtl;"><strong>Code files</strong>: يتم بناء مواقع الويب بشكل أساسي من HTML و CSS و JavaScript ، على الرغم من أنك ستقابل التقنيات الأخرى في وقت لاحق.</li> + <li style="direction: rtl;"><strong>Assets</strong>: هذا اسم جماعي لجميع العناصر الأخرى التي تشكل موقعًا على الويب، مثل الصور والموسيقى والفيديو ومستندات Word وملفات PDF.</li> + </ul> + </li> +</ul> + +<h2 dir="rtl" id="إذن_ما_الذي_يحدث_بالضبط؟">إذن ما الذي يحدث بالضبط؟</h2> + +<p class="simple-translate-result" dir="rtl" style="color: rgb(0, 0, 0);">عندما تطلب عنوان صفحة ويب من متصفحك (على سبيل المثال <a href="https://wiki.developer.mozilla.org/">https://wiki.developer.mozilla.org/</a>، ولنستعين بمثال السير الى المتجر) يحدث ما يلي:</p> + +<ol dir="rtl"> + <li>يقوم المتصفح بسؤال خادم تزويد العنوان DNS عن بالعنوان الحقيقي للخادم الذي يعيش عليه الموقع IP (حيث تتوقع الحصول على العنوان التفصيلي للمحل مثلا المبنى الخامس في نهاية الطريق ).</li> + <li>يستخدم المتصفح هذا العنوان للإرسال رسالة إلى الخادم مستخدما بروتوكول ال HTTP، ويطلب منه إرسال نسخة من موقع الويب إلى العميل (تذهب إلى المتجر وطلب البضائع الخاصة بك). يتم إرسال هذه الرسالة وجميع البيانات الأخرى المرسلة بين العميل والخادم عبر اتصال الإنترنت الخاص بك باستخدام TCP / IP.</li> + <li><span>في حال توافر هذه الخدمة او الصفحة لدى الخادم، وتبعا لبروتوكول ال HTTP سيرد الخادم على الطلب مستخدما ترميزالحالة 200 للتعبير عن الايجاب او النجاح ثم يبدأ بنقل وارسال ملف الصفحة او البيانات على شكل سلسلة حزم بيانات صغيرة ( يمكن تشبيه هذه العملية بطلبك من عالم المتجر بعض الحاجيات او تناولك اياها بعد البحث داخل المتجر، ثم تجميعها وحزمها في اكياس.</span></li> + <li><span>وختاما يقوم المتصفح بتجميع هذه الحزم على شكل ملف واحد من جديد وعرضها بالشكل المناسب.</span></li> +</ol> + +<h2 dir="rtl" id="شرح_DNS">شرح DNS </h2> + +<p dir="rtl">عناوين المواقع المكتوبة التي تطلبها من المتصفح مثل mozilla.org هي ليست العنوان الرقمي الذي تفهمه الالة وانما هو العنوان الذي نفهمه نحن البشر ويسهل علينا تذكره، اما العنوان الحقيقي الرقمي فهو مجموعة من الارقام بترتيب معين مثل <code>63.245.215.20 </code>.والتي تدعى عنوان بروتوكول الانترنت الرقمي او {{Glossary("IP Address", "IP address")}} وهو يمثل العنوان الرقمي الحقيقي والذي يشير الى جهاز خادم حقيقي واحد وفريد على الشبكة العنكبوتية الذي نود طلب الصفحة منه. </p> + +<p dir="rtl">ومن هنا كانت الحاجة الى خدمة اوخوادم لتحويل وتمثيل او مقابلة اي عنوان مكتوب الى العنوان الرقمي الذي تفهمه الالة عبر جداول خصصت لهذا الغرض، وتسمى هذه الخدمة ب DNS اختصارا ل Domain Name server. </p> + +<p dir="rtl">يمكن الوصول إلى المواقع مباشرة عبر عناوين IP الخاصة بها. يمكنك العثور على عنوان IP لموقع ويب عن طريق كتابة المجال الخاص به في أداة مثل <a href="https://ipfinder.io/">IP FINDER</a>.</p> + +<h2 dir="rtl" id="شرح_الحزم_Packets">شرح الحزم [Packets]</h2> + +<p class="simple-translate-result" dir="rtl" style="color: rgb(0, 0, 0);">في وقت سابق ، استخدمنا المصطلح "حزم" (Packets) لوصف التنسيق الذي يتم به إرسال البيانات من خادم إلى عميل. ماذا نعني هنا؟ بشكل أساسي ، عندما يتم إرسال البيانات عبر الويب ، يتم إرسالها كآلاف من القطع الصغيرة ، بحيث يمكن للعديد من مستخدمي الويب المختلفين تنزيل نفس الموقع في نفس الوقت. إذا تم إرسال مواقع الويب كمقاطع كبيرة مفردة ، فيمكن لمستخدم واحد فقط تنزيلها مرة واحدة في كل مرة ، مما من الواضح أنه سيجعل الويب غير فعال للغاية وليس كثير الاستخدام.</p> + +<h2 id="أنظر_أيضا">أنظر أيضا</h2> + +<ul> + <li><a href="/en-US/Learn/How_the_Internet_works">كيف يعمل الانترنت </a></li> + <li><a href="https://dev.opera.com/articles/http-basic-introduction/">HTTP — بروتوكول على مستوى التطبيق </a></li> + <li><a href="https://dev.opera.com/articles/http-lets-get-it-on/">HTTP: انطلق مع !</a></li> + <li><a href="https://dev.opera.com/articles/http-response-codes/">HTTP: ترميز حالات الاستجابة الخادم </a></li> +</ul> + +<h2 id="Credit">Credit</h2> + +<p>صورة الشارع: <a href="https://www.flickr.com/photos/kdigga/9110990882/in/photolist-cXrKFs-c1j6hQ-mKrPUT-oRTUK4-7jSQQq-eT7daG-cZEZrh-5xT9L6-bUnkip-9jAbvr-5hVkHn-pMfobT-dm8JuZ-gjwYYM-pREaSM-822JRW-5hhMf9-9RVQNn-bnDMSZ-pL2z3y-k7FRM4-pzd8Y7-822upY-8bFN4Y-kedD87-pzaATg-nrF8ft-5anP2x-mpVky9-ceKc9W-dG75mD-pY62sp-gZmXVZ-7vVJL9-h7r9AQ-gagPYh-jvo5aM-J32rC-ibP2zY-a4JBcH-ndxM5Y-iFHsde-dtJ15p-8nYRgp-93uCB1-o6N5Bh-nBPUny-dNJ66P-9XWmVP-efXhxJ">Street composing</a>, بواسطة <a href="https://www.flickr.com/photos/kdigga/">كيفن د</a>.</p> + +<p>{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p> + +<h2 id="في_هذه_الوحدة">في هذه الوحدة</h2> + +<ul> + <li id="Installing_basic_software"><a href="/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a></li> + <li id="What_will_your_website_look_like"><a href="/en-US/Learn/Getting_started_with_the_web/What_will_your_website_look_like">What will your website look like?</a></li> + <li id="Dealing_with_files"><a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a></li> + <li id="HTML_basics"><a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a></li> + <li id="CSS_basics"><a href="/en-US/Learn/Getting_started_with_the_web/CSS_basics">CSS basics</a></li> + <li id="JavaScript_basics"><a href="/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript basics</a></li> + <li id="Publishing_your_website"><a href="/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">Publishing your website</a></li> + <li id="How_the_web_works"><a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">How the web works</a></li> +</ul> diff --git a/files/ar/learn/getting_started_with_the_web/html_basics/index.html b/files/ar/learn/getting_started_with_the_web/html_basics/index.html new file mode 100644 index 0000000000..d8e10cb20f --- /dev/null +++ b/files/ar/learn/getting_started_with_the_web/html_basics/index.html @@ -0,0 +1,232 @@ +--- +title: أساسيات HTML +slug: Learn/Getting_started_with_the_web/HTML_basics +tags: + - البدء مع الويب +translation_of: Learn/Getting_started_with_the_web/HTML_basics +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p dir="rtl"><span class="seoSummary">لغة ترميز النص الفائق</span> (HTML) هي التعليمات التي تُستخدَم لهيكلة صفحة الويب ومحتواها. فعلى سبيل المثال، يمكن، باستخدام هذه اللغة، بناء صفحة تحوي مجموعة من النصوص، وقائمة نقطية، أو تحوي صور و بعض جداول البيانات. كما يشير العنوان، ستزودك هذه المقالة بالمفاهيم الأساسيّة حول هذه اللغة وخواصها.</p> +</div> + +<h2 dir="rtl" id="ما_هي_لغة_ترميز_النص_الفائق؟">ما هي لغة ترميز النص الفائق؟</h2> + +<p dir="rtl">لغة ترميز النص الفائق هي ليست لغة برمجيّة بل <em>لغة وصفيّة</em> (markup language) تعمل على وصف هيكلة محتويات صفحات الويب. تتألف لغة ترميز النص الفائق من مجموعة من <strong>العناصر</strong> (elements) تُستخدَم لاحتواء الأجزاء المختلفة من المحتوى لتجعله يظهر بطريقة معينة. فيمكن استخدام الوسوم المغلقة (enclosing tage)، مثلاً، لإضافة رابط تشعبي لكلمة أو لصورة يشير لموقع آخر، كما يمكن استخدامها لجعل الكلام مائل أو لتصغير الخط وتكبيره. لنأخذ النص التالي كمثال:</p> + +<pre>قطتي شديدة الجمال</pre> + +<p dir="rtl">يمكننا وصف هذا النص على أنه فقرة (paragraph) عن طريق تضمينه باستخدام وسم الفقرة التالي:</p> + +<pre class="brush: html"><p>قطتي شديدة الجمال</p></pre> + +<h3 dir="rtl" id="تشريح_عنصر_لغة_ترميز_النص_الفائق">تشريح عنصر لغة ترميز النص الفائق</h3> + +<p dir="rtl">دعنا نستكشف عنصر الفقرة هذا قليلاً بعد:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16065/beautiful-cat.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p> + +<p dir="rtl">الأجزاء الرئيسية من عنصرنا هي:</p> + +<ol dir="rtl"> + <li><strong>وسم الفتح</strong>: يتألف من اسم العنصر (في حالتنا p)، محاطاً بقوس مفتوح وآخر مغلق. يحدد هذا المكوِّن بداية العنصر، أو بداية التأثير الذي يُضفيه (في حالتنا بداية الفقرة).</li> + <li><strong>وسم الإغلاق</strong>: مشابه لسابقه، ما عدا أنَّه يتضمن مائلة أماميّة (/) قبل اسم العنصر. يحدد هذا المكوِّن نهاية العنصر (في حالتنا نهاية الفقرة). يُعد نسيان وضع وسم الإغلاق أحد الأخطاء الشائعة التي يقع بها المبتدئون والتي تؤدي إلى مشاكل مزعجة.</li> + <li><strong>المحتوى</strong>: يُمثِّل هذا المكوِّن محتوى العنصر (في حالتنا نص الفقرة).</li> + <li><strong>العنصر</strong>: هو الكيان ككل المؤلَّف من وسم الفتح، ووسم الإغلاق، ويتوسطه محتواه.</li> +</ol> + +<p dir="rtl">قد يحتوي العنصر أيضاً على بعض السِمات (attributes)، والتي تبدو كشيء من هذا القبيل:</p> + +<p><img alt="رسم توضيحي يُشرِّح الوسم عندما يمتلك خاصيّة" src="https://mdn.mozillademos.org/files/16068/beautiful-cat-attribute.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p> + +<p dir="rtl">تحتوي السِمات على معلومات إضافية حول العنصر لا تظهر في المحتوى الفعلي. في حالتنا، يُعد <code>class</code> <em>اسم</em> السِمَة و <code>editor-note</code> قيمتها. السِمَة <code>class</code> تسمح لك بأن تعطي العنصر مُعرِّف يُمكِن استخدامه لاحقاً للإشارة للعنصر لإعطائه تنسيق معين وأشياء أخرى.</p> + +<p dir="rtl">ينبغي أن تكون للسِمَة المكوِّنات التالية دوماً:</p> + +<ol dir="rtl"> + <li>مسافة بينها وبين اسم العنصر (أو السِمَة التي تسبقها في حال امتلاك العنصر أكثر من سِمَة).</li> + <li>اسم السِمَة متبوعاً بإشارة يساوي.</li> + <li>علامتي تنصيص تُحيط بقيمة السِمَة.</li> +</ol> + +<div class="blockIndicator note"> +<p dir="rtl">ملاحظة: يمكن أن تظل قيم السمات البسيطة التي لا تحتوي على مسافة بيضاء لـ ASCII (أو أي من الأحرف <code>"</code> <code>'</code> <code>`</code> <code>=</code> <code><</code> <code>></code>) غير مذكورة ، لكن يُنصح بأن تقوم بتحديد كل قيم السمات ، حيث تجعل الشفرة أكثر اتساقًا وفهمًا.</p> +</div> + +<h3 dir="rtl" id="العناصر_المتداخلة">العناصر المتداخلة</h3> + +<p dir="rtl">يمكنك وضع عنصر بداخل عنصر آخر أيضاً، يدعى هذا النمط <strong>بالتداخل</strong> (nesting). إذا أردنا التأكيد على جمال قطتنا، مثلاً، يمكننا إحاطة الكلمة "شديدة" بالعنصر {{htmlelement("strong")}}، كالتالي:</p> + +<pre class="brush: html"><p>My cat is <strong>very</strong> grumpy.</p></pre> + +<p dir="rtl"> </p> + +<p dir="rtl">احرص على إنشاء تداخل صحيح بين عناصرك: في المثال أعلاه قمنا بفتح العنصر {{htmlelement("p")}} أولاً، وبعدها العنصر {{htmlelement("strong")}}، وبالتالي علينا إغلاق العنصر {{htmlelement("strong")}} ويليه الآخر. فالشكل التالي ليس صحيحاً:</p> + +<pre class="example-bad brush: html"><p>My cat is <strong>very grumpy.</p></strong></pre> + +<p dir="rtl">على العناصر أن تُفتَح وتُغلَق بشكل صحيح ليكونوا بشكل واضح داخل أو خارج بعضهم البعض. فإذا تشابكوا بشكل خاطئ كما في الأعلى، سيقوم متصفحك بمحاولة القيام بأفضل تخمين حيال ما تحاول القيام به، والذي قد يؤدي إلى نتائج غير متوقعة.</p> + +<h3 dir="rtl" id="العناصر_الفارغة">العناصر الفارغة</h3> + +<p dir="rtl">بعض العناصر لا يوجد فيها محتوىً. تُدعى تلك العناصر <strong>بالعناصر الفارغة</strong>. خذ العنصر {{htmlelement("img")}} الموجود في شيفرة المقالة هذه التي تقرأها على سبيل المثال:</p> + +<pre class="brush: html"><img src="images/firefox-icon.png" alt="My test image"></pre> + +<p dir="rtl">يحتوي هذا العنصر على خاصيتيّن، ولكن، إن لاحظت، لا يوجد وسم الإغلاق <code><img/></code>، ولا يوجد محتوىً بداخل العنصر. هذا بسبب أنَّ عنصر الصورة لا يحيط بمحتوىً كي يؤثر عليه، فهدفه ببساطة تضمين صورة في الصفحة وحسب.</p> + +<h3 dir="rtl" id="تشريح_وثيقة_لغة_ترميز_النص_الفائق">تشريح وثيقة لغة ترميز النص الفائق</h3> + +<p dir="rtl">لحد الآن قمنا بتغطية بعض العناصر الفردية الأساسية في هذه اللغة، ولكن تلك العناصر ليست بتلك الفائدة لوحدها. الآن سنأخذ نظرة حول كيف يمكن للعناصر الفردية أن تنمزج معاً لتشكل صفحة ويب متكاملة. دعنا نعاود رؤية الشفرة البرمجية التي وضعنها في مثالنا عن الملف <code>index.html</code> (الذي استخدمناه في <a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">مقالة التعامل مع الملفات</a>):</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>My test page</title> + </head> + <body> + <img src="images/firefox-icon.png" alt="My test image"> + </body> +</html></pre> + +<p dir="rtl">في هذا المثال لدينا:</p> + +<ul dir="rtl"> + <li>التعليمة <code><!DOCTYPE html></code>. تحدد هذه التعليمة نوع الوثيقة. في فترة سابقة من الزمن، عندما كانت لغة ترميز النص السابق تقنية يافعة (في حوالي 1991/2)، كان المقصود من doctypes أن تكون بمثابة روابط لمجموعة من القواعد التي يجب على وثائق لغة ترميز النص الفائق أن تتبعها لتعتبر صالحة. ولكن مع مرور الزمن، وفي هذه الأيام تحديداً، لا أحد يهتم حقاً حيال هذه التعليمة بعد الآن، فهي مجرد تحفة أثرية كانت تُضمَّن في كل شيء ليعمل بشكل صحيح. هذا كل ما نريد منك أن تعرفه حالياً.</li> + <li>التعليمة <code><html></html></code>. يحيط هذا العنصر بجميع محتويات الصفحة، ويعرف باسم "العنصر الجذر".</li> + <li>التعليمة <code><head></head></code>. يعمل هذا العنصر كحاوي لجميع الأشياء التي تريد تضمينها في صفحتك والتي لا تعد محتوىً تريد إظهاره لزوار موقعك. هذا يتضمن الأشياء مثل <strong>الكلمات المفتاحية</strong> ووصف الصفحة الذي ترغب في إظهاره في نتائج البحث، وشيفرة <a href="https://developer.mozilla.org/ar/docs/Web/CSS">صفحات الأنماط الانسايبية</a> لتنسيق المحتوى، والإعلان عن نوع ترميز النص، والكثير من الأمور الأخرى.</li> + <li>التعليمة <code><body></body></code>. يحتوي هذا العنصر على محتوى الذي تريد إظهاره لزوارك، سواءً كان نصاً، أو صورة، أو فيديو، أو لعبة، أو ملف صوتي، أو أياً كان.</li> + <li>التعليمة <code><"meta charset="utf-8></code>. يحدد هذا العنصر الترميز الذي تستخدمه صفحتك، والذي هو في مثالنا الترميز UTF-8. يتضمن نوع الترميز هذا معظم المحارف والرموز من الغالبية العظمة من اللغات البشرية المكتوبة. الآن يمكن التعامل مع أي محتوى نصي تقوم بوضعه. عليك أن تلتزم دائماً بتعريف هذا العنصر، فهو يساعد على تجاوز العديد من المشكلات في وقت لاحق.</li> + <li>التعليمة <code><title></title></code>. يقوم هذا العنصر بتحديد عنوان صفحتك، والذي هو العنوان الذي يظهر في نافذة المتصفح التي يتم تحميل الصفحة فيها. كما يستخدم أيضاً لوصف الصفحة عندما تقوم بإضافتها للمفضلة.</li> +</ul> + +<h2 dir="rtl" id="الصور">الصور</h2> + +<p dir="rtl">دعنا نوجه إنتباهنا إلى العنصر {{htmlelement("img")}} مجدداً:</p> + +<pre class="brush: html"><img src="images/firefox-icon.png" alt="My test image"></pre> + +<p dir="rtl">كما قلنا سابقاً، يقوم هذا العنصر بتضمين صورة في صفحتنا في موضع مُعين. يتم تحديد الصورة باستخدام السِمَة <code>src</code>، والتي تأخذ مسار الصورة كقيمة.</p> + +<p dir="rtl">كما قمنا أيضاً بإضافة السِمَة <code>alt</code>. تقوم هذه السِمَة بإضافة وصف للصورة للمستخدمين الذين لايمكنهم رؤية الصورة، وقد يكون هذا بسبب:</p> + +<ol dir="rtl"> + <li>نظرهم الضعيف. المستخدمين الذي لديهم إعاقات بصرية كبيرة غالباً ما يستخدمون أدوات تسمى قارئات شاشة لقراءة النص البديل لهم.</li> + <li>حدوث شيء ما خاطئ جعل الصورة لاتظهر. على سبيل المثال، حاول تغيير مسار الصورة داخل السمة <code>src</code> واجعله خاطئ عمداً. إذا قمت بحفظ وإعادة تحميل الصفحة، يجب أن ترى شيء من هذا القبيل مكان الصورة:</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9349/alt-text-example.png" style="display: block; height: 36px; margin: 0px auto; width: 108px;"></p> + +<p dir="rtl">النص البديل (alt text) هو "نص وصفي". النص البديل الذي عليك كتابته يجب أن يوفر للقارئ معلومات كافية ليصبح لديه فكرة جيدة عما تعنيه الصورة. في هذا المثال، النص البديل الذي استخدمناه "My test image" ليس جيداً على الإطلاق. يمكننا استخدام نص بديل أفضل منه بكثير يعبر عن شعار فايرفوكس خاصتنا وهو "The Firefox logo: a flamin fox surrounding the Earth" ("شعار فايرفوكس: ثعلب مُشتعِل يحيط بِكُرَة أرضيّة"، والذي هو، كما ترى، وصف دقيق للصورة).</p> + +<p dir="rtl">حاول التفكير ببعض النصوص البديلة الأفضل لصورك.</p> + +<div class="note" dir="rtl"> +<p><strong>ملاحظة:</strong> اعثر على المزيد حول الإتاحة في <a href="/en-US/docs/Web/Accessibility">مقالة الإتاحة على شبكتنا</a>.</p> +</div> + +<h2 dir="rtl" id="التعامل_مع_النصوص">التعامل مع النصوص</h2> + +<p dir="rtl">في هذا القسم سنغطي بعضاً من العناصر الأساسية في لغة ترميز النص الفائق التي نستخدمها للتعامل مع المحتويات النصيّة.</p> + +<h3 dir="rtl" id="العناوين">العناوين</h3> + +<p dir="rtl">تتيح لك عناصر العنونة (heading elements) القدرة على تحديد جزء معين من النص على أنَّه عنوان رئيسي - أو فرعي - من محتواك. فكما يملك الكتاب عنوان رئيسي، وعناوين رئيسية وفرعية للفصول، تملك وثيقة لغة ترميز النص الفائق هذه الخاصية أيضاً. تحتوي لغة ترميز النص الفائق على ست مستويات عنونة، تبدأ من {{htmlelement("h1")}} إلى {{htmlelement("h6")}}، على الرغم من أنك لن تستخدم عادةً أكثر من ثلاث أو أربع مستويات:</p> + +<pre class="brush: html"><h1>My main title</h1> +<h2>My top level heading</h2> +<h3>My subheading</h3> +<h4>My sub-subheading</h4></pre> + +<p dir="rtl">والآن حاول أن تضيف عنوان مناسب لصفتحك أعلى العنصر {{htmlelement("img")}}.</p> + +<h3 dir="rtl" id="الفقرات">الفقرات</h3> + +<p dir="rtl">كما شرحنا أعلاه، تقوم العناصر {{htmlelement("p")}} باحتواء فقرات من النص. سنستخدم هذا العنصر بشكل متكرر عندما سنضيف محتويات نصيّة عاديّة:</p> + +<pre class="brush: html"><p>This is a single paragraph</p></pre> + +<p dir="rtl">قم بإضافة بعض الفقرات أسفل العنصر {{htmlelement("img")}} وشاهد ماذا سيحدث.</p> + +<h3 dir="rtl" id="القوائم">القوائم</h3> + +<p dir="rtl">تستخدم القوائم في الكثير من مواقع الويب، وتملك لغة ترميز النص الفائق عناصر خاصة لذلك. دائماً ما تحوي القوائم عنصرين على الأقل. أكثر أنواع القوائم شيوعاً هي القوائم المرتبة والغير مرتبة:</p> + +<ol dir="rtl"> + <li>تُستخدَم <strong>القوائم الغير مرتبة</strong> (unordered lists) مع القوائم التي لايكون فيها الترتيب أمراً مهماً، كقوائم التسوُّق مثلاً. تُحاط تلك القوائم بالعنصر {{htmlelement("ul")}}.</li> + <li>تُستخدَم <strong>القوائم المرتبة</strong> (ordered lists) مع القوائم التي يكون فيها الترتيب أمراً مهماً، كقوائم وصفات الطعام. تُحاط تلك القوائم بالعنصر {{htmlelement("ol")}}.</li> +</ol> + +<p dir="rtl">كل عنصر من القائمة يوضع داخل العنصر {{htmlelement("li")}} (والذي هو اختصار لـ list item).</p> + +<p dir="rtl">على سبيل المثال، إذا أردنا تحويل جزء من هذه الفقرة إلى قائمة كالتالية:</p> + +<pre class="brush: html"><p>At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... </p></pre> + +<p dir="rtl">يجب علينا تعديل الشفرة إلى الشكل الآتي:</p> + +<pre class="brush: html"><p>At Mozilla, we’re a global community of</p> + +<ul> + <li>technologists</li> + <li>thinkers</li> + <li>builders</li> +</ul> + +<p>working together ... </p></pre> + +<p dir="rtl">حاول إضافة قائمة مرتبة أو غير مرتبة إلى مثال صفحتك.</p> + +<h2 dir="rtl" id="الروابط">الروابط</h2> + +<p dir="rtl">تُعَد الروابط عناصر مهمة للغايّة، فهي ما تجعل من الويب ويب! يتم استخدام العنصر {{htmlelement("a")}} لإضافة الروبط. الحرف "a" هو اختصار للكلمة الإنجليزيّة "anchor" (مرساة). لتحويل نص في فقرتك إلى رابط عليك اتباع الخطوات التالية:</p> + +<ol dir="rtl"> + <li>اختر نصاً ما. لقد اخترنا النص "Mozilla Manifesto" لمثالنا هذا.</li> + <li>قم بإحاطة النص بالعنصر {{htmlelement("a")}}، كما أدناه: + <pre class="brush: html"><a>Mozilla Manifesto</a></pre> + </li> + <li> أضف السِمَة <code>href</code> للعنصر {{htmlelement("a")}}، كما أدناه: + <pre class="brush: html"><a href="">Mozilla Manifesto</a></pre> + </li> + <li>قم بملء قيمة السِمَة <code>href</code> بعنوان الويب الذي تريد أن تفتحه من خلال الرابط، كما أدناه: + <pre class="brush: html"><a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a></pre> + </li> +</ol> + +<p dir="rtl">قد تحصل على نتائج غير متوقعة إذا نسيت وضع <code>https://</code> أو <code>http://</code>. يسمى هذا الجزء الموجود ببداية عنوان الويب <em>بالبروتوكول</em>. بعد الإنتهاء من صنع الرابط قم بالضغط عليه لتتأكد أنه يرسلك حيثما أردت.</p> + +<div class="note"> +<p dir="rtl">الكلمة <code>href</code> قد تبدو خيار غريب لاسم السِمَة للوهلة الأولى. إذا كنت تواجه مشكلة في تذكر اسم السمة تلك، حاول أن تتذكر أنها إختصار لـ <em><strong>h</strong>ypertext <strong>ref</strong>erence</em> (مرجع نص تشعبي).</p> +</div> + +<p dir="rtl">جرِّب إضافة رابط لصفحتك كما تعلمت.</p> + +<h2 dir="rtl" id="الخاتمة">الخاتمة</h2> + +<p dir="rtl">إذا كنت قد تابعت المقالة من البداية بحذافيرها ينبغي في النهاية على صفحة مماثلة للصورة أدناه (يمكنك رؤيتها أيضاً من <a href="http://mdn.github.io/beginner-html-site/">هنا</a>):</p> + +<p><img alt="A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text" src="https://mdn.mozillademos.org/files/9351/finished-test-page-small.png" style="display: block; height: 838px; margin: 0px auto; width: 716px;"></p> + +<p dir="rtl">إذا واجهتك مشاكل يمكنك دائماً مقارنة عملك مع <a href="https://github.com/mdn/beginner-html-site/blob/gh-pages/index.html">الشفرة المصدرية خاصتنا</a> على جيتهاب.</p> + +<p dir="rtl">في هذه المقالة لم نناقش سوى أمور سطحية في لغة ترميز النص الفائق. يمكنك مطالعة المزيد في <a href="/en-US/Learn/HTML">قسم تعلم لغة ترميز النص الفائق</a> على شبكتنا.</p> + +<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</p> + +<h2 dir="rtl" id="في_هذه_الوحدة_أيضاً">في هذه الوحدة أيضاً</h2> + +<ul dir="rtl"> + <li><a href="/ar/Learn/Getting_started_with_the_web/Installing_basic_software">تثبيت البرمجيات الأساسية</a></li> + <li><a href="/ar/Learn/Getting_started_with_the_web/What_will_your_website_look_like">كيف سيكون مظهر موقعك؟</a></li> + <li><a href="/ar/Learn/Getting_started_with_the_web/Dealing_with_files">التعامل مع الملفات</a></li> + <li><a href="/ar/Learn/Getting_started_with_the_web/HTML_basics">أساسيات لغة ترميز النص الفائق</a></li> + <li><a href="/ar/Learn/Getting_started_with_the_web/CSS_basics">أساسيات صفحات الأنماط الانسيابية</a></li> + <li><a href="/ar/Learn/Getting_started_with_the_web/JavaScript_basics">أساسيات الجافاسكربت</a></li> + <li><a href="/ar/Learn/Getting_started_with_the_web/Publishing_your_website">نشر موقعك</a></li> + <li><a href="/ar/Learn/Getting_started_with_the_web/How_the_Web_works">كيف يعمل الويب</a></li> +</ul> diff --git a/files/ar/learn/getting_started_with_the_web/index.html b/files/ar/learn/getting_started_with_the_web/index.html new file mode 100644 index 0000000000..ff4642f58e --- /dev/null +++ b/files/ar/learn/getting_started_with_the_web/index.html @@ -0,0 +1,58 @@ +--- +title: البدء مع الويب +slug: Learn/Getting_started_with_the_web +tags: + - البدء مع الويب + - دليل + - صفحة هبوط + - مبتدئين +translation_of: Learn/Getting_started_with_the_web +--- +<div>{{LearnSidebar}}</div> + +<div class="summary"> +<p dir="rtl">البدء مع الويب هي سلسلة موجزة تُعرِّفُك على عملية تطوير الويب. سوف نبدأ معك من إعداد الأدوات التي ستحتاجها لبناء صفحة ويب بسيطة وصولاً لعمليّة نشرها.</p> +</div> + +<h2 dir="rtl" id="قصة_موقعك_الأوَّل">قصة موقعك الأوَّل</h2> + +<p dir="rtl">من الصعب إنشاء موقع ويب احترافي، لذلك إن كنت جديداً على تطوير الويب نشجعك على أن تبدأ بشيء صغير. لن تستطيع بناء فيسبوك آخر حالاً، ولكن ليس من الصعب إنشاء موقع بسيط خاص بك على الإنترنت، لذلك سنبدأ من تلك النقطة.</p> + +<p dir="rtl">من خلال متابعة المقالات المسرودة بالترتيب أدناه، سوف تبدأ من لا شيء حتى تحصل على موقعك الأول على الإنترنت. هيا بنا نبدأ!</p> + +<h3 dir="rtl" id="كيف_يعمل_الويب"><a href="/ar/docs/Learn/Getting_started_with_the_web/How_the_Web_works">كيف يعمل الويب</a></h3> + +<p dir="rtl">عندما تدخل إلى مواقعك المفضلة، تحصل العديد من الأمور المعقدة في الخلفيّة التي قد لا تعلمها. في مقالة <a href="/ar/docs/Learn/Getting_started_with_the_web/How_the_Web_works">كيف يعمل الويب</a> قمنا بشرح ما الذي يحدث عندما تقوم بعرض صفحات الويب على حاسبك.</p> + +<h3 dir="rtl" id="تثبيت_البرمجيات_الأساسية"><a href="/ar/Learn/Getting_started_with_the_web/Installing_basic_software">تثبيت البرمجيات الأساسية</a></h3> + +<p dir="rtl">عندما يتعلق الأمر بالأدوات لبناء موقع فهناك الكثير منها لتختار. إذا كنت مازلت في بداية مشوراك، قد تكون مشوشاً من عدد محررات النصوص، وأطر العمل، وأدوات الاختبار الموجودة. في مقالة <a href="/ar/Learn/Getting_started_with_the_web/Installing_basic_software">تثبيت البرمجيات الأساسية</a> قمنا بعرض خطوة بخطوة كيفيّة تثبيت البرمجيات التي تحتاجها لبداية بسيطة في تطوير الويب.</p> + +<h3 dir="rtl" id="كيف_سيكون_مظهر_موقعك؟"><a href="/ar/Learn/Getting_started_with_the_web/What_will_your_website_look_like">كيف سيكون مظهر موقعك؟</a></h3> + +<p dir="rtl">قبل أن تبدأ في كتابة شيفرة موقعك، يجب أن تخطط أولاً. ما المعلومات التي تعرضها؟ ما الخطوط والألوان التي تستخدمها؟ <a href="/ar/Learn/Getting_started_with_the_web/What_will_your_website_look_like">كيف سيكون مظهر موقعك؟</a> لقد قمنا بعنونة الطريقة البسيطة التي يمكنك اتباعها للتخطيط لمحتوى موقعك وتصميمه.</p> + +<h3 dir="rtl" id="التعامل_مع_الملفات"><a href="/ar/Learn/Getting_started_with_the_web/Dealing_with_files">التعامل مع الملفات</a></h3> + +<p dir="rtl">يتألف الموقع من العديد من الملفات: المحتوى النصي، والنص المصدري (البرمجيات)، وملفات التصميم (ملفات الأنماط)، والوسائط، والكثير من الملفات الأخرى.<br> + عندما تبني موقعك، سوف تحتاج لتجميع جميع تلك الملفات بهيكليّة منطقيّة، وتتأكد من أنَّهم قادرين على الوصول لبعضهم البعض.<br> + مقالة <a href="/ar/Learn/Getting_started_with_the_web/Dealing_with_files">التعامل مع الملفات</a> تشرح كيف يمكنك إعداد هيكلة ملفات منطقيّة لموقعك، وما المشاكل التي يجب أن تكون حذر منها.</p> + +<h3 dir="rtl" id="أساسيات_لغة_ترميز_النص_الفائق"><a href="/ar/Learn/Getting_started_with_the_web/HTML_basics">أساسيات لغة ترميز النص الفائق</a></h3> + +<p dir="rtl">لغة ترميز النص الفائق (HTML) هي التعليمات المُستخدمة لهيكلة محتويات الويب وإعطائها معنىً (دلالة) وهدف. على سبيل المثال، هل محتوايَ هو مجموعة من الفقرات، أو قائمة نقطيّة؟ هل لدي صورة مدرجة في صفحتي؟ هل لدي جدول بيانات؟ من دون إرباكك، مقالة <a href="/ar/Learn/Getting_started_with_the_web/HTML_basics">أساسيات لغة ترميز النص الفائق</a> توفر معلومات كافية لجعلك على وفاق مع هذه اللغة.</p> + +<h3 dir="rtl" id="أساسيات_صفحات_الأنماط_الانسيابية_CSS"><a href="/ar/docs/Learn/Getting_started_with_the_web/CSS_basics">أساسيات صفحات الأنماط الانسيابية CSS</a> </h3> + +<p dir="rtl">صفحات الأنماط الانسيابية (او التنسيقات المتعاقبة) (CSS) هي التعليمات المُستخدمة لتنسيق موقعك. حيث تدير هذه التنسيقات الجوانب الفنية البصرية للموقع بدأً من الالوان والخطوطمرورا بالتحكم باحجام وابعاد وهوامش العناصر وتوزيعها وانتهائا بالتأثيرات التصميمية والتحريكية للعناصر (Animation). <br> + فعلى سبيل المثال، هل أريد ان يكون لون النص أسود أم أحمر؟ هل هناك اطار لعنصر معين ماهي الوانه وابعاده؟ كم المسافة بين الاطار والمحتوى؟كم يبعد عن العناصر المجاورة؟ أين يجب أن يظهر المحتوى على الشاشة؟<br> + مقالة <a href="/ar/docs/Learn/Getting_started_with_the_web/CSS_basics">أساسيات صفحات الأنماط الانسيابية CSS</a> تطلعك على ما تحتاج معرفته لتبدأ مع هذه اللغة.</p> + +<h3 dir="rtl" id="أساسيات_الجافاسكربت"><a href="/ar/Learn/Getting_started_with_the_web/JavaScript_basics">أساسيات الجافاسكربت</a></h3> + +<p dir="rtl">جافاسكربت هي اللغة البرمجة المُستخدمة لإضافة مزايا تفاعليّة لموقع. بدا من ادارة ما يجب فعله عند تفاعل المستخدم كضغط احد الازرار، مرورا بجلب بيانات من مصادر متعددة، وتفريغ هذه البيانات على شكل عناصر او رسومات بيانية او في جداول (حيث نلجا لجمل التكرار وبعض الحسابات). انتهاءا بتطبيقات اكثر تعقيدا كالالعاب واضافة التاثيرات التصميمية الديناميكية.<br> + مقالة <a href="/ar/Learn/Getting_started_with_the_web/JavaScript_basics">أساسيات الجافاسكربت</a> سوف تقدم لك فكرة عمّا هو ممكن القيام به بهذه اللغة المثيرة، وكيف يمكنك أن تبدأ معها.</p> + +<h3 dir="rtl" id="نشر_موقعك"><a href="/ar/docs/Learn/Getting_started_with_the_web/Publishing_your_website">نشر موقعك</a></h3> + +<p dir="rtl">حالما تنتهي من تجهيز موقعك وتنظيم ملفاتك البرمجية وملفات المحتوى المكونة للموقع، سوف تحتاج إلى وضع موقعك على الإنترنت حتّى يتمكن الناس من العثور عليه. في مقالة <a href="/ar/docs/Learn/Getting_started_with_the_web/Publishing_your_website">نشر موقعك</a> سنتكلم عن كيف يمكنك وضع شيفرتك البسيطة على الأنترنت بأقل مجهود.</p> diff --git a/files/ar/learn/getting_started_with_the_web/installing_basic_software/index.html b/files/ar/learn/getting_started_with_the_web/installing_basic_software/index.html new file mode 100644 index 0000000000..9d945d2ffd --- /dev/null +++ b/files/ar/learn/getting_started_with_the_web/installing_basic_software/index.html @@ -0,0 +1,74 @@ +--- +title: تثبيت البرمجيات الأساسية +slug: Learn/Getting_started_with_the_web/Installing_basic_software +tags: + - أدوات + - أساسيات + - البدء مع الويب + - تعلم + - مبتدئين + - محرر نصوص +translation_of: Learn/Getting_started_with_the_web/Installing_basic_software +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p dir="rtl">في هذه المقالة، سوف نعرض ما هي الأدوات التي تحتاجها في عملية تطوير الويب، وكيف تقوم بتثبيتها بشكل صحيح.</p> +</div> + +<h2 dir="rtl" id="ما_هي_الأدوات_التي_يتسخدمها_المحترفون؟">ما هي الأدوات التي يتسخدمها المحترفون؟</h2> + +<ul dir="rtl"> + <li><strong>حاسوب</strong>. قد يبدو هذا غريباً لبعضٍ من الناس، ولكن البعض منكم يقرأ هذه المقالة من هاتفه أو من حاسب المكتبة. لعمليّة تطوير ويب جادة، من الأفضل أن تستخدم حاسب مكتبي أو حاسب محمول (بنظام ويندوز، أو ماك، أو لينُكس).</li> + <li><strong>محرر نصوص</strong> لكتابة الشيفرة فيه. قد يكون هذا المحرر محرر نصوص (مثل <a href="http://brackets.io/">Brackets</a>، أو <a href="https://atom.io/">Atom</a>، أو <a href="https://code.visualstudio.com/">Visual Studio Code</a>)، أو محرر هجين (مثل <a href="https://www.adobe.com/products/dreamweaver.html">Dreamweaver</a>، أو <a href="https://www.jetbrains.com/webstorm/">WebStorm</a>). محررات الوثائق المكتبيّة لن تكون مناسبة لهذا الاستخدام؛ لأنها تعتمد على عناصر خفيّة (hidden elements) والتي تتداخل مع محركات العرض المُستخدمة في متصفحات الويب.</li> + <li><strong>متصفح ويب</strong> لتجربة الشيفرة فيه. حالياً أكثر المتصفحات استخداماً هي: <a href="https://www.mozilla.org/en-US/firefox/new/">فايرفوكس</a>، و<a href="https://www.google.com/chrome/browser/">جوجل كروم</a>، و<a href="http://www.opera.com/">أوبرا</a>، و<a href="https://www.apple.com/safari/">سفاري</a>، و<a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">إنترنت إكسبلورر</a>، و<a href="https://www.microsoft.com/en-us/windows/microsoft-edge">مايكروسوفت أيدج</a>. يجب عليك أيضاً تجربة أداء موقعك على الهواتف وعلى المتصفحات القديمة التي قد مايزال جمهورك المُستهدف يستخدمها على نطاق واسع (مثل IE 8–10).</li> + <li><strong>محرر رسومات</strong>، مثل <a href="http://www.gimp.org/">GIMP</a>، أو <a href="http://www.getpaint.net/">Paint.NET</a> ، أو <a href="https://www.adobe.com/products/photoshop.html">Photoshop</a> لتصنع صور لصفحتك.</li> + <li><strong>نظام تحكم بالإصدارات</strong> لتدير الملفات على الخادم، وتساهم في مشروع مع فريق، ولتشارك الشيفرة والملفات، ولتتجنب تضارب التعديلات. لحد الآن يعتبر <a href="http://git-scm.com/">جيت</a> أكثر أدوات التحكم بالإصدارات شيوعاً، كما تعد خدمة الإستضافة <a href="https://github.com/">جيتهاب</a> المبنيّة على جيت الأكثر شيوعاً في مجال استضافة المشاريع.</li> + <li><strong>برنامج FTP</strong> المُستخدم على حسابات استضافات الويب القديمة لإدارة الملفات على الخادم (يزداد استخدام <a href="http://git-scm.com/">جيت</a> لهذا الغرض، مؤخراً، بدلاً من برمجيات FTP التقليديّة). هناك الكثير من برامج FTP المتوافرة ومنها <a href="https://cyberduck.io/">Cyberduck</a>، و<a href="http://fetchsoftworks.com/">Fetch</a>، و<a href="https://filezilla-project.org/">FileZilla</a>.</li> + <li><strong>نظام أتمتة</strong> مثل <a href="http://gruntjs.com/">Grunt</a> أو <a href="http://gulpjs.com/">Gulp </a>لأتمتة بعض المهمات التكراريّة، مثل تصغير حجم الشيفرة واختبارها.</li> + <li>القوالب، والمكتبات، وأطر العمل، ...إلخ لتسريع كتابة الوظائف الشائعة.</li> + <li>بالإضافة للمزيد من الأدوات!</li> +</ul> + +<h2 dir="rtl" id="ما_الأدوات_التي_احتاجها_حالياً؟">ما الأدوات التي احتاجها حالياً؟</h2> + +<p dir="rtl">تلك القائمة تبدو مرعبة، ولكن لحسن الحظ تستطيع البدء بتطوير الويب بدون معرفة أي شيء عن معظم تلك الأدوات. في هذه القائمة سنقوم بإعداد الحد الأدنى من تلك الأدوات (محرر النصوص وبعض متصفحات الويب العصريّة).</p> + +<h3 dir="rtl" id="تثبيت_محرر_النصوص">تثبيت محرر النصوص</h3> + +<p dir="rtl">أنت على الأرجح تملك محرر نصوص بدائي (بسيط) على حاسبك. فيأتي الويندوز بشكل أفتراضي متضمناً برنامج <a href="https://en.wikipedia.org/wiki/Microsoft_Notepad">Notepad </a>ويأتي نظام الماك مع <a href="https://en.wikipedia.org/wiki/TextEdit">TextEdit</a>. تختلف توزيعات لينكس بالمحرر الإفتراضي، فتأتي أبونتو مثلاً بمحرر <a href="https://en.wikipedia.org/wiki/Gedit">gedit</a>.</p> + +<p dir="rtl">من أجل تطوير الويب، يمكنك على الأرجح استخدام شيء أفضل من Notepad أو TextEdit. نحن نوصي ببدء استخدام <a href="http://brackets.io">Brackets</a>، فهو محرر مجاني يقدم ميزة العرض الحي والتلميحات (code hints).</p> + +<h3 dir="rtl" id="تثبيت_المتصفحات_العصريّة">تثبيت المتصفحات العصريّة</h3> + +<p dir="rtl">سنقوم حالياً بتثبيت بضعة متصفحات ويب فقط لتجربة شيفرتنا. اختر نظام تشغيلك أدناه وانقر على الروابط المرفقة لتحميل مثبتات متصفحاتك المفضلة:</p> + +<ul dir="rtl"> + <li>لينُكس: <a href="https://www.mozilla.org/en-US/firefox/new/">فايرفوكس</a>، <a href="https://www.google.com/chrome/browser/">جوجل كروم</a>، <a href="http://www.opera.com/">أوبرا</a>.</li> + <li>ويندوز: <a href="https://www.mozilla.org/en-US/firefox/new/">فايرفوكس</a>، <a href="https://www.google.com/chrome/browser/">جوجل كروم</a>، <a href="http://www.opera.com/">أوبرا</a>، <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">إنترنت إكسبلورر</a>، <a href="https://www.microsoft.com/en-us/windows/microsoft-edge">مايكروسوفت أيدج</a> (يأتي نظام ويندوز 10 مع متصفح أيدج إفتراضياً. إذا كنت على ويندوز 7 أو على إصدار أعلى يجب عليك تثبيت إنترنت إكسبلورر 11. أما إن كنت تملك إصدار مختلف، فيجب عليك تثبيت متصفح بديل).</li> + <li>ماك: <a href="https://www.mozilla.org/en-US/firefox/new/">فايرفوكس</a>، <a href="https://www.google.com/chrome/browser/">جوجل كروم</a>، <a href="http://www.opera.com/">أوبرا</a>، <a href="https://www.apple.com/safari/">سفاري</a> (يأتي متصفح سفاري مع نظام IOS ونظام ماك افتراضياً).</li> +</ul> + +<p dir="rtl">قبل أن تبدأ، يجب على الأقل أن تُثبِت متصفحين من المتصفحات السالف ذكرها حتى يكونوا جاهزين للعمل.</p> + +<h3 dir="rtl" id="تثبيت_خادم_ويب_محلي">تثبيت خادم ويب محلي</h3> + +<p dir="rtl">بعض الأمثلة ستحتاج لِأن تعمل عبر خادم ويب. تستطيع إيجاد طريقة القيام بذلك من خلال مقالة <a href="/ar/docs/Learn/Common_questions/set_up_a_local_testing_server">كيف تُعِد خادم اختبار محلي؟ </a></p> + +<p>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</p> + +<h2 dir="rtl" id="في_هذه_الوحدة_أيضاًEdit">في هذه الوحدة أيضاً<a class="button section-edit only-icon" href="https://developer.mozilla.org/ar/docs/Learn/Getting_started_with_the_web/%D8%A3%D8%B3%D8%A7%D8%B3%D9%8A%D8%A7%D8%AA_%D9%84%D8%BA%D8%A9_%D8%AA%D8%B1%D9%85%D9%8A%D8%B2_%D8%A7%D9%84%D9%86%D8%B5_%D8%A7%D9%84%D9%81%D8%A7%D8%A6%D9%82$edit#في_هذه_الوحدة" rel="nofollow, noindex"><span>Edit</span></a></h2> + +<ul dir="rtl"> + <li><a href="/ar/Learn/Getting_started_with_the_web/Installing_basic_software">تثبيت البرمجيات الأساسية</a></li> + <li><a href="/ar/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">كيف سيكون مظهر موقعك؟</a></li> + <li><a href="/ar/Learn/Getting_started_with_the_web/Dealing_with_files">التعامل مع الملفات</a></li> + <li><a href="/ar/Learn/Getting_started_with_the_web/HTML_basics">أساسيات لغة ترميز النص الفائق</a></li> + <li><a href="/ar/docs/Learn/Getting_started_with_the_web/CSS_basics">أساسيات صفحات الأنماط الانسيابية</a></li> + <li><a href="/ar/Learn/Getting_started_with_the_web/JavaScript_basics">أساسيات الجافاسكربت</a></li> + <li><a href="/ar/docs/Learn/Getting_started_with_the_web/Publishing_your_website">نشر موقعك</a></li> + <li><a href="/ar/docs/Learn/Getting_started_with_the_web/How_the_Web_works">كيف يعمل الويب</a></li> +</ul> diff --git a/files/ar/learn/getting_started_with_the_web/javascript_basics/index.html b/files/ar/learn/getting_started_with_the_web/javascript_basics/index.html new file mode 100644 index 0000000000..130aeeed41 --- /dev/null +++ b/files/ar/learn/getting_started_with_the_web/javascript_basics/index.html @@ -0,0 +1,422 @@ +--- +title: أساسيات الجافاسكربت +slug: Learn/Getting_started_with_the_web/JavaScript_basics +tags: + - برمجة سكربتات + - تعلم + - جافاسكربت + - مبتدئ + - ويب +translation_of: Learn/Getting_started_with_the_web/JavaScript_basics +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary" dir="rtl"> +<p>جافا سكريبت هي لغة البرمجة التي تضيف التفاعل إلى موقع الويب الخاص بك (على سبيل المثال: الألعاب، والردود عندما يتم الضغط على أزرار أو إدخال البيانات في النماذج، والتصميم الديناميكي، والرسوم المتحركة). تساعدك هذه المقالة على البدء في هذه اللغة المثيرة وتعطيك فكرة عن ما هو ممكن.</p> +</div> + +<h2 dir="rtl" id="ما_هي_جافاسكريبت،_حقاً؟">ما هي جافاسكريبت، حقاً؟</h2> + +<p dir="rtl">{{Glossary("JavaScript")}} ("JS" للإختصار)هي بشكل كامل {{Glossary("لغة برمجة ديناميكية ", "لغة برمجة ديناميكية")}} حيت, عندما تطبق على ملف {{Glossary("HTML")}} , يمكن أن توفر التفاعل الديناميكي على المواقع. تم اختراعه من قبل بريندان إيتش، المؤسس المشارك لمشروع موزيلا، ومؤسسة موزيلا، وشركة موزيلا.</p> + +<p dir="rtl">جافا سكريبت متعددة الجوانب والاستعمالات بشكل لا يصدق. يمكنك البدء صغير، مع دوارات، معارض الصور، مخططات بيانية، والاستجابات لنقرات زر. مع المزيد من الخبرة، عليك أن تكون قادرا على خلق الألعاب، والرسوم المتحركة 2D و 3D الرسومات، تطبيقات شاملة لقاعدة البيانات، وأكثر من ذلك بكثير!</p> + +<p dir="rtl">جافا سكريبت نفسها المدمجة إلى حد ما إلى الآن مرنة جدا. وقد كتب المطورين مجموعة كبيرة ومتنوعة من الأدوات على رأس لغة جافا سكريبت الأساسية، وفتح كمية هائلة من وظائف إضافية مع الحد الأدنى من الجهد. وتشمل هذه:</p> + +<ul dir="rtl"> + <li>متصفح واجهات برمجة التطبيقات ({{Glossary("API","APIs")}}) المدمج في متصفحات الويب، وتوفير وظائف مثل إنشاء HTML ديناميكيا ووضع أنماط CSS، وجمع وتلاعب في دفق الفيديو من كاميرا ويب المستخدم، أو توليد الرسومات 3D وعينات الصوت.</li> + <li> APIs الطرف الثالث يسمح للمطورين بدمج الوظائف في مواقعهم من موفري المحتوى الآخرين، مثل تويتر أو فاسيبوك.</li> + <li>أطر ومكتبات الطرف الثالث التي يمكن تطبيقها على HTML الخاص بك للسماح لك لبناء المواقع والتطبيقات بشكل أسرع.</li> +</ul> + +<p dir="rtl">نظرا لأن هذه المقالة من المفترض أن تكون مقدمة خفيفة لجافا سكريبت، فلن نربكك في هذه المرحلة من خلال الحديث بالتفصيل عن الفرق بين لغة جافا سكريبت الأساسية والأدوات المختلفة المذكورة أعلاه. يمكنك معرفة كل ذلك بالتفصيل في وقت لاحق، في <a href="/ar/docs/https://developer.mozilla.org/en-US/docs/Learn/JavaScript" style="cursor: pointer;">منطقتنا لتعليم جافا سكريبت</a>، وفي بقية MDN.</p> + +<p dir="rtl">أدناه سوف أعرض لكم لبعض جوانب اللغة الأساسية، وعليك أن تلعب أيضا مع عدد قليل من الميزات API المتصفح أيضا. إستمتع!</p> + +<h2 dir="rtl" id="مثال_hello_world">مثال "hello world"</h2> + +<p dir="rtl">قد يبدو القسم أعلاه مثير حقا، ولذا ينبغي أن - جافاسكريبت هي واحدة من تقنيات الويب الأكثر حيوية، وأثناء البدء في الحصول على ماهو جيد في استخدامه، مواقعك الخاصة سوف تدخل بك إلى بعداً جديداً من القوة والإبداع.</p> + +<p dir="rtl">ومع ذلك، لتصبح مرتاح مع جافا سكريبت أصعب قليلا من أن تصبح مرتاح مع HTML و CSS. قد تضطر إلى أن تبدأ صغيراً وتظل تعمل في خطوات صغيرة منسقة . للبدء، سنعرض لك كيفية إضافة بعض أساسيات جافا سكريبت إلى صفحتك، وإنشاء "hello world!" مثال (<a href="/ar/docs/https://en.wikipedia.org/wiki/%22Hello,_World!%22_program" style="cursor: pointer;">المعيار في أمثلة البرمجة الأساسية</a>).</p> + +<div class="warning"> +<p dir="rtl"><strong>هام: إذا لم تكن متابعاً لبقية الدورة التدريبية، فيمكنك <a href="/ar/docs/https://github.com/mdn/beginner-html-site-styled/archive/gh-pages.zip" style="cursor: pointer;">تنزيل شيفرة المثال</a> هذا واستخدامه كنقطة بداية.</strong></p> +</div> + +<ol> + <li dir="rtl">أولا، انتقل إلى موقع الاختبار الخاص بك وإنشاء مجلد جديد يسمى 'scripts' (بدون علامات الاقتباس). ثم، داخل مجلد scripts الجديد الذي قمت بإنشائه، إنشاء ملف جديد يسمى main.js. إحفظه في مجلد scripts.</li> + <li dir="rtl">بعد ذلك، في ملف index.html، أدخل العنصر التالي في سطر جديد قبل علامة الإغلاق <body/> مباشرة: + <pre class="brush: html"><script src="scripts/main.js"></script></pre> + </li> + <li dir="rtl">هذا بكل بساطة يعمل كما يعمل {{htmlelement("link")}} للـCSS، يقوم بإضافة الجافاسكربت للصفحة، لترى التأثيرات على الصفحة.</li> + <li dir="rtl">الآن اضف هذا الكود الى ملف <code>main.js</code>: + <pre class="brush: js" dir="rtl">var myHeading = document.querySelector('h1'); +myHeading.textContent = 'Hello world!';</pre> + </li> + <li dir="rtl">الآن تأكد أنك حفظت التعديلات على ملف HTML و الجافاسكربت. ثم قم بفتح ملف الHTML بالمتصفح، ينبغى ان تشاهد نتيجة مماثلة للصورة:<img alt="" src="https://mdn.mozillademos.org/files/9543/hello-world.png" style="display: block; height: 236px; margin: 0px auto; width: 806px;"></li> +</ol> + +<div class="note" dir="rtl"> +<p><strong>ملاحظة</strong>: السبب لأننا اضفنا {{htmlelement("script")}} قرب نهاية ملف HTML لأن المتصفح يقرأ الملف بالترتيب من السطر الأول الى الأخير. فإذا كان ملف الجافاسكربت يقوم بتعديل ملف الHTML ولكن ملف الجافاسكربت عمل قبل ان يتم تحميل HTML بشكل كامل فلن يعمل بشكل صحيح. لذلك يفضل دائما اضافة ملفات الجافاسكربت بنهاية ملف الHTML</p> +</div> + +<h3 dir="rtl" id="مالذي_حدث؟">مالذي حدث؟</h3> + +<p dir="rtl">الآن العنوان اصبح "Hello world!" بإستخدام الجافاسكربت. فعلت ذلك بإستخدام دالة تسمى <code>{{domxref("Document.querySelector", "querySelector()")}}</code> لحفظ مرجع للعنوان وحفظه الى متغير يسمى <code>myHeading</code>. هذا قريب جدا لما تفعله بإستخدام CSS، اذا اردت ان تقوم بتعديل احد العناصر يجب اختياره مسبقا.</p> + +<p dir="rtl">بعد ذلك، حددت قيمة خاصية <code>{{domxref("Node.textContent", "textContent")}}</code> للمتغير <code>myHeading</code> الى "Hello world!"</p> + +<div class="note" dir="rtl"> +<p><strong>ملاحظة</strong>: جميع الخواص اللاتي استخدمتهن بالأعلى هي جزء من <a href="/en-US/docs/Web/API/Document_Object_Model">Document Object Model (DOM) API</a>, الذي يسمح لك بالتعديل على الصفحات.</p> +</div> + +<h2 dir="rtl" id="أساسيات_اللغة_ودورة_بسيطة">أساسيات اللغة ودورة بسيطة</h2> + +<p dir="rtl">لنتعلم بعض المميزات الأساسية بلغة الجافاسكربت، لتفهم كيف تعمل. نقطة مهمة هي أن اغلب المفاهيم تتشارك معها اللغات البرمجية الأخرى، لذلك اذا كسبت خبرة بهذه المفاهيم، يمكنك برمجة كل ما تريد!</p> + +<div class="warning" dir="rtl"> +<p><strong>مهم</strong>: في هذا الدرس، جرب بأن تكتب الأكواد في كونسول الجافاسكربت لترى ماذا تعمل. لمعرفة المزيد عن الكونسول القِ نظرة على هذا الدرس <a href="/en-US/Learn/Discover_browser_developer_tools">Discover browser developer tools</a>.</p> +</div> + +<h3 dir="rtl" id="المتغيرات">المتغيرات</h3> + +<p dir="rtl">{{Glossary("Variable", "Variables")}} هي مثل الصناديق نقوم بتخزين البيانات فيها. تبدأ اولا بتعريف المتغير بإستخدام كلمة <code>var</code> وبعدها تسميها بالإسم الذي ترغب به:</p> + +<pre class="brush: js">var myVariable;</pre> + +<div class="note" dir="rtl"> +<p><strong>ملاحظة</strong>: الفاصلة المنقوطة بنهاية السطر تعني أن السطر البرمجي ينتهي هنا; لكنها ليست مطلوبة الا اذا احتجت ان تدمج اكثر من سطر برمجي في سطر برمجي واحد. لذلك من الأفضل وما هو متعارف عليه ان تقوم بإضافة الفاصلة المنقوطة نهاية كل سطر برمجي لتفادي الأخطاء البرمجية الغير مقصودة. بالطبع هناك قواعد متى يفضل إستخدامها ومتى لا يفضل، للمزيد يمكنك الإطلاع على <a href="http://news.codecademy.com/your-guide-to-semicolons-in-javascript/">Your Guide to Semicolons in JavaScript</a>.</p> +</div> + +<div class="note" dir="rtl"> +<p><strong>ملاحظة</strong>: يمكنك تسمية المتغيرات بالإسم الذي تفضله. لكن هناك بعض الشروط التي ينبغي الإلتزام بها (إطلع على هذا الدرس <a href="http://www.codelifter.com/main/tips/tip_020.shtml">variable naming rules</a>). إذا ما كنت غير متأكد انه يمكنك استخدام اسم معين ام لا يمكنك إستخدام هذا الموقع<a href="https://mothereff.in/js-variables"> يمكنك إستخدام هذا الموقع </a> للتأكد أن الإسم صالح للإستخدام.</p> +</div> + +<div class="note" dir="rtl"> +<p><strong>ملاحظة</strong>: الجافاسكربت حساسة لحجم الحرف الإنجليزي, مثلا <code>myVariable</code> يعتبر متغير اخر عن <code>myvariable</code> . لذلك دائما اذا واجهت مشكلة تأكد من احجام حروف المتغيرات لديك.</p> +</div> + +<p dir="rtl">بعد تعريف المتغير يمكنك إسناد قيمة إليه:</p> + +<pre class="brush: js">myVariable = 'Bob';</pre> + +<p dir="rtl">يمكنك ايضا أن تعرف المتغير وتسند إليه قيمه بنفس الوقت:</p> + +<pre class="brush: js">var myVariable = 'Bob';</pre> + +<p dir="rtl">يمكنك الحصول على قيمة المتغير بإستخدام إسم المتغير:</p> + +<pre class="brush: js">myVariable;</pre> + +<p dir="rtl">يمكنك أيضا تغيير قيمة المتغير متى ما أردت:</p> + +<pre>var myVariable = 'Bob'; +myVariable = 'Steve';</pre> + +<p dir="rtl">بإمكانك تخزين انواع مختلفة من البيانات بالمتغيرات <a href="/en-US/docs/Web/JavaScript/Data_structures">انواع البيانات</a>:</p> + +<table class="standard-table" style="height: 566px; width: 751px;"> + <thead> + <tr> + <th scope="row">نوع المتغير</th> + <th scope="col">شرح</th> + <th scope="col">مثال</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">{{Glossary("String")}}</th> + <td dir="rtl">نص محاط بعلامات التنصيص</td> + <td><code>var myVariable = 'Bob';</code></td> + </tr> + <tr> + <th scope="row">{{Glossary("Number")}}</th> + <td dir="rtl">رقم, لاحظ أن الأرقام لا نحيطها بعلامات التنصيص</td> + <td><code>var myVariable = 10;</code></td> + </tr> + <tr> + <th scope="row">{{Glossary("Boolean")}}</th> + <td dir="rtl">قيمة صحيحة <code>true</code> او خاطئة <code>false</code> هي كلمات خاصة بالجافاسكربت لا تحتاج علامات تنصيص</td> + <td><code>var myVariable = true;</code></td> + </tr> + <tr> + <th scope="row">{{Glossary("Array")}}</th> + <td dir="rtl">قائمة تحتوي على عدة بيانات بإسم متغير واحد</td> + <td><code>var myVariable = [1,'Bob','Steve',10];</code><br> + بإمكانك إستدعاء كل قيمة بالمصفوفة بهذا الشكل:<br> + <code>myVariable[0]</code>, <code>myVariable[1]</code>, الخ.</td> + </tr> + <tr> + <th scope="row">{{Glossary("Object")}}</th> + <td dir="rtl">بكل بساطة كل شيء بالجافاسكربت عبارة عن كائن. ويمكنك تخزينه بإسم متغير. تذكر ذلك وانت تتعلم</td> + <td><code>var myVariable = document.querySelector('h1');</code><br> + All of the above examples too.</td> + </tr> + </tbody> +</table> + +<p dir="rtl">لماذا نحتاج المتغيرات؟ نحتاج المتغيرات اذا اردنا ان نبرمج اي شيء قيمته تتغيّر. على سبيل المثال تعديل رسالة ترحيب بعضو جديد، فمن غير المعقول ان تكتب رسالة خاصة لكل عضو جديد بل تستخدم المتغيرات لتعديل الرسالة على حسب إسم المستخدم.</p> + +<h3 dir="rtl" id="التعليقات">التعليقات</h3> + +<p dir="rtl">يمكنك كتابة التعليقات كما تفعل بلغة الـCSS:</p> + +<pre class="brush: js">/* +أي شيء هنا يعتبر تعليق. +*/</pre> + +<p dir="rtl">اذا كان تعليقك لا يتكون الا من سطر واحد يمكنك إستخدام الطريقة السهلة التالية:</p> + +<pre class="brush: js" style="font-size: 14px;">// هذا تعليق +</pre> + +<h3 dir="rtl" id="العوامل_الحسابية">العوامل الحسابية</h3> + +<p dir="rtl"><code>{{Glossary("operator")}}</code> هو عامل حسابي ينتج لنا نتيجة بإستخدام اكثر من قيمة أو متغير. بالجدول التالي يمكنك الإطلاع على بعض الأمثلة على كيفية استخدامهم وتجربتهم بكونسول الجافاسكربت:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="row">العامل الحسابي</th> + <th scope="col">شرح</th> + <th scope="col">الرمز</th> + <th scope="col">مثال</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">الجمع</th> + <td>يستخدم لجمع الأرقام أو لدمج النصوص مع بعضهم البعض</td> + <td><code>+</code></td> + <td><code>6 + 9;<br> + "Hello " + "world!";</code></td> + </tr> + <tr> + <th scope="row">الطرح, الضرب, القسمة</th> + <td>بالطبع تعمل كما تعمل بالرياضيات</td> + <td><code>-</code>, <code>*</code>, <code>/</code></td> + <td><code>9 - 3;<br> + 8 * 2; // نستخدم رمز النجمة للضرب<br> + 9 / 3;</code></td> + </tr> + <tr> + <th scope="row"> + <p>الإسناد</p> + </th> + <td>كما تعلمت مسبقا. نستخدم علامة يساوي واحدة لإسناد قيمة إلى متغير</td> + <td><code>=</code></td> + <td><code>var myVariable = 'Bob';</code></td> + </tr> + <tr> + <th scope="row">المساواة</th> + <td>تقوم بإختبار قيمتين. اذا كانو متساويين تقوم بإرجاع قيمة صح <code>true</code> وإذا كانت خاطئة تقوم بإرجاع قيمة خطأ <code>false</code></td> + <td><code>===</code></td> + <td><code>var myVariable = 3;<br> + myVariable === 4;</code></td> + </tr> + <tr> + <th scope="row">ليست, لا تساوي</th> + <td> + <p>ترجع قيمة عكس القيمة المعطاة. فعلى سبيل المثال إذا اعطيتها قيمة صحيحة ترجع لك قيمة خاطئة والعكس صحيح. واذا أستخدمت مع علامة المساواة ترجع صح اذا كانت القيمتين لا يتساوون وترجع خطأ إذا كانوا يتساوون</p> + </td> + <td><code>!</code>, <code>!==</code></td> + <td> + <p>القيمة هنا صحيحة لأن <code>myVariable</code> تساوي 3 لكنها سترجع خطأ لأننا إستخدمنا علامة <code>!</code></p> + + <p><code>var myVariable = 3;<br> + !(myVariable === 3);</code></p> + + <p>هنا نجرب "هل المتغير <code>myVariable</code> لا يساوي 3".</p> + + <p>لكنه سيرجع قيمة خاطئة لأن <code>myVariable</code> تساوي 3</p> + + <p><code><code>var myVariable = 3;</code><br> + myVariable !== 3;</code></p> + </td> + </tr> + </tbody> +</table> + +<p dir="rtl">هناك الكثير للتعلم عن العمليات الرياضية بالجافاسكربت، لكن هذا كافي لهذه المرحلة.إطلع على <a href="/en-US/docs/Web/JavaScript/Reference/Operators">Expressions and operators</a> للمزيد.</p> + +<div class="note" dir="rtl"> +<p><strong>ملاحظة</strong>: قد تحصل على نتائج غريبة عند إستخدام اكثر من نوع من البيانات بالعمليات الحسابية. لذلك كن حريص بأن تستخدم المتغيرات بشكل صحيح لتحصل على النتيجة المرادة. على سبيل المثال قم بكتابة <code>"35" + "25"</code> بكونسول الجافاسكربت، نتيجة غريبة أليس كذلك؟ لأن علامات التنصيص تقوم بتحويل الأرقام إلى نصوص لذلك عندما جمعتهم بالفعل انت قمت بدمج نصين وليس بجمع رقمين. لذلك جرب كتابة <code>35 + 25</code> بالكونسول وسترى النتيجة الصحيحة.</p> +</div> + +<h3 dir="rtl" id="الشروط">الشروط</h3> + +<p dir="rtl">الأكواد الشَرْطِيّة تسمح لك بإختبار شرط محدد فإذا كان صحيحا يقوم بتشغيل اكواد أخرى. وإذا كان خاطئا يقوم بتجاهل الأكواد. من أكثر الأكواد الشَرْطِيّة إستخداما هي <code>if ... else</code> والمثال عليها:</p> + +<pre class="brush: js">var iceCream = 'chocolate'; +if (iceCream === 'chocolate') { + alert('Yay, I love chocolate ice cream!'); +} else { + alert('Awwww, but chocolate is my favorite...'); +}</pre> + +<p dir="rtl">الكود الذي بداخل القوسين <code>if ( ... )</code> هو الإختبار الشَرْطي. يمكنك كتابة الاختبارات بداخله مثال هل المتغير يساوي عدد معين او نص معين. بمالمثال قمنا بإختبار هل المتغير <code>iceCream</code> يساوي القيمة <code>chocolate</code>. بالطبع النتيجة صحيح كما هو واضح امامنا لذلك سيقوم بتشغيل السطور البرمجية بداخل الأقواس <code>{}</code>، لكن ماذا لو كان المتغير لا يساوي <code>chocolate</code> في هذه الحالة ستقوم الجافاسكربت بتشغيل السطور الموجودة بداخل الأقواس <code>{}else</code>.</p> + +<h3 dir="rtl" id="الدوال">الدوال</h3> + +<p dir="rtl">{{Glossary("Function", "Functions")}} هي طريقة لتجميع السطور البرمجية متى ما أردت إعادة إستخدامها أو لأجل الترتيب. فعلى سبيل المثال لديك كود تريد أن تقوم بتشغيله اكثر من مرة ومن أكثر من مكان، فمن غير المعقول كتابة الكود أكثر من مرة في اكثر من مكان، بل يفضل كتابته مرة واحدة وإسناده إلى دالة تقوم بإستدعائها بإسم الدالة متى ما اردت. تذكر أنك إستخدمت بعض الدوال مسبقا والأمثلة عليها كالتالي:</p> + +<ol> + <li> + <pre class="brush: js">var myVariable = document.querySelector('h1');</pre> + </li> + <li> + <pre class="brush: js">alert('hello!');</pre> + </li> +</ol> + +<p dir="rtl">هذه الدوال, <code>document.querySelector</code> و <code>alert</code>, هي دوال جاهزة بالمتصفح يمكنك إستخدامها متى ما أردت.</p> + +<p dir="rtl">إذا رأيت شيئا مشابها للمتغيرات لكنه ينتهي بقوسين <code>()</code> غالبا تعني انها دالّة. الدوال عادة تطلب {{Glossary("Argument", "arguments")}} وهي عبارة عن بيانات تحتاجها الدالة لتأدي عملها المطلوب منها. هذه البيانات تكون داخل القوسين <code>()</code> ونقوم بإرسال عدة بيانات بالتفريق بينهم بعلامة الفاصلة <code>,</code> اذا ما دعت الحاجة لذلك.</p> + +<p dir="rtl">على سبيل المثال دالة <code>alert()</code> وهي دالة تقوم بإبراز رسالة منبثقة للمستخدم داخل المتصفح. ونحتاج ان نعطيها النص المراد عرضه للمستخدم.</p> + +<p dir="rtl">المميز بالموضوع انه يمكنك كتابة الدوال الخاصة بك. بالمثال التالي سنطلع على كيف يمكنك كتابة الدالة والتي تقبل بأن تأخذ رقمين وتقوم بإرجاع ناتج الضرب بينهم:</p> + +<pre class="brush: js">function multiply(num1,num2) { + var result = num1 * num2; + return result; +}</pre> + +<p dir="rtl">قم بكتابة الكود بالأعلى بكونسول الجافاسكربت ثم قم بتجربة الدالة بإستخدام عدة ارقام، على سبيل المثال:</p> + +<pre class="brush: js">multiply(4,7); +multiply(20,20); +multiply(0.5,3);</pre> + +<div class="note" dir="rtl"> +<p><strong>ملاحظة</strong>: كلمة <a href="/en-US/docs/Web/JavaScript/Reference/Statements/return"><code>return</code></a> تخبر الدالة ماذا ينبغي ان تقوم بإرجاعه اذا قمنا بإستدعائها.</p> +</div> + +<h3 dir="rtl" id="الأحداث">الأحداث</h3> + +<p dir="rtl">لبناء صفحات ويب تفاعلية فإننا سنحتاج الى ما يسمى بالأحداث (Events). الفكرة بكل بساطة هي بأن تقوم بربط جزء معين من برنامج ليقوم بالعمل عند حدوث حدثٌ معين. أحد اهم الأحداث وأكثرها إستخداما هو حدث <a href="/en-US/docs/Web/Events/click">click event</a> وهو يحدث عندما تقوم بالضغط على شيء ما بالفأرة. لنأخذ مثال بسيط يشرح حدث الضغط، قم بنسخ الكود التالي ولصقه بكونسول الجافاسكربت الخاص بك ثم قم بالضغط على أي مكان بالصفحة:</p> + +<pre class="brush: js">document.querySelector('html').onclick = function() { + alert('Ouch! Stop poking me!'); +}</pre> + +<p dir="rtl">هناك اكثر من طريقة لربط حدث بأحد عناصر الصفحة. في هذا المثال قمنا بإختيار عنصر {{htmlelement("html")}}، وحددنا حدث الضغط عليه <code><a href="/en-US/docs/Web/API/GlobalEventHandlers.onclick">onclick</a></code> وقمنا بإعطاه الحدث دالة مجهولة (من غير إسم) يقوم بتشغيلها عندما يحصل هذا الحدث (الضغط على العنصر).</p> + +<p dir="rtl">لاحظ أن:</p> + +<pre class="brush: js">document.querySelector('html').onclick = function() {};</pre> + +<p dir="rtl">مثل:</p> + +<pre class="brush: js">var myHTML = document.querySelector('html'); +myHTML.onclick = function() {};</pre> + +<p dir="rtl">لكنها بصيغة اقصر.</p> + +<h2 dir="rtl" id="تحسين_مثال_الموقع_الخاص_بنا">تحسين مثال الموقع الخاص بنا</h2> + +<p dir="rtl">الآن تعلمنا بعض بعض أساسيات الجافاسكربت، لنقم بإضافة بعض الخصائص الرائعة إلى موقعنا الذي تعلمنا عليه بداية الدرس.</p> + +<h3 dir="rtl" id="إضافة_خاصية_إستبدال_الصور">إضافة خاصية إستبدال الصور</h3> + +<p dir="rtl">في هذا الجزء من الدرس. سنضيف صورة جديدة إلى موقعنا بإستخدام الجافاسكربت و DOM API للتبديل بين الصور عند الضغط على الصورة.</p> + +<ol> + <li dir="rtl">بالبداية إبحث عن صورة تود عرضها بالصفحة. تأكد أن الصورة بنفس حجم الصورة السابقة او اقرب</li> + <li dir="rtl">احفظ الصورة بمجلد <code>images</code>.</li> + <li dir="rtl">غير إسم الصورة إلى <code>firefox2.png</code>.</li> + <li dir="rtl">إفتح ملف <code>main.js</code>, وقم بكتابة الكود التالي بالملف. (إذا كنت تحتفظ بالكود بالأمثلة السابقة يفضل حذفه.) + <pre class="brush: js">var myImage = document.querySelector('img'); + +myImage.onclick = function() { + var mySrc = myImage.getAttribute('src'); + if(mySrc === 'images/firefox-icon.png') { + myImage.setAttribute ('src','images/firefox2.png'); + } else { + myImage.setAttribute ('src','images/firefox-icon.png'); + } +}</pre> + </li> + <li dir="rtl">احفظ جميع الملفات ثم قم بفتح ملف <code>index.html</code> بالمتصفح. الآن عندما تضغط على الصورة يجب ان تتحول إلى الصورة الأخرى!</li> +</ol> + +<p dir="rtl">كما تلاحظ بالكود فقد قمنا بحفظ مرجع إلى الصورة {{htmlelement("img")}} بإسم متغير <code>myImage</code>، بعد ذلك نقوم بربط حدث <code>onclick</code> بدالة مجهولة (بدون اسم) لتعمل عن الضغط على الصورة، الدالة تقوم بعمل التالي:</p> + +<ol> + <li dir="rtl">نقوم بجلب قيمة خاصية <code>src</code> الخاصة بالصورة.</li> + <li dir="rtl">ثم نقوم بالتأكد هل قيمة <code>src</code> الخاصة بالصورة تساوي رابط الصورة الأساسية : + <ol> + <li>إذا كانت كذلك فنقوم بتغيير قيمة <code>src</code> بقيمة الصورة الثانية ليتم تحميلها بعنصر {{htmlelement("img")}}.</li> + <li> لكن اذا كانت غير ذلك (بمعنى انه قد قمنا بتغيير القيمة) فسنقوم بإرجاع قيمة <code>src</code> إلى القيمة الأساسية.</li> + </ol> + </li> +</ol> + +<h3 dir="rtl" id="إضافة_رسالة_ترحيبية_مخصصة_للمستخدم">إضافة رسالة ترحيبية مخصصة للمستخدم</h3> + +<p dir="rtl">الآن سنقوم بكتابة بعض السطور البرمجية لتغيير عنوان الصفحة إلى رسالة مخصصة للمستخدم. حيث سيقوم المستخدم بإدخال إسمه ثم نقوم بإضافة إسمه إلى العنوان عندما يقوم بالدخول إلى الصفحة. سنقوم بتخزين إسم المستخدم بخاصية تخزين البيانات الموجودة بالمتصفح التي تسمى <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API">Web Storage API</a>. وسنقوم أيضا بإضافة خيار لتغيير إسم المستخدم.</p> + +<ol> + <li dir="rtl">بملف <code>index.html</code>, قم بإضافة هذا السطر قبل عنصر {{htmlelement("script")}}: + + <pre class="brush: html"><button>Change user</button></pre> + </li> + <li dir="rtl">بملف <code>main.js</code>, قم بإضافة هذا الكود في آخر الملف كما هي، الكود يقوم بتخزين مرجع للزر والعنوان بمتغيرات: + <pre class="brush: js">var myButton = document.querySelector('button'); +var myHeading = document.querySelector('h1');</pre> + </li> + <li dir="rtl">الآن قم بإضافة هذه الدالة التي تقوم بتخزين إسم المستخدم بقاعدة بيانات المتصفح: + <pre class="brush: js">function setUserName() { + var myName = prompt('Please enter your name.'); + localStorage.setItem('name', myName); + myHeading.textContent = 'Mozilla is cool, ' + myName; +}</pre> + الدالة كما تلاحظ تقوم بإستخدام دالة <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window.prompt"><code>prompt()</code></a> والتي تقوم بإظهار رسالة منبثقة للمستخدم مشابهه لدالة <code>alert()</code> لكنها تطلب منه إدخال بعض البيانات. وتقوم بحفظ البيانات المدخلة في متغير اسمه <code>myName</code> عند الضغط على موافق، في هذه الحالة نحن نقوم بالطلب من المستخدم بكتابة إسمه بعد ذلك نقوم بإستخدام خاصية التخزين <code>localStorage</code> والتي تسمح لنا بتخزين وإسترجاع بيانات من المتصفح. نقوم بإستخدام دالة <code>setItem</code> لإنشاء مفتاح بقاعدة البيانات بإسم <code>name</code> ومن ثم نقوم بتخزين إسم المستخدم بها. وأخيرا نقوم بتتغير نص العنوان لنقوم بإظهار إسم المستخدم به.</li> + <li dir="rtl"> بعد ذلك نقوم بإستخدام دالة شَرطِيّة للتأكد ما اذا كان إسم المستخدم محفوظ مسبقا بقاعدة بيانات المتصفح سنسمي هذه السطور سطور بداية البرنامج لأنها ستعمل مع بداية عمل البرنامج: + <pre class="brush: js">if(!localStorage.getItem('name')) { + setUserName(); +} else { + var storedName = localStorage.getItem('name'); + myHeading.textContent = 'Mozilla is cool, ' + storedName; +}</pre> + كما ترا الدالة الشرطية تقوم بالتأكد بأنه "لا" يوجد إسم في قاعدة بيانات المتصفح لأننا إستخدمنا علامة التعجب. فإذا لم يجد إسم في قاعدة البيانات فإنه سيبدأ بتشغيل دالة <code>setUserName()</code> التي كتبناها مسبقا ليطلب من المستخدم إسمه وتخزينه في قاعدة البيانات. لكن إذا كان الإسم موجود في قاعدة البيانات فسيتم جلبه بإستخدام دالة <code>getItem()</code>، بعد ذلك نقوم بعرضه مع .العنوان</li> + <li dir="rtl">أخيرا سنقوم بربط حدث الضغط على الزر <code>onclick</code> الذي قمنا بإنشاءه مسبقا بدالة مجهولة تقوم بتشغيل الدالة <code>setUserName()</code> التي قمنا بكتابتها، هذه الطريقة تسمح للمستخدم بتغيير إسمه متى ما أراد: + <pre class="brush: js">myButton.onclick = function() { + setUserName(); +} +</pre> + </li> +</ol> + +<p dir="rtl">الآن عندما يزور المستخدم الصفحة لأول مرة، ستطلب منه كتابة إسمه ثم ستظهر رسالة مخصصة بإسمه. ويمكنه تغيير إسمه بالضغط على الزر الذي قمنا بإضافته. قاعدة البيانات تقوم بحفظ البيانات حتى لو قام المستخدم بإغلاق الصفحة لذلك عندما يزور الصفحة مرة أخرى سيرى الرسالة الخاصة به!</p> + +<h2 dir="rtl" id="خاتمة">خاتمة</h2> + +<p dir="rtl">إذا كنت قد تابعت جميع التعليمات التي ذكرناها، فيجب ان تحصل على صفحة مشابهة للصورة بالأسفل (تستطيع <a href="https://mdn.github.io/beginner-html-site-scripted/">تجرب نسختنا من هنا</a>):</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9539/website-screen-scripted.png" style="display: block; height: 995px; margin: 0px auto; width: 800px;"></p> + +<p dir="rtl">إذا واجهت مشاكل، يمكنك مقارنه عملك مع <a href="https://github.com/mdn/beginner-html-site-scripted/blob/gh-pages/scripts/main.js">مثالنا المنشور على قيت هب.</a></p> + +<p dir="rtl">إلى الآن لم نقم بتعلم الكثير عن الجافاسكربت ودائما هناك المزيد للتعلم عنها. إذا كنت قد إستمتعت بتعلمها فيمكنك التقدم بمتابعة الدروس، إطلع على <a href="/en-US/docs/Learn/JavaScript">دروس الجافاسكربت</a>.</p> + +<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p> + +<p> </p> + +<h2 dir="rtl" id="في_هذا_الدرس">في هذا الدرس</h2> + +<ul> + <li id="Installing_basic_software"><a href="/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a></li> + <li id="What_will_your_website_look_like"><a href="/en-US/Learn/Getting_started_with_the_web/What_will_your_website_look_like">What will your website look like?</a></li> + <li id="Dealing_with_files"><a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a></li> + <li id="HTML_basics"><a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a></li> + <li id="CSS_basics"><a href="/en-US/Learn/Getting_started_with_the_web/CSS_basics">CSS basics</a></li> + <li id="JavaScript_basics"><a href="/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript basics</a></li> + <li id="Publishing_your_website"><a href="/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">Publishing your website</a></li> + <li id="How_the_web_works"><a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">How the web works</a></li> +</ul> + +<p> </p> diff --git a/files/ar/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html b/files/ar/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html new file mode 100644 index 0000000000..3981454cb9 --- /dev/null +++ b/files/ar/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html @@ -0,0 +1,111 @@ +--- +title: كيف سيكون مظهر موقعك؟ +slug: Learn/Getting_started_with_the_web/What_will_your_website_look_like +tags: + - البدء مع الويب + - مبتدئين +translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p dir="rtl">تناقش مقالة <em>كيف سيكون مظهر موقعك؟</em> عمليّة التخطيط والتصميم التي يجب عليك القيام بها من أجل موقعك قبل البدء بكتابة الشيفرة المصدرية، متضمنةً: "ما المعلومات التي يجب أن يقدمها موقعي؟"، "ما الخطوط والألوان التي أريدها؟"، "ماذا يفعل موقعي؟".</p> +</div> + +<h2 dir="rtl" id="أهم_الأشياء_أولاً_التخطيط"> أهم الأشياء أولاً: التخطيط</h2> + +<p dir="rtl">قبل أن تفعل أي شيء، أنت تحتاج لبعض الأفكار. ماذا على موقعك أن يفعل؟ يستطيع الموقع جوهرياً فعل أي شيء، ولكن يجب أن تبدأ بأمور بسيطة في محاولتك الأولى. سنبدأ بإنشاء صفحة بسيطة فيها عناوين، وصورة، وبعض الفقرات.</p> + +<p dir="rtl">للبدء ستحتاج للإجابة على هذه الأسئلة:</p> + +<ol dir="rtl"> + <li><strong>عمّا هو موقعك؟</strong> هل تحب الكلاب؟ مدينة نيويورك؟ شخصية باكمان؟</li> + <li><strong>ما المعلومات التي تقدمها حول الموضوع؟</strong> اكتب عنواناً وبعض فقرات، وفكِّر بصورة تريد عرضها على صفحتك.</li> + <li><strong>كيف يبدو موقعك</strong>؟ ما لون الخلفية؟ ما نوع الخط المناسب: رسمي، كرتوني، غامق، رقيق؟</li> +</ol> + +<div class="note"> +<p dir="rtl"><strong>ملاحظة</strong>: المشاريع المُعقدة تحتاج لدليل مُفصَّل يغطي جميع التفاصيل من ألوان، والخطوط، والمسافات بين العناصر، والأسلوب المناسب لكتابة التصميم، وهلمَّ جرّا. ذلك النوع من الكتيّبات الإرشادية يدعى دليل التصميم، يمكنك رؤية مثال عنه في <a href="https://www.mozilla.org/en-US/styleguide/products/firefox-os/">دليل نظام فايرفوكس</a>.</p> +</div> + +<h2 dir="rtl" id="ارسم_تصميمك">ارسم تصميمك</h2> + +<p dir="rtl">بعد إجابتك على الأسئلة السابقة التقط قلماً وورقة وارسم (بطريقة تقريبيّة) كيف تريد أن يبدو الموقع. لأوَّل موقع بسيط تقوم به لن يكون هناك الكثير لترسمه، ولكن يجب أن تعتاد على القيام بهذا. تلك الطريقة تساعد حقاً (لا يجب عليك أن تكون <span>فان غوخ لتُنجِز ذلك!).</span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9239/website-drawing-scan.png" style="display: block; height: 460px; margin: 0px auto; width: 640px;"></p> + +<div class="note"> +<p dir="rtl"><strong>ملاحظة</strong>: حتى على الواقع يقوم فريق التصميم عادةً بالرسم بدايةً على الورق وبعدها يقومون ببناء نموذج رقمي لتلك الرسمة باستخدام إحدى محررات الرسوميات أو تقنيات الويب.</p> + +<p dir="rtl">غالباً ما يضم فريق الويب مصمم رسوميات (UI) ومصمم لتجربة المستخدم (UX). يقوم مصمم الرسوميات بصنع رؤية للموقع. أما مصمم تجربة المستخدم فيقوم بدور معالجة كيف ستكون تجربة المستخدمين مع الموقع وكيف سيتفاعل الموقع معهم.</p> +</div> + +<h2 dir="rtl" id="اختر_مواد_العرض">اختر مواد العرض</h2> + +<p dir="rtl">في هذه المرحلة من الجيد البدء في وضع المحتوى الموجود على الورقة في صفحة الويب.</p> + +<h3 dir="rtl" id="النص">النص</h3> + +<p dir="rtl">يجب أن يكون لازال لديك الفقرات والعنوان من السابق (عندما رسمتها على ورقة). ابقِ تلك الأشياء قريبة منك حالياً (سنحتاجها بعد قليل).</p> + +<h3 dir="rtl" id="اللون">اللون</h3> + +<p dir="rtl">لاختيار لون قم بالذهاب لموقع <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool">منتقي الألوان</a> وابحث عن اللون الذي تريده. عندما تضغط على اللون سوف ترى عبارة غريبة مكوّنة من ستة أحرف مثل <code>660066#</code>. تدعى تلك العبارة <em>بالرمز السداسي عشري</em> (hexadecimal)، وهي تمثل لونك. قم حالياً بنسخ ذلك الرمز واحفظه في مكان ما.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8975/Screenshot%20from%202014-11-03%2017:40:49.png" style="height: 262px; width: 448px;"></p> + +<h3 dir="rtl" id="الصور">الصور</h3> + +<p dir="rtl">قم بالذهاب إلى موقع <a href="https://www.google.com/imghp?gws_rd=ssl">صور جوجل</a> لاختيار صورة وابحث عن شيء مناسب لك.</p> + +<ol dir="rtl"> + <li>عندما تجد الصورة التي تريدها اضغط عليها.</li> + <li>اضغط على الزر <em>عرض الصورة</em> (View image).</li> + <li>في الصفحة التالية التي ستفتح اضغط على الصورة بواسطة الزر الأيمن للفأرة (استخدم Ctrl + click على نظام ماك) واختر حفظ الصورة ك (Save Image As) واختر مكان ما على جهازك لتحفظها عليه. هناك حل بديل وهو أن تنسخ عنوان الصورة من متصفحك لاستخدامه لاحقاً.</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8985/Screenshot%20from%202014-11-04%2015:09:21.png" style="height: 293px; width: 420px;"></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8989/Screenshot%20from%202014-11-04%2015:20:48.png" style="height: 292px; width: 340px;"></p> + +<div class="note"> +<p dir="rtl"><strong>ملاحظة</strong>: معظم الصور على الويب، بما فيها الصور الموجودة في موقع جوجل صور، تحتوي على حقوق ملكيّة. لتقلل من احتمال انتهاك حقوق الطبع والنشر قم بترشيح الصور باستخدام مُرشِّح جوجل. اضغط على <strong>أدوات البحث</strong> (Search tools) ومن ثم اختر <strong>حقوق الاستخدام</strong> (Usage rights):</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8981/Screenshot%20from%202014-11-04%2014:27:45.png" style="height: 195px; width: 587px;"></p> +</div> + +<h3 dir="rtl" id="الخط">الخط</h3> + +<p dir="rtl">لاختيار الخط:</p> + +<ol dir="rtl"> + <li>قم بالذهاب إلى موقع <a href="http://www.google.com/fonts">خطوط جوجل</a> وحرِّك الفأرة للأسفل حتى تجد الخط الذي تريده. تستطيع أيضاً استخدام الأدوات الموجودة في الجهة اليمنى للموقع لإجراء ترشيح مُتقدِم للنتائج.</li> + <li>اضغط على أيقونة الزائد الموجودة بجانب الخط الذي تريده.</li> + <li>اضغط على زر "* العائلة المختارة (Family Selected)" الموجود في الشريط الموجود أسفل الموقع (الرمز "*" يتغيّر اعتماداً على عدد الخطوط التي اخترتها).</li> + <li>قم بنسخ السطور التي ستظهر في النافذة المنبثقة إلى محرر النصوص لتحفظها لاستخدامها لاحقاً.</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13871/font1.png" style="height: 359px; width: 600px;"></p> + +<p> </p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13873/font2.png" style="height: 608px; width: 600px;"></p> + +<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}</p> + +<p> </p> + +<h2 dir="rtl" id="في_هذه_الوحدة_أيضاًEditEdit">في هذه الوحدة أيضاً<a class="button new only-icon section-edit" href="https://developer.mozilla.org/ar/docs/Learn/Getting_started_with_the_web/%D8%A3%D8%B3%D8%A7%D8%B3%D9%8A%D8%A7%D8%AA_%D9%84%D8%BA%D8%A9_%D8%AA%D8%B1%D9%85%D9%8A%D8%B2_%D8%A7%D9%84%D9%86%D8%B5_%D8%A7%D9%84%D9%81%D8%A7%D8%A6%D9%82$edit#في_هذه_الوحدة" rel="nofollow nofollow, noindex"><span>Edit</span></a><a class="button section-edit only-icon" href="https://developer.mozilla.org/ar/docs/Learn/Getting_started_with_the_web/%D8%AA%D8%AB%D8%A8%D9%8A%D8%AA_%D8%A7%D9%84%D8%A8%D8%B1%D9%85%D8%AC%D9%8A%D8%A7%D8%AA_%D8%A7%D9%84%D8%A3%D8%B3%D8%A7%D8%B3%D9%8A%D8%A9$edit#في_هذه_الوحدةEdit" rel="nofollow, noindex"><span>Edit</span></a></h2> + +<ul dir="rtl"> + <li><a href="/ar/Learn/Getting_started_with_the_web/Installing_basic_software">تثبيت البرمجيات الأساسية</a></li> + <li><a href="/ar/Learn/Getting_started_with_the_web/What_will_your_website_look_like">كيف سيكون مظهر موقعك؟</a></li> + <li><a href="/ar/Learn/Getting_started_with_the_web/Dealing_with_files">التعامل مع الملفات</a></li> + <li><a href="/ar/Learn/Getting_started_with_the_web/HTML_basics">أساسيات لغة ترميز النص الفائق</a></li> + <li><a href="/ar/Learn/Getting_started_with_the_web/CSS_basics">أساسيات صفحات الأنماط الانسيابية</a></li> + <li><a href="/ar/Learn/Getting_started_with_the_web/JavaScript_basics">أساسيات الجافا سكربت</a></li> + <li><a href="/ar/Learn/Getting_started_with_the_web/Publishing_your_website">نشر موقعك</a></li> + <li><a href="/ar/Learn/Getting_started_with_the_web/How_the_Web_works">كيف يعمل الويب</a></li> +</ul> diff --git a/files/ar/learn/getting_started_with_the_web/أساسيات_صفحات_الطرز_المتراصة/index.html b/files/ar/learn/getting_started_with_the_web/أساسيات_صفحات_الطرز_المتراصة/index.html new file mode 100644 index 0000000000..70be221b32 --- /dev/null +++ b/files/ar/learn/getting_started_with_the_web/أساسيات_صفحات_الطرز_المتراصة/index.html @@ -0,0 +1,297 @@ +--- +title: أساسيات الـ CSS +slug: Learn/Getting_started_with_the_web/أساسيات_صفحات_الطرز_المتراصة +tags: + - CSS + - تصميم + - تعلم + - مبتدأ + - ويب +translation_of: Learn/Getting_started_with_the_web/CSS_basics +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p dir="rtl">السي إس إس CSS (صفحات الطرز المتراصة) هي التعليمات البرمجية التي تستخدم لتنسيق صفحتك. ستناقش مقالة <em>أساسياتCSS</em> ما تحتاجه لتبدأ باستخدام هذه التقنية. سنجيب عن أسئلة مثل: كيف أجعل النصّ ذا لون أسود أو أحمر؟ كيف أجعل محتويات الصفحة في أماكن محددة على الشاشة؟ كيف أزين الصفحة بصور و بألوان خلفية؟</p> +</div> + +<h2 dir="rtl" id="إذاً_ماهي_CSS_عملياً؟">إذاً ماهي CSS عملياً؟</h2> + +<p dir="rtl">لاتعد السي إس إس لغة برمجة (كما الأتش تي أم إل لا تعد كذلك). وهي ليست <em>لغة ترميزية</em> حتى — فهي <em>لغة أنماط</em> (تصميم). هذا يعني أنها تسمح لك بتطبيق تنسيقات على عناصر منتقاة من وثيقة لغة ترميز النص الفائق. على سبيل المثال، لاختيار <strong>جميع</strong> عناصر الفقرة في صفحة الويب وجعل لون النص بداخلها أحمر، تستطيع استخدام هذه التعليمة:</p> + +<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token">p </span><span class="punctuation token">{</span> + <span class="property token">color</span><span class="punctuation token">:</span> red<span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<p dir="rtl">دعنا ننسخ الثلاث سطور السابقة ونضعها في ملف جديد وبعدها نقوم بحفظ الملف باسم <code>style.css</code> داخل المجلد <code>styles</code>.</p> + +<p dir="rtl">ولكننا مازلنا بحاجة لربط الملف مع وثيقة لغة ترميز النص الفائق. وإلا لن يعمل التنسيق الذي أضافه ملف <code>styls.css</code> على صفحتك. (إذا لم تكن قد تابعت معنا الوحدة من بدايتها قم بقراءة مقالة <a href="/ar/docs/Learn/Getting_started_with_the_web/التعامل_مع_الملفات">التعامل مع الملفات</a> و مقالة <a href="/ar/docs/Learn/Getting_started_with_the_web/أساسيات_لغة_ترميز_النص_الفائق">أساسيات لغة ترميز النص الفائق</a> لمعرفة ما أنت بحاجة إليه لتبدأ).</p> + +<ol dir="rtl"> + <li>افتح الملف <code>index.html</code> والصق السطر أدناه في وسم <code>head</code>: + + <pre class="brush: html"><link href="styles/style.css" rel="stylesheet" type="text/css"></pre> + </li> + <li>احفظ الملف وقم بفتح الصفحة في متصفحك. يجب أن ترى شيئاً من هذا القبيل:</li> +</ol> + +<p><img alt="A mozilla logo and some paragraphs. The paragraph text has been styled red by our css." src="https://mdn.mozillademos.org/files/9435/website-screenshot-styled.png" style="display: block; height: 832px; margin: 0px auto; width: 711px;"></p> + +<p dir="rtl">تهانينا! إذا أصبح نص فقرتك باللون الأحمر، فقد قمت بكتابة أول ملف سي إس إس ناجح.</p> + +<h3 dir="rtl" id="تشريح_أمر_السي_إس_إس">تشريح أمر السي إس إس</h3> + +<p dir="rtl">دعنا نأخذ نظرة مفصلة حول الثلاث سطور السابقة:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9461/css-declaration-small.png" style="display: block; height: 480px; margin: 0px auto; width: 850px;"></p> + +<p dir="rtl">تدعى الثلاث سطور السابقة <strong>بمجموعة الأمر</strong> (rule set). لاحظ أيضاً أسماء كل جزئ من مجموعة الأوامر تلك:</p> + +<dl> + <dt dir="rtl">المحدد (المنتقي)</dt> + <dd dir="rtl">هو اسم عنصر الأتش تي أم إل ويوضع في بداية مجموعة الأوامر. يقوم بتحديد العنصر/العناصر التي يراد تنسيقها (في حالتنا العناصر ذات الوسم <code>p</code>). لتقوم بتنسيق عنصر أخر ما عليك سوى تغيير المحدد.</dd> + <dt dir="rtl">الإعلان</dt> + <dd dir="rtl">هو أمر مفرد مثل <code>color: red</code> والذي يحدد <strong>الخاصية</strong> التي تريد استخدامها لتنسيق العنصر.</dd> + <dt dir="rtl">الخاصية</dt> + <dd dir="rtl">هي الطريقة التي تريد تنسيق العنصر فيها. (في حالتنا الخاصية <code>color</code> هي خاصية للعنصر {{htmlelement("p")}}). في السي إس إس أنت تقوم باختيار الخواص التي تريدها أن تأثر على عنصرك.</dd> + <dt dir="rtl">قيمة الخاصية</dt> + <dd dir="rtl">توضع على يمين اسم الخاصية بعد النقطتين، والتي تحدد واحدة من العديد من الخيارات المتاحة (يوجد العديد من القيم الأخرى إلى جانب القيمة <code>red</code> للخاصية <code>color</code>).</dd> +</dl> + +<p dir="rtl">انتبه للأجزاء المهمة الأخرى من البنية الكتابية لمجموعة الأمر:</p> + +<ul dir="rtl"> + <li>كل مجموعة أمر (بغض النظر عن المحدد) يجب أن تحاط بأقواس معقوفة (<code>{}</code>).</li> + <li>بداخل كل إعلان يجيب عليك استخدام نقطتين (<code>:</code>) للفصل بين الخاصية وقيمتها.</li> + <li>بداخل كل مجموعة أمر يجب عليك استخدام فاصلة منقوطة (<code>;</code>) للفصل بين كل إعلان والإعلان الذي يليه.</li> +</ul> + +<p dir="rtl">إذا لكتابة عدة خواص في مجموعة أمر واحدة ما عليك سوى كتابتهم والفصل بينهم باستخدام فاصلة منقوطة، كالتالي:</p> + +<pre class="brush: css">p { + color: red; + width: 500px; + border: 1px solid black; +}</pre> + +<h3 dir="rtl" id="اختيار_عدة_عناصر">اختيار عدة عناصر</h3> + +<p dir="rtl">يمكنك أيضاً اختيار عدة أنواع من العناصر وتطبيق عليهم مجموعة أمر واحدة. قم بإضافة عدة محددات مفصولين بفاصلة. على سبيل المثال:</p> + +<pre class="brush: css">p,li,h1 { + color: red; +}</pre> + +<h3 dir="rtl" id="أنواع_مختلفة_من_المحدد">أنواع مختلفة من المحدد</h3> + +<p dir="rtl">هناك عدة أنواع مختلفة من المحدد. أعلاه، قمنا فقط باستخدام <strong>محددات العنصر</strong>، والذي يختار جميع العناصر من النوع نفسه في وثيقة الأتش تي أم إل. ولكن يمكننا القيام بتحديد أكثر دقةً من ذلك. يوجد هنا بعض الأنواع الشائعة من المحددات:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">اسم المحدد</th> + <th scope="col">ماذا يحدد</th> + <th dir="rtl" scope="col">مثال</th> + </tr> + </thead> + <tbody> + <tr> + <td>محدد العناصر (يسمى أحيانا بمحدد النوع أو الوسم)</td> + <td>جميع العناصر التي من نفس النوع</td> + <td><code>p</code><br> + تحدد العناصر ذات الوسم <code><p></code></td> + </tr> + <tr> + <td>محدد الهوية</td> + <td>العنصر الموجود في الصفحة والذي يملك تلك الهوية (في صفحة الأتش تي أم إل يُسمح لك بإعطاء هوية واحدة مميزة لكل عنصر)</td> + <td><code>#my-id</code><br> + تحدد العناصر ذات الهوية <code><p id="my-id"></code> أو <code><a id="my-id"></code></td> + </tr> + <tr> + <td>محدد الصنف</td> + <td>العنصر/العناصر الموجودة على الصفحة والتي تملك ذلك الصنف (يمكن استخدام الصنف نفسه على عدة عناصر)</td> + <td><code>.my-class</code><br> + Selects <code><p class="my-class"></code> and <code><a class="my-class"></code></td> + </tr> + <tr> + <td>محدد السمة</td> + <td>العناصر في الصفحة والتي تملك السمة المحددة</td> + <td><code>img[src]</code><br> + تحدد الصور ذات السمة <code><img src="myimage.png"></code> ولكن لا تحدد عنصر الصورة بدون السمة المذكورة <code><img></code></td> + </tr> + <tr> + <td>محدد فئة الشبه</td> + <td>عنصر/عناصر محدد ولكن عندما يكون بحالة معينة، مثال عندما يتم التحويم فوقه</td> + <td> + <p><code>a:hover</code><br> + تحدد العناصر <code><a></code></p> + + <p>ولكن فقط عندما يتم تحويم مؤشر الفأرة فوق الرابط</p> + </td> + </tr> + </tbody> +</table> + +<p dir="rtl">يوجد العديد من المحددات الأخرى لاكتشافها، يمكنك إيجاد قائمة مفصلة أكثر في مقالة <a href="/en-US/docs/Web/Guide/CSS/Getting_started/Selectors">دليل المحددات</a>.</p> + +<h2 dir="rtl" id="الخطوط_والنصوص">الخطوط والنصوص</h2> + +<p dir="rtl">والآن بعد أن تعرفنا على بعض أساسيات السي إس إس، دعنا نبدأ بإضافة بعد الأوامر والمعلومات لملف <code>style.css</code> لنجعل مثالنا يبدو أجمل. دعنا نبدأ بجعل الخطوط والنصوص التي نستخدمها تبدو أفضل.</p> + +<ol dir="rtl"> + <li>بدايةً، قم بالحصول على مسار الخط الذي جلبته من <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like#Font">موقع خطوط جوجل</a>. أضف العنصر {{htmlelement("link")}} في الوسم <code><head></code>. كالتالي: + + <pre class="brush: html"><link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'></pre> + </li> + <li>بعدها، قم بحذف التعليمة السابقة التي كتبناها في ملف <code>style.css</code>. لقد كانت تجربة جيدة، ولكن اللون الأحمر ليس ملائماً بما فيه الكفاية.</li> + <li>ضع السطور التالية في الملف، استبدل سطر placeholder بسطر عائلة الخط <code>font-family</code> التي حصلت عليها من موقع خطوط جوجل Google Fonts. (تعني <code>font-family</code> بالخطوط التي تريد استخدامها في النص.) تقوم هذه التعليمة بتعيين خط أساسي شامل و قياس للخط من أجل كامل الصفحة (طالما أن <code><html></code> يمثل العنصر الأب لكامل الصفحة, و جميع العناصر داخله ترث نفس ال <code>font-size</code> و الـ <code>font-family</code>): + <pre class="brush: css">html { + font-size: 10px; /* px means 'pixels': the base font size is now 10 pixels high */ + font-family: placeholder: this should be the rest of the output you got from Google fonts +}</pre> + + <div class="note"> + <p><strong>ملاحظة:</strong> أي شيء يكتب في ملف الـ CSS بين <code>*/</code> و <code>/*</code> عبارة عن تعليق CSS, حيث أن المتصفح يقوم بتجاهله عندما يعالج التعليمات البرمجية. يمكنك الاستفادة من تعليقات الـ CSS لكتابة ملاحظات مفيدة عمّا تحاول فعله.</p> + </div> + </li> + <li>الآن سنقوم بتعيين قياسات الخطوط للعناصر التي تتضمن نصوص داخل جسد الـ HTML ({{htmlelement("h1")}}, {{htmlelement("li")}}, {{htmlelement("p")}}). بالإضافة إلى ذلك سنجعل النص الخاص بعنوان الصفحة في المركز, و سنغير ارتفاع الخط (line height) بالإَافة إلى المسافة بين الحروف (letter spacing) لمحتويات الـ body لجعلها أسهل للقراءة: + <pre class="brush: css">h1 { + font-size: 60px; + text-align: center; +} + +p, li { + font-size: 16px; + line-height: 2; + letter-spacing: 1px; +}</pre> + </li> +</ol> + +<p dir="rtl">يمكنك تعديل قيم الـ <code>px</code> هذه إلى أي شيء تحبه لتحصل على التصميم الذي تريده, لكن بشكل عام يجب أن يبدو التصميم كالتالي:</p> + +<p><img alt="a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered" src="https://mdn.mozillademos.org/files/9447/website-screenshot-font-small.png" style="display: block; height: 1020px; margin: 0px auto; width: 921px;"></p> + +<h2 dir="rtl" id="صناديق_الـ_CSS">صناديق الـ CSS</h2> + +<p dir="rtl">إحدى الأشياء التي تلاحظها عندما تكتب الـ CSS هي أن الكثير من خصائصها يتعلق بالصناديق — ضبط قياسها, لونها, موضعها, الخ. أغلب عناصر الـ HTML في صفحتك يمكن اعتبارها على أنها صناديق موضوعة فوق بعضها البعض</p> + +<p><img alt="a big stack of boxes or crates sat on top of one another" src="https://mdn.mozillademos.org/files/9441/boxes.jpg" style="display: block; height: 463px; margin: 0px auto; width: 640px;"></p> + +<p>Not surprisingly, CSS layout is based principally on the <em>box model. </em>Each of the blocks taking up space on your page has properties like this:</p> + +<ul> + <li><code>padding</code>, the space just around the content (e.g., around paragraph text)</li> + <li><code>border</code>, the solid line that sits just outside the padding</li> + <li><code>margin</code>, the space around the outside of the element</li> +</ul> + +<p><img alt="three boxes sat inside one another. From outside to in they are labelled margin, border and padding" src="https://mdn.mozillademos.org/files/9443/box-model.png" style="display: block; height: 450px; margin: 0px auto; width: 574px;"></p> + +<p>In this section we also use:</p> + +<ul> + <li><code>width</code> (of an element)</li> + <li><code>background-color</code>, the color behind an element's content and padding</li> + <li><code>color</code>, the color of an element's content (usually text)</li> + <li><code>text-shadow</code>: sets a drop shadow on the text inside an element</li> + <li><code>display</code>: sets the display mode of an element (don't worry about this yet)</li> +</ul> + +<p>So, let's get started and add some more CSS to our page! Keep adding these new rules to the bottom of the page, and don't be afraid to experiment with changing values to see how it turns out.</p> + +<h3 id="Changing_the_page_color">Changing the page color</h3> + +<pre class="brush: css">html { + background-color: #00539F; +}</pre> + +<p>This rule sets a background color for the whole page. Change the color code above to whatever color <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like#Theme_color">you chose when planning your site</a>.</p> + +<h3 id="Sorting_the_body_out">Sorting the body out</h3> + +<pre class="brush: css">body { + width: 600px; + margin: 0 auto; + background-color: #FF9500; + padding: 0 20px 20px 20px; + border: 5px solid black; +}</pre> + +<p>Now for the {{htmlelement("body")}} element. There are quite a few declarations here, so let's go through them all one by one:</p> + +<ul> + <li><code>width: 600px;</code> — this forces the body to always be 600 pixels wide.</li> + <li><code>margin: 0 auto;</code> — When you set two values on a property like <code>margin</code> or <code>padding</code>, the first value affects the element's top <strong>and</strong> bottom side (make it <code>0</code> in this case), and the second value the left <strong>and</strong> right side (here, <code>auto</code> is a special value that divides the available horizontal space evenly between left and right). You can also use one, three, or four values, as documented <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin#Values">here</a>.</li> + <li><code>background-color: #FF9500;</code> — as before, this sets the element's background color. We've used a sort of reddish orange for the body as opposed to dark blue for the {{htmlelement("html")}} element, but feel free to go ahead and experiment.</li> + <li><code>padding: 0 20px 20px 20px;</code> — we have four values set on the padding, to make a bit of space around our content. This time we are setting no padding on the top of the body, and 20 pixels on the left, bottom and right. The values set top, right, bottom, left, in that order.</li> + <li><code>border: 5px solid black;</code> — this simply sets a 5-pixel–wide, solid black border on all sides of the body.</li> +</ul> + +<h3 id="Positioning_and_styling_our_main_page_title">Positioning and styling our main page title</h3> + +<pre class="brush: css">h1 { + margin: 0; + padding: 20px 0; + color: #00539F; + text-shadow: 3px 3px 1px black; +}</pre> + +<p>You may have noticed there's a horrible gap at the top of the body. That happens because browsers apply some <strong>default styling</strong> to the {{htmlelement("h1")}} element (among others), even when you haven't applied any CSS at all! That might sound like a bad idea, but we want even an unstyled webpage to have basic readability. To get rid of the gap we overrode the default styling by setting <code>margin: 0;</code>.</p> + +<p>Next up, we've set the heading's top and bottom padding to 20 pixels, and made the heading text the same color as the html background color.</p> + +<p>One rather interesting property we've used here is <code>text-shadow</code>, which applies a text shadow to the text content of the element. Its four values are as follows:</p> + +<ul> + <li>The first pixel value sets the <strong>horizontal offset</strong> of the shadow from the text — how far it moves across: a negative value should move it to the left.</li> + <li>The second pixel value sets the <strong>vertical offset</strong> of the shadow from the text — how far it moves down, in this example; a negative value should move it up.</li> + <li>The third pixel value sets the <strong>blur radius</strong> of the shadow — a bigger value will mean a more blurry shadow.</li> + <li>The fourth value sets the base color of the shadow.</li> +</ul> + +<p>Again, try experimenting with different values to see what you can come up with!</p> + +<h3 id="Centering_the_image">Centering the image</h3> + +<pre class="brush: css">img { + display: block; + margin: 0 auto; +}</pre> + +<p>Finally, we'll center the image to make it look better. We could use the <code>margin: 0 auto</code> trick again as we did earlier for the body, but we also need to do something else. The {{htmlelement("body")}} element is <strong>block level</strong>, meaning it takes up space on the page and can have margin and other spacing values applied to it. Images, on the other hand, are <strong>inline</strong> elements, meaning they can't. So to apply margins to the image, we have to give the image block-level behavior using <code>display: block;</code>.</p> + +<div class="note"> +<p><strong>Note</strong>: Don't worry if you don't yet understand <code>display: block;</code> and the block-level/inline distinction. You will as you study CSS in more depth. You can find out more about the different available display values at our <a href="/en-US/docs/Web/CSS/display">display reference page</a>.</p> +</div> + +<h2 id="Conclusion">Conclusion</h2> + +<p>If you have followed all the instructions in this article, you should end up with a page that looks something like this (you can also <a href="http://mdn.github.io/beginner-html-site-styled/">view our version here</a>):</p> + +<p><img alt="a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip." src="https://mdn.mozillademos.org/files/9455/website-screenshot-final.png" style="display: block; height: 1084px; margin: 0px auto; width: 940px;"></p> + +<p>If you get stuck, you can always compare your work with our <a href="https://github.com/mdn/beginner-html-site-styled/blob/gh-pages/styles/style.css">finished example code on GitHub</a>.</p> + +<p>Here, we have only really scratched the surface of CSS. To find out more, go to our <a href="https://developer.mozilla.org/en-US/Learn/CSS">CSS Learning topic</a>.</p> + +<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</p> + +<p> </p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li id="Installing_basic_software"><a href="/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a></li> + <li id="What_will_your_website_look_like"><a href="/en-US/Learn/Getting_started_with_the_web/What_will_your_website_look_like">What will your website look like?</a></li> + <li id="Dealing_with_files"><a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a></li> + <li id="HTML_basics"><a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a></li> + <li id="CSS_basics"><a href="/en-US/Learn/Getting_started_with_the_web/CSS_basics">CSS basics</a></li> + <li id="JavaScript_basics"><a href="/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript basics</a></li> + <li id="Publishing_your_website"><a href="/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">Publishing your website</a></li> + <li id="How_the_web_works"><a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">How the web works</a></li> +</ul> + +<p> </p> diff --git a/files/ar/learn/how_to_contribute/index.html b/files/ar/learn/how_to_contribute/index.html new file mode 100644 index 0000000000..e53fb8f34f --- /dev/null +++ b/files/ar/learn/how_to_contribute/index.html @@ -0,0 +1,82 @@ +--- +title: كيف تساهم في قسم التعلم في الشبكة +slug: Learn/How_to_contribute +tags: + - توثيق + - دليل + - ساهم + - مبتدئين +translation_of: Learn/How_to_contribute +--- +<div>{{LearnSidebar}}</div> + +<p dir="rtl">إن كنت هنا لأوَّل مرَّة أو بعد بحثٍ طويل، فمن المُرجَح أنَّ هذا يرجع لكونك مُهتماً في المساهمة في قسم شبكة مطوري موزيلا للتعلم. إنَّ هذا لنبؤٌ سعيد!</p> + +<p dir="rtl"><span class="seoSummary">ستجد في هذه الصفحة كل شيء ستحتاج إليه لتحسين محتوى قسم التعلم. يوجد العديد من الأشياء التي يمكنك القيام بها، بناءً على وقتك، وما إذا كنت <a href="/ar/Learn/How_to_contribute#I'm_a_beginner">مُبتدِئاً</a>، <a href="/ar/Learn/How_to_contribute#I'm_a_web_developer">مطوراً</a>، أو <a href="/ar/Learn/How_to_contribute#I'm_a_teacher">مُدرِساً</a>.</span></p> + +<div class="note"> +<p dir="rtl"><strong>ملاحظة</strong>: يمكنك إيجاد دليل إرشادي حول كتابة مقالة جديدة في قسم التعلم في مقالة "<a href="/ar/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">كيفيّة كتابة مقالة لمساعدة الناس على التعلُّم حول الويب</a>".</p> +</div> + +<h2 dir="rtl" id="جِد_مهمة_محددة">جِد مهمة محددة</h2> + +<p dir="rtl">الطرق الشائعة للمساهمة في قسم التعلم هي قراءة المقالات، إصلاح الأخطاء المطبعيّة، واقتراح التحسينات. نُرحِب أيضاً بإضافة أمثلة إلى <a href="https://github.com/mdn/learning-area/">مستودعنا على جيتهاب</a>، والتواصل معنا إن رغبت بطرح سؤال ما.</p> + +<p dir="rtl">المساهمة هي طريقة رائعة لاكتساب المتعة في حين تعلم أشياء جديدة. إن شعرت يوماً بالضياع أو كان لديك سؤالاً ما، فلا تتردد أبداً بالتواصل معنا على <a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">موضوع قسم التعلُّم في منصة ديسكورس</a>، أو على <a href="/ar/docs/MDN/Community#Get_into_IRC">قناة IRC</a> (اطّلع على نهاية هذه الصفحة للمزيد من التفاصيل).<span class="short_text" id="result_box" lang="ar"><span> <a href="/ar/profiles/chrisdavidmills">كريس ميلز</a></span></span> (Chris Mills) هو مدير المواضيع لهذا القسم، يمكنك أيضاً محاولة التواصل معه مباشرةً.</p> + +<p dir="rtl">توفِر الأقسام التاليّة بعض الأفكار العامة حول أنواع المهام التي يمكنك القيام بها.</p> + +<h2 dir="rtl" id="أنا_مُبتدِئ">أنا مُبتدِئ</h2> + +<p dir="rtl">هذا مُذهِل! المبتدئون هم عامل مُهم وقيّم جداً في تقديم التعليقات حول المواد الدراسيّة. لديك - بالتأكيد - وجهة نظر فريدة حول مقالتنا كعضو من جمهورنا المُستهدف، مما يجعلك عضواً لا يقدر بثمن في فريقنا. إن كنت تستخدم مقالاتنا لتتعلم شيئاً ما ووقعت في المشاكل، أو وجدت مقالة تحوي معلومات مُشتتة، يمكنك إما إصلاحها أو إعلامنا بذلك حتى نتحقق من المشكلة ونحلُها.</p> + +<p dir="rtl">إليك بعض الاقتراحات حول الطرق التي يمكنك المساهمة فيها:</p> + +<dl> + <dt dir="rtl"><a href="/ar/docs/MDN/Contribute/Howto/Tag">إضافات الوسوم إلى المقالات</a> (<em>تستغرق العمليّة قرابة الخمس دقائق</em>)</dt> + <dd dir="rtl">وسِم (tagging) محتوى الشبكة هو أحد أسهل الطرق التي يمكنك المساهمة فيها. في حين أنَّ العديد من المزايا لدينا تستخدم الوسوم (tags) لتساعدها في تقديم المعلومات بسياقها الصحيح، فيُعَد الوسِم مساهمة قيّمة جداً. ألقي نظرة على قائمة المصطلحات في <a href="/ar/docs/MDN/Doc_status/Glossary#No_tags">المسرد</a> و<a href="/ar/docs/MDN/Doc_status/Learn#No_tags">المقالات التعليميّة</a> التي لا تحتوي على وسوم لتبدأ بالمساهمة.</dd> + <dt dir="rtl"><a href="/ar/docs/Glossary">قراءة ومراجعة المصطلحات في المسرد</a> (<em>تستغرق العمليّة قرابة الخمس دقائق</em>)</dt> + <dd dir="rtl">كمبتدئ، نحتاج إلى أعين يقظة لمراجعة محتوانا. إذا وجدت مصطلحاً صعب الفهم، فهذا يعني أنَّ المسرد بحاجة ليُحسَن. لا تتردد بإجراء أي تغييرات تظنها ضروريّة. إذا كنت تظن أنَّك لا تملك المهارة الكافيّة لتعديل مصطلح بنفسك، يمكنك على الأقل إعلامنا بذلك على <a href="/ar/docs/MDN/Community#Join_our_mailing_lists">قائمتنا البريديّة</a>.</dd> + <dt dir="rtl"><a href="/ar/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">كتابة مصطلح جديد في المسرد</a> (<em>تستغرق العمليّة قرابة العشرين دقيقة</em>)</dt> + <dd dir="rtl">هذه أكثر الطرق فعاليّة لتتعلم شيئاً جديداً. اختر مفهوماً جديداً تريد فهمه، أقرأ عنه، واكتب شرحاً له في المسرد. الشرح للآخرين هي إحدى الطرق الرائعة "لتثبيت" المعرفة في ذهنك، وتساعدك على فهم الأشياء بنفسك، كل هذا في حين أنَّك تساعد الآخرين أيضاً. الجميع رابِح!</dd> + <dt dir="rtl"><a href="/ar/Learn/Index">قراءة ومراجعة المقالات التعليميّة</a> (<em>تستغرق العمليّة قرابة الساعتين</em>)</dt> + <dd dir="rtl">تشبه هذه المهمة كثيراً مراجعة المصطلحات في المسرد (انظر أعلاه). ولكن هذه المهمة تحتاج لوقتٍ أطول؛ بسبب أنَّ هذه المقالات عادةً ما تكون أطول قليلاً.</dd> +</dl> + +<h2 dir="rtl" id="أنا_مُطوِّر">أنا مُطوِّر</h2> + +<p dir="rtl">عظيم! مهاراتك التقنيّة هي ما نحتاجه لتوفير محتوى تقني دقيق للمتبدئين. بما أنَّ هذا القسم من الشبكة مُخصص لتعليم الويب، كُن حريصاً على جعل توضيحاتك بسيطة قدر الإمكان، مع الحرص على كونها مفيدة.<span id="result_box" lang="ar"><span> من الأكثر أهميّة أن تكون مفهومة على أن تكون دقيقة للغاية.</span></span></p> + +<dl> + <dt dir="rtl"><a href="/ar/docs/Glossary">قراءة ومراجعة المصطلحات في المسرد</a> (<em>تستغرق العمليّة قرابة الخمس دقائق</em>)</dt> + <dd dir="rtl">كمطوِّر، نحتاج لتتأكد أنَّ محتوانا دقيق تقنياً بدون أن يكون مُتحذلق بشكل مبالغ. لا تتردد عن إجراء أي تغييرات تظن أنَّها ضروريّة. إذا أردت مناقشة المحتوى قبل إجراء أيّة تغييرات، تواصل معنا على <a href="/ar/docs/MDN/Community#Join_our_mailing_lists">قائمتنا البريديّة</a> أو على <a href="/ar/docs/MDN/Community#Get_into_IRC">قناة IRC</a>.</dd> + <dt dir="rtl"><a href="/ar/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">كتابة مصطلح جديد في المسرد</a> (<em>تستغرق العمليّة قرابة العشرين دقيقة</em>)</dt> + <dd dir="rtl">توضيح المصطلحات التقنيّة هي طريقة جيدة جداً للتعلم ولتصبح دقيق تقنياً وبسيطاً في شرحك. سيشكرك المبتدئون على ذلك. لدينا العديد من <a href="/ar/docs/Glossary#Contribute">المصطلحات الغير معرفة</a> والتي تحتاج لاهتمامك. اختر واحداً وابدأ بشرحه.</dd> + <dt dir="rtl"><a href="/ar/Learn/Index">قراءة ومراجعة المقالات التعليميّة</a> (<em>تستغرق العمليّة قرابة الساعتين</em>)</dt> + <dd dir="rtl">هذه المهمة مماثلة لمراجعة المصطلحات في المسرد (انظر أعلاه). الفرق هو أنَّ هذه المقالات أطول قليلاً مما سيتطلب وقتاً أطول.</dd> + <dt dir="rtl"><a href="/ar/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">كتابة مقالة تعليميّة جديدة</a> (<em>تستغرق العمليّة قرابة الأربع ساعات أو أكثر</em>)</dt> + <dd dir="rtl">تفتقر شبكة مطوري موزيلا إلى المقالات البسيطة حول استخدام تقنيات الويب (مثل <a href="/ar/docs/Learn/CSS">لغة ترميز النص الفائق</a>، <a href="/ar/docs/Learn/CSS">صفحات الأنماط الانسيابية</a>، <a href="/ar/docs/Learn/JavaScript">الجافاسكربت</a> ...إلخ). لدينا في الشبكة محتوى قديم يتطلب إعادة المراجعة والنشر. ادفع بمهاراتك إلى أقصى حد لتجعل تقنيات الويب قابلة للاستخدام من قبل المبتدئين.</dd> + <dt dir="rtl"><a href="/ar/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">إنشاء تمرينات، عينات برمجيّة، أو أدوات تعليم تفاعليّة</a> (<em>تستغرق العمليّة وقتاً غير محدد</em>)</dt> + <dd dir="rtl">تحتاج جميع مقالاتنا التعليميّة إلى ما ندعوه بمواد "التعليم النشطة"، ﻷنَّ الناس يتعلمون الشيء بشكل أفضل عندما يقومون به بأنفسهم. هذه المواد هي تمرينات أو محتويات تفاعليّة تساعد المُستخدمين على تطبيق والتلاعب بالمفاهيم المشروحة في المقالة. يوجد العديد من الطرق الممكنة لصنع محتوى تفاعلي، من إنشاء عينات برمجيّة باستخدام <a href="http://jsfiddle.net">JSFiddle</a> أو أشباهه، إلى بناء محتوى تفاعلي مُتكامل بواسطة <a href="https://thimble.mozilla.org/">Thimble</a>. أطلق العنان لإبداعك!</dd> +</dl> + +<h2 dir="rtl" id="أنا_مُدرِس">أنا مُدرِس</h2> + +<p dir="rtl">تملك شبكة مطوري موزيلا تاريخ طويل من النجاح التقني، ولكننا نفتقر للفهم العميق حول الطرق الفُضلى لتعليم المفاهيم للجدد. هنا حيث نحتاج إليك بصفتك مُدرِس. يمكنك مساعدتنا على الحرص على أنَّ موادنا التعليميّة توفِر مسار تعليمي جيد وعملي لقرائِنا.</p> + +<dl> + <dt dir="rtl"><a href="/ar/docs/Glossary">قراءة ومراجعة المصطلحات في المسرد</a> (<em>تستغرق العمليّة قرابة الخمس عشرة دقيقة</em>)</dt> + <dd dir="rtl">تَفَقَد المصطلحات في المسرد ولا تتردد عن إجراء أيّة تغييرات تراها ضروريّة. إذا أردت مناقشة المحتوى قبل تعديله، تواصل معنا على <a href="/ar/docs/MDN/Community#Join_our_mailing_lists">قائمتنا البريديّة</a> أو على <a href="/ar/docs/MDN/Community#Get_into_IRC">قناة IRC</a>.</dd> + <dt dir="rtl"><a href="/ar/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">كتابة مصطلح جديد في المسرد</a> (<em>تستغرق العمليّة قرابة الساعة</em>)</dt> + <dd dir="rtl">تعريفات المصطلحات البسيطة والواضحة، واللمحات البسيطة عن المفاهيم في المسرد هو قطعاً ما يلبي احتياجات المبتدئِين. يمكن أن تساعد خبرتك كمُدرِس على إنشاء تعريفات ممتازة للمصطلحات. لدينا العديد من <a href="/ar/docs/Glossary#Contribute">المصطلحات الغير معرفة</a> والتي تحتاج لاهتمامك. اختر واحداً وابدأ بشرحه.</dd> + <dt dir="rtl"><a href="/ar/docs/tag/needsSchema">إضافة رسوم توضيحيّة ومخططات للمقالات</a> (<em>تستغرق العمليّة قرابة الساعة</em>)</dt> + <dd dir="rtl">كما تعلم، الرسوم التوضيحيّة (illustrations) هي جزء لا يقدر بثمن في أي محتوى تعليمي. تلك هي إحدى الأمور التي نفتقدها في الشبكة ومهاراتك يمكن أن تُحدِث فرقاً. تفقد <a href="/ar/docs/tag/تحتاج_لرسوم_توضيحيّة">المقالات التي تحوي نقصاً في المحتوى التوضيحي</a> واختر مقالة ترغَب بإنشاء رسماً توضيحياً يشرحها.</dd> + <dt dir="rtl"><a href="/ar/Learn/Index">قراءة ومراجعة المقالات التعليميّة</a> (<em>تستغرق العمليّة قرابة الساعتين</em>)</dt> + <dd dir="rtl">هذه المهمة مشابهة لمراجعة المصطلحات في المسرد (انظر أعلاه)، ولكنها تتطلب وقتاً أطول لكون المقالات بالعادة أطول قليلاً.</dd> + <dt dir="rtl"><a href="/ar/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">كتابة مقالات تعليميّة جديدة</a> (<em>تستغرق العمليّة قرابة الأربع ساعات</em>)</dt> + <dd dir="rtl">نحتاج إلى مقالات بسيطة وواضحة حول النظام الشابكي (Web ecosystem) والمواضيع الأخرى المتعلقة به. في حين أنَّ المقالات التعليميّة من الضروري أن تكون تدريسيّة بدلاً من أن تقوم بتغطيّة كل شيء حرفياً، فخبرتك بمعرفة الأشياء التي يجب شرحها وكيفيّة القيام بذلك ستكون مساعدة رائعة!</dd> + <dt dir="rtl"><a href="/ar/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">إنشاء تمرينات، اختبارات، أو أدوات تعليم تفاعليّة</a> (<em>يستغرق الأمر وقتاً غير محدد</em>)</dt> + <dd dir="rtl">تحتاج جميع مقالاتنا التعليميّة إلى مواد "التعليم النشط". هذه المواد هي تمرينات أو محتويات تفاعليّة تساعد المُستخدمين على تعلم استخدام والتوسع في المفاهيم المشروحة في المقالة. يوجد العديد من الأمور التي يمكنك القيام بها هنا، من إنشاء اختبارات (quizzes)، إلى بناء محتوى تفاعلي مُتكامل بواسطة <a href="https://thimble.mozilla.org/">Thimble</a>. أطلق العنان لإبداعك!</dd> + <dt dir="rtl"><a href="/ar/docs/MDN/Contribute/Howto/Create_learning_pathways">إنشاء مسارات تعليميّة</a> (<em>تستغرق العمليّة وقتاً غير محدد</em>)</dt> + <dd dir="rtl">بغرض توفير دورات شاملة وتدريجيّة، نحتاج إلى تهيئة محتوانا في مسارات. هذه طريقة لجمع المحتوى الحالي وإيجاد المفقود لإنشاء مقالات تعليميّة عنه.</dd> +</dl> diff --git a/files/ar/learn/html/forms/index.html b/files/ar/learn/html/forms/index.html new file mode 100644 index 0000000000..3c8f449476 --- /dev/null +++ b/files/ar/learn/html/forms/index.html @@ -0,0 +1,114 @@ +--- +title: نماذج HTML +slug: Learn/HTML/Forms +tags: + - Beginner + - Featured + - Forms + - Guide + - HTML + - Landing + - Learn + - NeedsTranslation + - TopicStub + - Web +translation_of: Learn/Forms +--- +<div style="direction: rtl;">{{LearnSidebar}}</div> + +<p class="summary" style="direction: rtl;">توفر هذه الوحدة سلسلة من المقالات التي ستساعدك على إتقان نماذج HTML. تعد نماذج HTML أداة قوية جدًا للتفاعل مع المستخدمين ؛ ومع ذلك ، لأسباب تاريخية وتقنية ، ليس من الواضح دائمًا كيفية استخدامها بكامل طاقتها. في هذا الدليل ، سنغطي جميع جوانب نماذج HTML ، من البنية إلى التصميم ، من معالجة البيانات إلى الأدوات المخصصة.</p> + +<h2 id="المتطلبات_الأساسية" style="direction: rtl;">المتطلبات الأساسية</h2> + +<p style="direction: rtl;">قبل البدء في هذه الوحدة ، يجب أن تعمل على الأقل من خلال <a href="/ar/docs/Learn/HTML/Introduction_to_HTML">مقدمة إلى HTML</a>. في هذه المرحلة ، يجب أن تجد {{anch ("Basic Guides")}} سهل الفهم ، كما يمكنك الاستفادة من دليل <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Basic_native_form_controls">أدوات النماذج الأصلية</a>.</p> + +<p style="direction: rtl;">ومع ذلك ، تعد بقية الوحدة أكثر تقدمًا - فمن السهل وضع أدوات النموذج على صفحة ، ولكن لا يمكنك فعل الكثير معها دون استخدام بعض ميزات النموذج المتقدمة و CSS و JavaScript. لذلك ، قبل إلقاء نظرة على الأقسام الأخرى ، نوصيك بالابتعاد وتعلم بعض <a href="/ar/docs/Learn/CSS">CSS</a> و <a href="/ar/docs/Web/JavaScript/About_JavaScript">JavaScript</a> أولاً.</p> + +<div class="note"> +<p style="direction: rtl;"><strong>ملاحظة: إذا كنت تعمل على جهاز كمبيوتر / جهاز لوحي / جهاز آخر حيث لا يمكنك إنشاء ملفاتك الخاصة ، فيمكنك تجربة (معظم) أمثلة التعليمات البرمجية في برنامج تشفير عبر الإنترنت مثل <a href="http://jsbin.com/">JSBin</a> أو <a href="https://glitch.com/">Glitch</a>.</strong></p> +</div> + +<h2 id="أدلة_أساسية" style="direction: rtl;">أدلة أساسية</h2> + + + +<div style="direction: rtl;"><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Your_first_form">أول نموذج HTML خاص بك </a></strong></div> + +<div style="direction: rtl;"><span style="">تقدم المقالة الأولى في سلسلتنا تجربتك الأولى في إنشاء نموذج HTML ، بما في ذلك تصميم نموذج بسيط وتنفيذه باستخدام عناصر HTML الصحيحة وإضافة بعض الأنماط البسيطة جدًا عبر CSS وكيفية إرسال البيانات إلى الخادم.</span></div> + +<div style="direction: rtl;"><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/How_to_structure_a_web_form">كيفية بناء نموذج HTML</a></strong></div> + +<div style="direction: rtl;"><span style="">مع استبعاد الأساسيات ، ننظر الآن بمزيد من التفصيل في العناصر المستخدمة لتوفير البنية والمعنى للأجزاء المختلفة من النموذج.</span></div> + +<h2 id="ما_هو_شكل_الحاجيات_المتاحة؟" style="direction: rtl;">ما هو شكل الحاجيات المتاحة؟</h2> + + + +<div style="direction: rtl;"><strong><span style="">حاجيات النموذج الأصلي</span></strong></div> + +<div style="direction: rtl;"><span style="">نحن الآن نلقي نظرة على وظائف أدوات النماذج المختلفة بالتفصيل ، وننظر في الخيارات المتاحة لجمع أنواع مختلفة من البيانات.</span></div> + +<h2 id="التحقق_من_صحة_بيانات_النموذج_وإرسالها" style="direction: rtl;">التحقق من صحة بيانات النموذج وإرسالها</h2> + + + +<div style="direction: rtl;"><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data">إرسال بيانات النموذج</a></strong></div> + +<div style="direction: rtl;"><span style="">تتناول هذه المقالة ما يحدث عندما يرسل المستخدم نموذجًا - إلى أين تذهب البيانات ، وكيف نتعامل معها عندما تصل إلى هناك؟ نحن ننظر أيضًا في بعض المخاوف الأمنية المرتبطة بإرسال بيانات النموذج.</span></div> + +<div style="direction: rtl;"></div> + +<div style="direction: rtl;"><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation">التحقق من صحة بيانات النموذج</a></strong></div> + +<div style="direction: rtl;"><span style="">لا يعد إرسال البيانات كافيًا - نحتاج أيضًا إلى التأكد من أن البيانات التي يملأها المستخدمون في النماذج بالتنسيق الصحيح الذي نحتاجه لمعالجتها بنجاح ، وأن ذلك لن يفسد تطبيقاتنا. نريد أيضًا مساعدة مستخدمينا على ملء نماذجنا بشكل صحيح وعدم الشعور بالإحباط عند محاولة استخدام تطبيقاتنا. يساعدنا التحقق من صحة النموذج في تحقيق هذه الأهداف - تخبرك هذه المقالة بما تحتاج إلى معرفته.</span></div> + +<h2 id="أدلة_متقدمة" style="direction: rtl;">أدلة متقدمة</h2> + + + +<div style="direction: rtl;"><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/How_to_build_custom_form_controls">كيفية بناء الحاجيات النموذجية المخصصة</a></strong></div> + +<div style="direction: rtl;"><span style="">ستصادف بعض الحالات التي لا توفر فيها أدوات النموذج الأصلية ما تحتاجه ، على سبيل المثال بسبب التصميم أو الوظيفة. في مثل هذه الحالات ، قد تحتاج إلى إنشاء عنصر واجهة مستخدم للنموذج من HTML خام. تشرح هذه المقالة كيفية القيام بذلك والاعتبارات التي يجب أن تكون على دراية بها عند القيام بذلك ، مع دراسة حالة عملية.</span></div> + +<div style="direction: rtl;"></div> + +<div style="direction: rtl;"><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Sending_forms_through_JavaScript">إرسال النماذج من خلال JavaScript</a></strong></div> + +<div style="direction: rtl;"><span style="">تبحث هذه المقالة في طرق استخدام نموذج لتجميع طلب HTTP وإرساله عبر JavaScript مخصص ، بدلاً من إرسال النموذج القياسي. يبحث أيضًا في سبب رغبتك في القيام بذلك ، والآثار المترتبة على القيام بذلك. (راجع أيضًا استخدام كائنات <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects">FormData</a>.)</span></div> + +<div style="direction: rtl;"></div> + +<div style="direction: rtl;"><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_controls">نماذج HTML في المتصفحات القديمة</a></strong></div> + +<div style="direction: rtl;"><span style="">اكتشاف ميزة تغطية المقالة ، وما إلى ذلك ، يجب إعادة توجيه هذا إلى وحدة اختبار عبر المتصفح ، حيث تتم تغطية نفس الأشياء بشكل أفضل هناك.</span></div> + +<h2 id="أدلة_تصميم_النموذج" style="direction: rtl;">أدلة تصميم النموذج</h2> + + + +<div style="direction: rtl;"><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Styling_web_forms">تصميم نماذج HTML</a></strong></div> + +<div style="direction: rtl;"><span style="">توفر هذه المقالة مقدمة لنماذج التصميم باستخدام CSS ، بما في ذلك جميع الأساسيات التي قد تحتاج إلى معرفتها لمهام التصميم الأساسية.</span></div> + +<div style="direction: rtl;"></div> + +<div style="direction: rtl;"><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Advanced_form_styling">التصميم المتقدم لنماذج HTML</a></strong></div> + +<div style="direction: rtl;"><span style="">هنا نلقي نظرة على بعض تقنيات تصميم النماذج الأكثر تقدمًا والتي يجب استخدامها عند محاولة التعامل مع بعض العناصر الأكثر صعوبة في التصميم.</span></div> + +<div style="direction: rtl;"></div> + +<div style="direction: rtl;"><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/UI_pseudo-classes">جدول توافق الخاصية لعناصر واجهة المستخدم للنموذج</a></strong></div> + +<div style="direction: rtl;"><span style="">توفر هذه المقالة الأخيرة مرجعًا مفيدًا يسمح لك بالبحث عن خصائص CSS المتوافقة مع عناصر النموذج.</span></div> + +<div style="direction: rtl;"></div> + +<div style="direction: rtl;"><a href="https://developer.mozilla.org/en-US/Learn/HTML/Introduction_to_HTML">مقدمة إلى HTML </a>| <a href="https://developer.mozilla.org/en-US/Learn/HTML">تعلم HTML </a>| <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5">HTML5 </a>| <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML">دليل المطور </a>| <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">مرجع العنصر </a>| <a href="https://orientdetectors.com/ar/" rel="noopener">المرجع</a></div> + +<h2 id="إقرأ_أيضا" style="direction: rtl;">إقرأ أيضا</h2> + +<ul> + <li style="direction: rtl;"><a href="/en-US/docs/Web/HTML/Element#Forms">مرجع عنصر نماذج HTML</a></li> + <li style="direction: rtl;"><a href="/en-US/docs/Web/HTML/Element/input">مرجع أنواع <input> HTML</a></li> +</ul> diff --git a/files/ar/learn/html/index.html b/files/ar/learn/html/index.html new file mode 100644 index 0000000000..c9a9e88aa2 --- /dev/null +++ b/files/ar/learn/html/index.html @@ -0,0 +1,60 @@ +--- +title: 'تعلم HTML: أدلة ودروس' +slug: Learn/HTML +tags: + - Beginner + - CodingScripting + - HTML + - NeedsContent + - NeedsTranslation + - TopicStub +translation_of: Learn/HTML +--- +<p> </p> + +<p><font><font><font>لبناء المواقع، يجب أن نعرف عن {{معجم ( 'HTML')}} - التكنولوجيا الأساسية المستخدمة لتحديد هيكل صفحة ويب. </font></font></font><font><font>يستخدم HTML لتحديد ما إذا كان ينبغي الاعتراف محتوى الويب الخاص بك كفقرة، القائمة، العنوان، وصلة، صورة، لاعب الوسائط المتعددة، شكل، أو واحد من العديد من العناصر الأخرى المتاحة أو حتى عنصر الجديد الذي قمت بتحديده.</font></font></p> + +<h2 id="مسار_التعلم"><font><font>مسار التعلم</font></font></h2> + +<p><font><font>من الناحية المثالية يجب أن تبدأ رحلة التعلم عن طريق تعلم HTML. ابدأ القراءة </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction"><font><font>مقدمة إلى HTML</font></font></a><font><font> . ثم تستطيع الانتقال إلى تعلم حول مواضيع أكثر تقدما مثل:</font></font></p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS"><font><font><font>CSS</font></font></font></a><font><font><font> ، وكيفية استخدامه لHTML أسلوب (على سبيل المثال تغيير حجم النص والخطوط المستخدمة، إضافة الحدود والظلال، تخطيط صفحتك مع عدة أعمدة، إضافة الرسوم المتحركة والتأثيرات البصرية الأخرى.)</font></font></font></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript"><font><font><font>جافا سكريبت</font></font></font></a><font><font><font> ، وكيفية استخدامها لإضافة وظائف حيوية على صفحات الويب (على سبيل المثال العثور على موقعك ورسم على الخريطة، جعل تظهر عناصر واجهة المستخدم / تختفي عند تبديل زر، حفظ بيانات المستخدمين محليا على أجهزة الكمبيوتر الخاصة بهم، والكثير أكثر بكثير.)</font></font></font></li> +</ul> + +<p><font><font>قبل البدء في هذا الموضوع، يجب أن يكون لديك معرفة أساسية على الأقل مع استخدام أجهزة الكمبيوتر، واستخدام شبكة الإنترنت بشكل سلبي (أي مجرد النظر اليها، واستهلاك المحتوى). </font></font><font><font><font>يجب ان تكون بيئة العمل الأساسية اقامة النحو المفصل في</font></font></font><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software"><font><font><font>تثبيت البرامج الأساسية</font></font></font></a><font><font><font> ، وفهم كيفية إنشاء وإدارة الملفات، كما هو مفصل في </font></font></font><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files"><font><font><font>التعامل مع الملفات</font></font></font></a><font><font><font> - على حد سواء هي جزء من لدينا </font></font></font><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web"><font><font><font>الشروع في العمل مع شبكة الإنترنت</font></font></font></a><font><font><font> وحدة مبتدئا كاملة ل.</font></font></font></p> + +<p><font><font>فمن المستحسن أن تعمل من خلال </font></font><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web"><font><font>الشروع في العمل مع شبكة الإنترنت</font></font></a><font><font> قبل محاولة هذا الموضوع، ومع ذلك فإنه ليس من الضروري على الاطلاق. كثيرا ما تتم تغطيتها في </font></font><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics"><font><font>أساسيات HTML</font></font></a><font><font> تغطي المادة أيضا فيما لدينا </font></font><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML"><font><font>مقدمة إلى HTML</font></font></a><font><font> وحدة، وإن كان ذلك في مزيد من التفاصيل الكثير.</font></font></p> + +<h2 id="وحدات"><font><font>وحدات</font></font></h2> + +<p><font><font>هذا الموضوع يحتوي على الوحدات التالية، في الترتيب المقترح للعمل من خلالها. يجب عليك بالتأكيد تبدأ مع أول واحد.</font></font></p> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML"><font><font>مقدمة إلى HTML</font></font></a></dt> + <dd><font><font>هذه الوحدة يمهد الطريق، والحصول على استخدمته لمفاهيم هامة وتركيب، والنظر في تطبيق HTML إلى النص، وكيفية إنشاء ارتباطات تشعبية، وكيفية استخدام HTML لهيكلة صفحة ويب.</font></font></dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding"><font><font>الوسائط المتعددة وتضمينها</font></font></a></dt> + <dd><font><font>هذه الوحدة يستكشف كيفية استخدام HTML لتشمل الوسائط المتعددة في صفحات الويب الخاصة بك، بما في ذلك الطرق المختلفة التي يمكن أن تكون الصور المدرجة، وكيفية تضمين الفيديو والصوت، وحتى صفحات الويب الأخرى كلها.</font></font></dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables"><font><font>جداول HTML</font></font></a></dt> + <dd><font><font>يمكن أن تمثل جداول البيانات على صفحة ويب في ومفهومة {{معجم ( "الوصول"، "الوصول")}} الطريقة يكون تحديا. هذه الوحدة تغطي العلامات الجدول الأساسية، جنبا إلى جنب مع ميزات أكثر تعقيدا مثل تنفيذ التسميات وملخصات.</font></font></dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms"><font><font>نماذج HTML</font></font></a></dt> + <dd><font><font>أشكال هي جزء مهم جدا من الشبكة - هذه توفر الكثير من الوظائف التي تحتاج إليها للتفاعل مع المواقع على شبكة الإنترنت، على سبيل المثال تسجيل وتسجيل الدخول، وإرسال ردود الفعل، وشراء المنتجات، وأكثر من ذلك. هذه الوحدة التي يحصل لك مع خلق الأجزاء العميل من الأشكال.</font></font></dd> +</dl> + +<h2 id="حل_المشاكل_المشتركة_HTML"><font><font>حل المشاكل المشتركة HTML</font></font></h2> + +<p><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto"><font><font>استخدام HTML لحل المشاكل المشتركة</font></font></a><font><font> يوفر روابط لأقسام المحتوى شرح كيفية استخدام HTML لحل مشاكل شائعة جدا عند إنشاء صفحة ويب: التعامل مع العناوين، وإضافة الصور ومقاطع الفيديو، مؤكدا المحتوى، وخلق شكل أساسي، الخ</font></font></p> + +<h2 id="أنظر_أيضا"><font><font>أنظر أيضا</font></font></h2> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML"><font><font>HTML (لغة توصيف النص التشعبي)</font></font></a><font><font> على MDN</font></font></dt> + <dd><font><font>نقطة الدخول الرئيسية للثائق HTML على MDN، بما في ذلك عنصر مفصلة والسمة المراجع - إذا كنت تريد أن تعرف ما سمات عنصر ديه أو ما تقدر سمة لها، على سبيل المثال، وهذا هو مكان عظيم للبدء.</font></font></dd> +</dl> + +<p> </p> + +<p> </p> + +<div id="eJOY__extension_root" style=""> </div> diff --git a/files/ar/learn/html/introduction_to_html/getting_started/index.html b/files/ar/learn/html/introduction_to_html/getting_started/index.html new file mode 100644 index 0000000000..35213057e3 --- /dev/null +++ b/files/ar/learn/html/introduction_to_html/getting_started/index.html @@ -0,0 +1,760 @@ +--- +title: ابدء مع HTML +slug: Learn/HTML/Introduction_to_HTML/Getting_started +translation_of: Learn/HTML/Introduction_to_HTML/Getting_started +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary" dir="rtl">في هذه المقالة سنغطي أساسيات لغة ترميز النص الفائق (HTML). سنقوم بتوفير تعريف للعناصر، السمات، وجميع المصطلحات الأخرى التي قد تكون قد سمعتها من قبل، ومتى يتم استخدامها في اللغة. سنقوم أيضاً بشرح كيف يتم كتابة العنصر في اللغة، وكيف يتم تنظيم وثيقة لغة ترميز النص الفائق، وسنشرح الميزات الأساسية الأخرى في اللغة. على طول الشرح، سنقوم باستخدام بعض الأمثلة، لنخلق نوعاً من الإثارة!</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th dir="rtl" scope="row">المتطلبات:</th> + <td dir="rtl">أساسيات استخدام الحاسوب، <a href="https://developer.mozilla.org/ar/docs/Learn/Getting_started_with_the_web/%D8%AA%D8%AB%D8%A8%D9%8A%D8%AA_%D8%A7%D9%84%D8%A8%D8%B1%D9%85%D8%AC%D9%8A%D8%A7%D8%AA_%D8%A7%D9%84%D8%A3%D8%B3%D8%A7%D8%B3%D9%8A%D8%A9">البرمجيات الأساسية مثبتة</a>، <a href="https://developer.mozilla.org/ar/docs/Learn/Getting_started_with_the_web/%D8%A7%D9%84%D8%AA%D8%B9%D8%A7%D9%85%D9%84_%D9%85%D8%B9_%D8%A7%D9%84%D9%85%D9%84%D9%81%D8%A7%D8%AA">معرفة أساسية حول التعامل</a> <a href="https://developer.mozilla.org/ar/docs/Learn/Getting_started_with_the_web/%D8%A7%D9%84%D8%AA%D8%B9%D8%A7%D9%85%D9%84_%D9%85%D8%B9_%D8%A7%D9%84%D9%85%D9%84%D9%81%D8%A7%D8%AA">مع الملفات</a>.</td> + </tr> + <tr> + <th dir="rtl" scope="row">الهدف:</th> + <td dir="rtl">الحصول على معرفة مبدئية باللغة، والحصول على بعض التدريبات لكتابة بعض العناصر في اللغة.</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="ما_هي_HTML؟">ما هي HTML؟</h2> + +<p dir="rtl">لغة ترميز النص الفائق ليس لغة برمجة؛ وإنما <em>لغة ترميزيّة</em> (markup language) تُستخدم لإخبار المتصفح بكيفيّة تنظيم صفحات الويب التي تزورها. يُمكن أن تكون هذه اللغة معقدة أو بسيطة كما يرغبها أن تكون مطور الويب. تتألف هذه اللغة من مجموعة من العناصر، والتي تحيط أو <em>تُرَمِز</em> أجزاء من المحتوى لتجعلها تظهر أو تتصرف بطريقة معينة. الوسوم المغلقة يُمكن أن تحوِّل جزء من النص إلى رابط يشير لموقع آخر، أو يمكن أن تجعل الكلمات مائلة، وهلم جرا. على سبيل المثال، انظر للسطر التالي:</p> + +<pre dir="rtl">قطتي شديدة الجمال</pre> + +<p dir="rtl">إذا أردنا جعل هذا النص فقرة، يمكننا القيام بهذا عن طريق توصيفه على أنه فقرة عن طريق إحاطته بعنصر الفقرة ({{htmlelement("p")}}):</p> + +<pre class="brush: html"><p>قطتي شديدة الجمال</p></pre> + +<div class="note"> +<p dir="rtl"><strong>ملاحظة</strong>: عناصر لغة ترميز النص الفائق غير حساسة لحالة الحرف، أي يُمكِن كتابتها باستخدام حروف صغيرة أو كبيرة. على سبيل المثال يمكن كتابة العنصر {{htmlelement("title")}} بالشكل <code><title></code>، أو <code><TITLE></code>، أو <code><Title></code>، أو <code><TiTlE></code>، إلخ. جميع تلك الأشكال ستعمل بدون مشاكل. الأفضل هو كتابة جميع العنصار بحروف صغيرة لأسباب تنسيقيّة، ومقروئيّة، وغيرها من الأسباب الأخرى.</p> +</div> + +<h2 dir="rtl" id="تشريح_عنصر_لغة_ترميز_النص_الفائق">تشريح عنصر لغة ترميز النص الفائق</h2> + +<p dir="rtl">دعنا نستكشف عنصر الفقرة ذاك أكثر قليلاً:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15908/beautiful-cat.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p> + +<p dir="rtl">الأجزاء الرئيسية من عنصرنا هي:</p> + +<ol dir="rtl"> + <li><strong>وسم الفتح</strong> (أو وسم البداية أو الوسم الإفتتاحي): يتألف من اسم العنصر (في حالتنا <code>p</code>)، محاطاً بقوس مفتوح وآخر مُغلَق. هذا المكوِّن يحدد بداية العنصر، أو بداية تأثيره (في حالتنا يحدد أين تبدأ الفقرة).</li> + <li><strong>وسم الإغلاق</strong> (أو وسم النهاية أو الوسم الختامي): مشابه لوسم البداية، ماعدا أنه يتضمن شرطة مائلة (/) قبل اسم العنصر. هذا المكوِّن يحدد نهاية (في حالتنا نهاية الفقرة). يُعَد نسيان وضع وسم الإغلاق أحد الأخطاء الشائعة التي يقع بها المبتدئون والتي تؤدي إلى مشاكل تنظيميّة في الصفحة (خروج النص من مكان مثلاً).</li> + <li><strong>المحتوى</strong>: هذا المكوِّن يمثل محتوى الذي يُرمِزُهُ العنصر، والذي هو في حالتنا النص.</li> + <li><strong>العنصر</strong>: يتألف من وسم البداية، ووسم الإغلاق، والمحتوى (جميع المحتويات السابقة).</li> +</ol> + +<h3 dir="rtl" id="التعلم_النشط_إنشاء_أول_عنصر_لك_في_لغة_ترميز_النص_الفائق">التعلم النشط: إنشاء أول عنصر لك في لغة ترميز النص الفائق</h3> + +<p dir="rtl">قم بتعديل السطر أدناه في منطقة <em>الإدخال</em> عن طريق إحاطته باستخدام الوسمين <code><em></code> و <code></em></code> (ضع <code><em></code> قبله <em>لفتح العنصر</em>، و <code></em></code> بعده <em>لإغلاق العنصر</em>)، هذا ينبغي أن يحوِّل النص إلى مائل. يمكنك رؤية التغييرات في منطقة <em>الخرج</em>.</p> + +<p dir="rtl">إذا قمت بخطأ ما، فيمكنك دائماً تصفير (إعادتها إلى ما كانت عليه) الشيفرة باستخدام زر <em>التصفير</em>. إذا كنت عالقاً بشكل كامل، فيمكنك الضغط على <em>زر عرض الحل</em> لرؤية الجواب.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><h2>Live output</h2> +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="playable-code" style="min-height: 100px;width: 95%"> + This is my text. +</textarea> + +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Show solution" /> +</div> +</pre> + +<p> </p> + +<pre class="brush: css">html { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +} +</pre> + +<p> </p> + +<p> </p> + +<p> </p> + +<pre class="brush: js">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<em>This is my text.</em>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> + +<p> </p> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 dir="rtl" id="العناصر_المتداخلة">العناصر المتداخلة</h3> + +<p dir="rtl">يمكنك وضع عنصر بداخل عنصر أخر أيضاً، وهذا ما يدعى <strong>بالتداخل</strong> (nesting). إذا أردنا تحديد أن قطتنا جميلة <strong>جداً</strong>، يمكننا إحاطة الكلمة "جداً" بالعنصر <a class="new" href="https://developer.mozilla.org/ar/docs/Web/HTML/Element/strong" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code><strong></code></a>، الذي يدل على تأكيد الكلمة بشدّة:</p> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">>قطتي جميلة</span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>strong</span><span class="punctuation token">>جداً</span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>strong</span><span class="punctuation token">></span></span>.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span></code></pre> + +<p dir="rtl">عليك أن تتأكد من أن عناصرك متداخلة بشكل صحيح. في المثال أعلاه قمنا بفتح العنصر <a class="new" href="https://developer.mozilla.org/ar/docs/Web/HTML/Element/p" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code><p></code></a> أولاً، وبعده العنصر <a class="new" href="https://developer.mozilla.org/ar/docs/Web/HTML/Element/strong" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code><strong></code></a>، وبالتالي علينا إغلاق العنصر <a class="new" href="https://developer.mozilla.org/ar/docs/Web/HTML/Element/strong" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code><strong></code></a> ويليه الآخر. فالشكل التالي ليس صحيحاً:</p> + +<pre class="example-bad brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">>قطتي جميلة</span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>strong</span><span class="punctuation token">>جداً</span></span>.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>strong</span><span class="punctuation token">></span></span></code></pre> + +<p dir="rtl">على العناصر أن تُفتَح وتُغلَق بشكل صحيح ليكونوا بشكل واضح داخل أو خارج بعضهما البعض. فإذا تشابكوا بشكل خاطئ كما في الأعلى، سيقوم مُتصفحك بمحاولة القيام بأفضل تخمين حيال ما تحاول القيام به، والذي قد يؤدي إلى نتائج تنسيقيّة خاطئة. لذلك لا تقم بهذا!</p> + +<h3 dir="rtl" id="العناصر_المستحوذة_والمُضمَنِة">العناصر المستحوذة والمُضمَنِة</h3> + +<p dir="rtl">يوجد تصنيفين مهمين للعناصر في لغة الترميز النص الفائق، والذين ينبغي عليك معرفتهم، وهم العناصر المستحوذة (أو الكتلية block elements) والعناصر المُضمَنِة (inline elements).</p> + +<ul dir="rtl"> + <li>ستظهر العناصر الكتلية (Block-level elements) الموجودة في كتلة ظاهرة في الصفحة في سطر جديد مهما كان المحتوى الذي قبلها، وأي محتوى سيأتي بعدها سيظهر أيضاً في سطر جديد. تميل العناصر الكتلية إلى أن تكون عناصر هيكلية للصفحة التي تُمثلُها، فعلى سبيل المثال، الفقرات، والقوائم، وقوائم الملاحة (Navigation Menus)، والذيول (Footers)، إلخ. لا تتداخل العنصر الكتلي بداخل عنصر مضمن، ولكن قد يتداخل بداخل عنصر كتلي آخر.</li> + <li>العناصر المضمنة هي تلك العناصر لتي تُحتوى بداخل العناصر الكتلية وتحيط بأجزاء صغيرة فقط من محتوى الوثيقة، وليس فقرات كاملة أو مجموعات من المحتويات. العنصر المضمن لا يُنشئ سطر جديد ليظهر في الوثيقة، فيمكن أن يظهر بشكل طبيعي بجانب فقرة، على سبيل المثال العنصر {{htmlelement("a")}} (رابط تشعيبي) أو العناصر التوكيدية مثل {{htmlelement("em")}} أو {{htmlelement("strong")}}.</li> +</ul> + +<p dir="rtl">خذ المثال التالي:</p> + +<pre class="brush: html"><em>first</em><em>second</em><em>third</em> + +<p>fourth</p><p>fifth</p><p>sixth</p> +</pre> + +<p dir="rtl">العنصر {{htmlelement("em")}} هو عنصر مضمن، لذلك كما ترى أدناه، العناصر الثلاثة الأولى تتوضع بنفس السطر بدون وجود مسافات بينها. من الناحية الأخرى، العنصر {{htmlelement("p")}} هو عنصر كتلي، لذلك كل عنصر يظهر على سطر جديد، بمسافات سفلية وعلوية بين كل واحد (تخضع المسافات <a href="/ar/docs/Learn/CSS/Introduction_to_CSS">لتنسيق لغة صفحات الطرز المتراصة</a> الإفتراضي الذي يفرضه على الفقرات).</p> + +<p>{{ EmbedLiveSample('Block_versus_inline_elements', 700, 200, "", "", "hide-codepen-jsfiddle") }}</p> + +<div class="note"> +<p dir="rtl"><strong>ملاحظة</strong>: لغة ترميز النص الفائق الإصدار الخامس أعادت تعريف تصنيفات العناصر: انظر إلى <a href="http://www.whatwg.org/specs/web-apps/current-work/complete/section-index.html#element-content-categories">تصنيفات محتوى العناصر</a>. في حين أن هذه التعريفات أكثر دقة وأقل غموضاً من السابقة، إلاّ أنهم أكثر تعقيداً من ناحية الفهم، لذلك سنكمل باستخدام التعريفات القديمة في هذا الموضوع</p> +</div> + +<div class="note"> +<p dir="rtl"><strong>ملاحظة</strong>: المصطلحات "كتلي" و "ضمني" المستخدمة في هذا الموضوع، لا ينبغي أن يشوشوك مع المصطلحات المستخدمة في مقالة <a href="/ar/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">أنواع صناديق لغة صفحات الطرز المتراصة</a> التي تحمل نفس الاسم. في حين أنهم مرتبطين إفتراضياً، إلا أن تغيير نوع العرض في صفحات الطرز المتراصة لا يغير تصنيف العنصر ولا يؤثر على العناصر التي تحتوي وعلى ولا على العناصر التي سيتم إحتواءها. أحد الأسباب التي جعلت لغة ترميز النص الفائق الإصدار الخامس تتخلى عن هذه المصطلحات هي لمنع هذا الارتباك.</p> +</div> + +<div class="note"> +<p dir="rtl"><strong>ملاحظة</strong>: يمكنك إيجاد صفحات مرجعية مفيدة تتضمن قوائم تحوي العناصر الكتلية والمضمنة، انظر إلى <a href="/ar/docs/Web/HTML/Block-level_elements">العناصر الكتلية</a> و <a href="/ar/docs/Web/HTML/Inline_elements">العناصر المضمنة</a>.</p> +</div> + +<h3 dir="rtl" id="العناصر_الفارغة">العناصر الفارغة</h3> + +<p dir="rtl">لا تتبع جميع العناصر النمط المشروح أعلاه، والذي هو عبارة عن وضع وسم الفتح، وبعده المحتوى، وبعده وسم الإغلاق. فبعض العناصر تتألف من وسم مُفرَد، والذي يستخدم عادةً لإدخال/تضمين شيء في الوثيقة. على سبيل المثال، يُضمِن العنصر {{htmlelement("img")}} صورة في الصفحة في الموضع الذي عُرِفَ فيه:</p> + +<pre class="brush: html"><img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"></pre> + +<p dir="rtl">ينبغي أن يُخرِج ذلك السطر الشكل التالي في صفحتك:</p> + +<p>{{ EmbedLiveSample('Empty_elements', 700, 300, "", "", "hide-codepen-jsfiddle") }}</p> + +<div class="note"> +<p dir="rtl"><strong>ملاحظة</strong>: تسمى العناصر الفارغة أحياناً <em>بالعناصر الخاوية</em> (void elements).</p> +</div> + +<h2 dir="rtl" id="السمات">السمات</h2> + +<p dir="rtl">يمكن للعناصر أيضاً أنت تحتوي على سمات، والتي تبدو كشيء من هذا القبيل:</p> + +<p><img alt='&amp;amp;lt;p class="editor-note">قطتي شديدة الجمال&amp;amp;lt;/p>' src="https://mdn.mozillademos.org/files/15909/beautiful-cat-attribute.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p> + +<p dir="rtl">تحتوي السمات على معلومات إضافية حول العنصر والتي لا تريد أن تظهرها في المحتوي الفعلي. في حالتنا تسمح لك السمة <code>class</code> أن تعطي العنصر مُعرِف والذي يمكن استخدامه لاحقاً للإشارة للعنصر وإعطائه تنسيق معين وأشياء أخرى.</p> + +<p dir="rtl">السمة يجب أن تملك دائماً:</p> + +<ol dir="rtl"> + <li>مسافة بينها وبين اسم العنصر (أو السمة التي تسبقها، إذا كان العنصر يملك بالفعل سمةً أو أكثر).</li> + <li>اسم السمة، متبوعاً بإشارة يساوي.</li> + <li>علامتي تنصيص تحيط بقيمة السمة.</li> +</ol> + +<h3 dir="rtl" id="التعلم_النشط_إضافة_سمات_إلى_عنصر">التعلم النشط: إضافة سمات إلى عنصر</h3> + +<p dir="rtl">يمكننا أخذ العنصر {{htmlelement("a")}} كمثال آخر. يعد الحرف "a" إختصاراً لكلمة "مرساة (anchor)"، يحول هذا العنصر النص الذي يحيط به إلى رابط تشعبي. يُمكن أن يأخذ هذا العنصر عدداً من السمات، منها:</p> + +<ul dir="rtl"> + <li>السمة <code>href</code>: تحدد قيمة هذه السمة عنوان الويب الذي يشير إليه الرابط؛ لينتقل إلى المتصفح عند الضغط عليه. على سبيل المثال، <code>href="https://www.mozilla.org/"</code>.</li> + <li>السمة <code>title</code>: تحدد قيمة هذه السمة معلومات إضافية حول الرابط، مثل ما هي الصفحة التي يشير إليها هذا الرابط. على سبيل المثال، يمكننا وضع القيمة: <code>title="The Mozilla homepage"</code>. سيظهر هذا النص كتلميح عند التحويم على الرابط.</li> + <li>السمة <code>target</code>: تحدد هذه السمة سياق التصفح الذي سيفتح به الرابط. فعلى سبيل المثال، القيمة <code>target="_blank"</code> ستعرض الرابط (الموقع الذي يشير إلى الرابط) في نافذة جديدة. إذا أردت عرض الرابط في الصحة الحالية، فلا تستخدم هذه السمة وحسب.</li> +</ul> + +<p dir="rtl">قم بتعديل السطر أدناه في منطقة <em>الإدخال</em> لتحويله إلى رابط يشير لموقعك المفضل. أولاً، أضف العنصر <code><a></code>. ثانياً، أضف السمتين <code>href</code> و <code>title</code>. وأخيراً، عَرِف السمة <code>target</code> لفتح الرابط في نافذة جديدة. ستكون قادراً على رؤية التغييرات بشكل حي في منطقة <em>الإخراج</em>. ينبغي أن ترى أنه عند التحويم على الرابط سيُعرض محتوى السمة <code>title</code>، وعند الضغط عليه سيتم الإنتقال إلى عنوان الويب الموجود في السمة <code>href</code>. تذكر أنه ينبغي عليك وضع مسافة بين اسم العنصر وكل سمة يملكها.</p> + +<p dir="rtl">إذا قمت بخطأ ما، فيمكنك دائماً تصفير (إعادت الشيفرة إلى ما كانت عليه) الشيفرة باستخدام زر <em>التصفير</em>. إذا كنت عالقاً بشكل كامل، فيمكنك الضغط على <em>زر عرض الحل</em> لرؤية الجواب.</p> + +<div class="hidden"> +<h6 id="Playable_code2">Playable code2</h6> + +<pre class="brush: html"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="min-height: 100px;width: 95%"> + &lt;p&gt;A link to my favourite website.&lt;/p&gt; +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + +<p> </p> + +<p> </p> + +<pre class="brush: css">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<p> </p> + +<p> </p> + +<p> </p> + +<pre class="brush: js">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<p>A link to my <a href="https://www.mozilla.org/" title="The Mozilla homepage" target="_blank">favourite website</a>.</p>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> + +<p> </p> +</div> + +<p>{{ EmbedLiveSample('Playable_code2', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 dir="rtl" id="السمات_البوليانية_(المنطقية)">السمات البوليانية (المنطقية)</h3> + +<p dir="rtl">سترى أحياناً سمات تُكتَب من دون قيمة. تدعى هذه السمات بالسمات المنطقية، ويمكن أن تأخذ هذه السمات قيمة واحدة، والتي هي عادةً اسم السمة نفسها. على سبيل المثال، السمة {{htmlattrxref("disabled", "input")}}، والتي يُمكن أن تُسندها لعناصر الإدخال إذا أردت تعطيلها حتى لا يستطيع المستخدم إدخال أية بيانات فيها.</p> + +<pre><input type="text" disabled="disabled"></pre> + +<p dir="rtl">كاختصار، يمكنك كتابة السمة أيضاً بالشكل التالي (قمنا أيضاً بإضافة عنصر إدخال غير مُعطَل لتوضيح الفكرة أكثر):</p> + +<pre class="brush: html"><input type="text" disabled> + +<input type="text"> +</pre> + +<p dir="rtl">المثالين سيعطيانك نفس النتيجة:</p> + +<p>{{ EmbedLiveSample('Boolean_attributes', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 dir="rtl" id="حذف_علامات_الإقتباس_من_حول_قيم_السمات">حذف علامات الإقتباس من حول قيم السمات</h3> + +<p>When you look around the World Wide Web, you'll come across all kind of strange markup styles, including attribute values without quotes. This is allowable in certain circumstances, but will break your markup in others. For example, if we revisit our link example from earlier, we could write a basic version with only the <code>href</code> attribute, like this:</p> + +<pre><a href=<code>https://www.mozilla.org/</code>>favourite website</a></pre> + +<p>However, as soon as we add the <code>title</code> attribute in this style, things will go wrong:</p> + +<pre class="brush: html"><a href=<code>https://www.mozilla.org/</code> title=The Mozilla homepage>favourite website</a></pre> + +<p>At this point the browser will misinterpret your markup, thinking that the <code>title</code> attribute is actually three attributes — a title attribute with the value "The", and two boolean attributes, <code>Mozilla</code> and <code>homepage</code>. This is obviously not what was intended, and will cause errors or unexpected behavior in the code, as seen in the live example below. Try hovering over the link to see what the title text is!</p> + +<p>{{ EmbedLiveSample('Omitting_quotes_around_attribute_values', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>Our advice is to always include the attribute quotes — it avoids such problems, and results in more readable code too.</p> + +<h3 dir="rtl" id="هل_استخدم_علامة_تنصيص_مزدوجة_أم_مفردة؟">هل استخدم علامة تنصيص مزدوجة أم مفردة؟</h3> + +<p>In this article you'll notice that the attributes are all wrapped in double quotes. You might however see single quotes in some people's HTML. This is purely a matter of style, and you can feel free to choose which one you prefer. Both the following lines are equivalent:</p> + +<pre class="brush: html"><a href="http://www.example.com">A link to my example.</a> + +<a href='http://www.example.com'>A link to my example.</a></pre> + +<p>You should however make sure you don't mix them together. The following will go wrong!</p> + +<pre class="brush: html"><a href="http://www.example.com'>A link to my example.</a></pre> + +<p>If you've used one type of quote in your HTML, you can include the other type of quote without causing any problems:</p> + +<pre class="brush: html"><a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a></pre> + +<p>However if you want to include a quote within the quotes where both the quotes are of the same type(single quote or double quote), you'll have to <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started#Entity_references_Including_special_characters_in_HTML">use HTML entities</a> for the quotes.</p> + +<h2 dir="rtl" id="تشريح_وثيقة_لغة_ترميز_النص_الفائق">تشريح وثيقة لغة ترميز النص الفائق</h2> + +<p>That wraps up the basics of individual HTML elements, but they aren't very useful on their own. Now we'll look at how individual elements are combined to form an entire HTML page:</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>My test page</title> + </head> + <body> + <p>This is my page</p> + </body> +</html></pre> + +<p>Here we have:</p> + +<ol> + <li><code><!DOCTYPE html></code>: The doctype. In the mists of time, when HTML was young (about 1991/2), doctypes were meant to act as links to a set of rules that the HTML page had to follow to be considered good HTML, which could mean automatic error checking and other useful things. They used to look something like this: + + <pre><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></pre> + However, these days no one really cares about them, and they are really just a historical artifact that needs to be included for everything to work right. <code><!DOCTYPE html></code> is the shortest string of characters that counts as a valid doctype; that's all you really need to know.</li> + <li><code><html></html></code>: The {{htmlelement("html")}} element. This element wraps all the content on the entire page, and is sometimes known as the root element.</li> + <li><code><head></head></code>: The {{htmlelement("head")}} element. This element acts as a container for all the stuff you want to include on the HTML page that <em>isn't</em> the content you are showing to your page's viewers. This includes things like keywords and a page description that you want to appear in search results, CSS to style our content, character set declarations, and more. You'll learn more about this in the next article in the series.</li> + <li><code><meta charset="utf-8"></code>: This element sets the character set your document should use to UTF-8, which includes most characters from the vast majority of human written languages. Essentially it can now handle any textual content you might put on it. There is no reason not to set this, and it can help avoid some problems later.</li> + <li><code><title></title></code>: The {{htmlelement("title")}} element. This sets the title of your page, which is the title that appears in the browser tab the page is loaded in, and is used to describe the page when you bookmark/favorite it.</li> + <li><code><body></body></code>: The {{htmlelement("body")}} element. This contains <em>all</em> the content that you want to show to web users when they visit your page, whether that's text, images, videos, games, playable audio tracks, or whatever else.</li> +</ol> + +<h3 dir="rtl" id="التعلم_النشط_إضافة_بعض_الميزات_لوثيقة_ترميز_النص_الفائق">التعلم النشط: إضافة بعض الميزات لوثيقة ترميز النص الفائق</h3> + +<p>If you want to experiment with writing some HTML on your local computer, you can:</p> + +<ol> + <li>Copy the HTML page example listed above.</li> + <li>Create a new file in your text editor.</li> + <li>Paste the code into the new text file.</li> + <li>Save the file as <code>index.html</code>.</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: You can also find this basic HTML template on the <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">MDN Learning Area Github repo</a>.</p> +</div> + +<p>You can now open this file in a web browser to see what the rendered code looks like, and then edit the code and refresh the browser to see what the result is. Initially it will look like this:</p> + +<p><img alt="A simple HTML page that says This is my page" src="https://mdn.mozillademos.org/files/12279/template-screenshot.png" style="display: block; height: 365px; margin: 0px auto; width: 595px;">So in this exercise, you can edit the code locally on your computer, as outlined above, or you can edit it in the editable sample window below (the editable sample window represents just the contents of the {{htmlelement("body")}} element, in this case.) We'd like you to have a go at implementing the following steps:</p> + +<ul> + <li>Just below the opening tag of the {{htmlelement("body")}} element, add a main title for the document. This should be wrapped inside an <code><h1></code> opening tag and <code></h1></code> closing tag.</li> + <li>Edit the paragraph content to include some text about something you are interested in.</li> + <li>Make any important words stand out in bold by wrapping them inside a <code><strong></code> opening tag and <code></strong></code> closing tag</li> + <li>Add a link to your paragraph, as <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Active_learning_Adding_attributes_to_an_element">explained earlier in the article</a>.</li> + <li>Add an image to your document, below the paragraph, as <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Empty_elements">explained earlier in the article</a>. You'll get bonus points if you manage to link to a different image (either locally on your computer, or somewhere else on the web.)</li> +</ul> + +<p>If you make a mistake, you can always reset it using the <em>Reset</em> button. If you get really stuck, press the <em>Show solution</em> button to see the answer.</p> + +<div class="hidden"> +<h6 id="Playable_code3">Playable code3</h6> + +<p> </p> + +<pre class="brush: html"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="min-height: 100px;width: 95%"> + &lt;p&gt;This is my page&lt;/p&gt; +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + +<p> </p> + +<p> </p> + +<p> </p> + +<p> </p> + +<pre class="brush: css">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +img { + max-width: 100%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<p> </p> + +<p> </p> + +<p> </p> + +<pre class="brush: js">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<p>I really enjoy <strong>playing the drums</strong>. One of my favourite drummers is Neal Peart, who\ plays in the band <a href="https://en.wikipedia.org/wiki/Rush_%28band%29" title="Rush Wikipedia article">Rush</a>.\ My favourite Rush album is currently <a href="http://www.deezer.com/album/942295">Moving Pictures</a>.</p>\ <img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg">'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> + +<p> </p> + +<p> </p> +</div> + +<p>{{ EmbedLiveSample('Playable_code3', 700, 600, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 dir="rtl" id="المساحات_الفارغة_في_لغة_ترميز_النص_الفائق">المساحات الفارغة في لغة ترميز النص الفائق</h3> + +<p>In the above examples you may have noticed that a lot of whitespace is included in the code listings — this is not necessary at all; the two following code snippets are equivalent:</p> + +<pre class="brush: html"><p>Dogs are silly.</p> + +<p>Dogs are + silly.</p></pre> + +<p>No matter how much whitespace you use (which can include space characters, but also line breaks), the HTML parser reduces each one down to a single space when rendering the code. So why use so much whitespace? The answer is readability — it is so much easier to understand what is going on in your code if you have it nicely formatted, and not just bunched up together in a big mess. In our HTML we've got each nested element indented by two spaces more than the one it is sitting inside. It is up to you what style of formatting you use (how many spaces for each level of indentation, for example), but you should consider formatting it.</p> + +<h2 id="Entity_references_Including_special_characters_in_HTML">Entity references: Including special characters in HTML</h2> + +<p>In HTML, the characters <code><</code>, <code>></code>,<code>"</code>,<code>'</code> and <code>&</code> are special characters. They are parts of the HTML syntax itself, so how do you include one of these characters in your text, for example if you really want to use an ampersand or less than sign, and not have it interpreted as code as some browsers may do?</p> + +<p>We have to use character references — special codes that represent characters, and can be used in these exact circumstances. Each character reference is started with an ampersand (&), and ended by a semicolon (;).</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Literal character</th> + <th scope="col">Character reference equivalent</th> + </tr> + </thead> + <tbody> + <tr> + <td><</td> + <td>&lt;</td> + </tr> + <tr> + <td>></td> + <td>&gt;</td> + </tr> + <tr> + <td>"</td> + <td>&quot;</td> + </tr> + <tr> + <td>'</td> + <td>&apos;</td> + </tr> + <tr> + <td>&</td> + <td>&amp;</td> + </tr> + </tbody> +</table> + +<p>In the below example, you can see two paragraphs, which are talking about web technologies:</p> + +<pre class="brush: html"><p>In HTML, you define a paragraph using the <p> element.</p> + +<p>In HTML, you define a paragraph using the &lt;p&gt; element.</p></pre> + +<p>In the live output below, you can see that the first paragraph has gone wrong, because the browser thinks that the second instance of <code><p></code> is starting a new paragraph. The second paragraph looks fine, because we have replaced the angle brackets with character references.</p> + +<p>{{ EmbedLiveSample('Entity_references_Including_special_characters_in_HTML', 700, 200, "", "", "hide-codepen-jsfiddle") }}</p> + +<div class="note"> +<p><strong>Note</strong>: A chart of all the available HTML character entity references can be found on Wikipedia: <a class="external text" href="http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references" rel="nofollow">List of XML and HTML character entity references</a>.</p> +</div> + +<h2 dir="rtl" id="التعليقات_في_لغة_ترميز_النص_الفائق">التعليقات في لغة ترميز النص الفائق</h2> + +<p>In HTML, as with most programming languages, there is a mechanism available to write comments in the code — comments are ignored by the browser and invisible to the user, and their purpose is to allow you to include comments in the code to say how your code works, what the different parts of the code do, etc. This can be very useful if you return to a code base that you've not worked on for six months, and can't remember what you did — or if you hand your code over to someone else to work on.</p> + +<p>To turn a section of content inside your HTML file into a comment, you need to wrap it in the special markers <code><!--</code> and <code>--></code>, for example:</p> + +<pre class="brush: html"><p>I'm not inside a comment</p> + +<!-- <p>I am!</p> --></pre> + +<p>As you can see below, the first paragraph appears in the live output, but the second one doesn't.</p> + +<p>{{ EmbedLiveSample('HTML_comments', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 dir="rtl" id="الملخص">الملخص</h2> + +<p>You've reached the end of the article — we hope you enjoyed your tour of the very basics of HTML! At this point you should understand what the language looks like, how it works at a basic level, and be able to write a few elements and attributes. This is a perfect place to be right now, as in subsequent articles in the module we will go into some of the things you have already looked at in a lot more detail, and introduce some new features of the language. Stay tuned!</p> + +<div class="note"> +<p><strong>Note</strong>: At this point, as you start to learn more about HTML, you might also want to start to explore the basics of Cascading Style Sheets, or <a href="/en-US/docs/Learn/CSS">CSS</a>. CSS is the language you use to style your web pages (whether e.g. changing the font or colors, or altering the page layout). HTML and CSS go very well together, as you'll soon discover.</p> +</div> + +<h2 dir="rtl" id="انظر_أيضاً">انظر أيضاً</h2> + +<ul dir="rtl"> + <li> + <p><a href="/ar/docs/Web/HTML/Applying_color">إضافة لون إلى عناصر لغة ترميز النص الفائق باستخدام صفحات الطرز المتراصة.</a></p> + </li> +</ul> + +<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> diff --git a/files/ar/learn/html/introduction_to_html/html_text_fundamentals/index.html b/files/ar/learn/html/introduction_to_html/html_text_fundamentals/index.html new file mode 100644 index 0000000000..fba39b360c --- /dev/null +++ b/files/ar/learn/html/introduction_to_html/html_text_fundamentals/index.html @@ -0,0 +1,657 @@ +--- +title: أساسيات النصوص في لغة ترميز النص الفائق +slug: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +tags: + - العنونة + - الفقرات + - النصوص + - دليل + - مبدئين + - مقدمة إلى لغة ترميز النص الفائق +translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary" dir="rtl">أحد الأهداف الرئيسية للغة ترميز النص الفائق هي هيكلة النصوص وإعطائها هدف ووظيفة (كما تُعرف هذه الوظيفة ب {{glossary("semantics")}}) حتّى يتمكن المتصفح بعرض النصوص بطريقة مناسبة. تشرح هذه المقالة الطريقة التي يُمكن استخدام هذه اللغة لهيكلة صفحة تتكون من نصوص، عن طريق إضافة عناوين وفقرات، ومؤكدات على الكلمات (حروف غامقة ومائلة، على سبيل المثال)، وإنشاء قوائم، وغيرها.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th dir="rtl" scope="row">المتطلبات:</th> + <td dir="rtl">معرف بسيطة بلغة ترميز النص الفائقة، كما هو مشروح في <a href="/ar/docs/Learn/HTML/Introduction_to_HTML/Getting_started">مقالة البدء مع اللغة</a>.</td> + </tr> + <tr> + <th dir="rtl" scope="row">الهدف:</th> + <td dir="rtl">تعلم كيفية ترميز صفحة بسيطة مؤلفة من نصوص لإعطائها هيكلية ووظيفة.</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="الأساسيات_العناوين_والفقرات">الأساسيات: العناوين والفقرات</h2> + +<p dir="rtl">تتألف معظم النصوص المُنظمة من عناوين وفقرات، بغض النظر عما إذا كنت تقرأ قصة، أو جريدة، أو كتاب جامعي، أو مجلة ... إلخ.</p> + +<p><img alt="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs." src="https://mdn.mozillademos.org/files/12371/newspaper_small.jpg" style="display: block; margin: 0px auto;" title="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs."></p> + +<p dir="rtl">بحيث يجعل المحتوى المنظم القراءة أكثر سهولة ومتعة.</p> + +<p dir="rtl">في لغة ترميز النص الفائق، تحاط الفقرات بالعنصر {{htmlelement("p")}}، كالتالي:</p> + +<pre class="brush: html"><p>I am a paragraph, oh yes I am.</p></pre> + +<p dir="rtl">وتحاط العناوين بوسوم العنونة المخصصة:</p> + +<pre class="brush: html"><h1>I am the title of the story.</h1></pre> + +<p dir="rtl">يوجد ست عناوين متدرجة المستويات، وهي {{htmlelement("h1")}}، و {{htmlelement("h2")}}، و {{htmlelement("h3")}}، و {{htmlelement("h4")}}، و {{htmlelement("h5")}}، و {{htmlelement("h6")}}. يمثل الوسم <code><h1></code> العنوان الرئيسي، بينما يمثل الوسم <code><h2></code> عنوان فرعي، والوسم <code><h3></code> عنوان فرعي للعنوان الفرعي الأول، وهكذا.</p> + +<h3 dir="rtl" id="تنفيذ_التسلسل_الهيكلي">تنفيذ التسلسل الهيكلي</h3> + +<p dir="rtl">على سبيل المثال، في قصة ما، سيمثل الوسم <code><h1></code> عنوان القصة، والوسم <code><h2></code> سيمثل عنوان كل فصل، بينما سيمثل الوسم <code><h3></code> القسم الفرعي لكل فصل،وهلم جرا.</p> + +<pre class="brush: html"><h1>The Crushing Bore</h1> + +<p>By Chris Mills</p> + +<h2>Chapter 1: The dark night</h2> + +<p>It was a dark night. Somewhere, an owl hooted. The rain lashed down on the ...</p> + +<h2>Chapter 2: The eternal silence</h2> + +<p>Our protagonist could not so much as a whisper out of the shadowy figure ...</p> + +<h3>The specter speaks</h3> + +<p>Several more hours had passed, when all of a sudden the specter sat bolt upright and exclaimed, "Please have mercy on my soul!"</p></pre> + +<p dir="rtl">فتحديد وظيفة بعض العناصر يعود لك، طالما أنك تستخدم تسلسل منطقي. ولكنك تحتاج إلى أن تضع بالإعتبار بعض الأمور عندما تقوم بتنظيم محتوى مشابه:</p> + +<ul dir="rtl"> + <li>من الأفضل أن تستخدم والوسم <code><h1></code> مرة واحدة في كل صفحة، حيث يعد يمثل هذا الوسم أعلى مستويات العنونة، وبقية العناوين تتوضع أسفله بشكل تسلسلي.</li> + <li>تأكد أنك تستخدم العناوين بترتيبها التسلسلي الصحيح. أي لا تستخدم الوسم <code><h3></code> لتمثيل عنوان فرعي، وتستخدم بعده الوسم <code><h2></code> لتمثيل عنوان فرعي من درجة ثانية، فهذا لا يبدو منطقياً، كما يؤدي إلى نتائج غريبة!</li> + <li>من الست درجات عنونة المتاحة، حاول ألاَّ تستخدم أكثر من ثلاثة في كل صفحة، مالم يكن هذا ضرورياً.<span id="result_box" lang="ar"><span> حيث أنَّ المستندات ذات المستويات المتعددة (أي تسلسل هرمي عميق) تصبح غير عملية وصعبة التنقل.</span> <span>في مثل هذه الحالات، من المستحسن نشر المحتوى على صفحات متعددة إذا كان ذلك ممكناً.</span></span></li> +</ul> + +<h3 dir="rtl" id="لماذا_نحتاج_الهيكلة_(التنظيم)؟">لماذا نحتاج الهيكلة (التنظيم)؟</h3> + +<p dir="rtl">للإجابة على هذا السؤال، دعنا نأخذ على الملف <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a>، يعتبر هذا الملف نقطة البداية لمثالنا في هذه المقالة (وهي وصفحة حمص جميلة). يجب عليك حفظ نسخة من هذا الملف على جهازك، فستحتاجه في تمارين لاحقة. تحتوي جسم الوثيقة على عدة أجزاء من المحتوى، وهي غير مُرمَزِة بأي شكل، ولكنهم مفصولين بسطور.</p> + +<p dir="rtl">بكل الأحوال، عندما ستفتح هذه الوثيقة في متصفحك، سترى أنَّ النص سيظهر كقطعة كبيرة!</p> + +<p><img alt="A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it." src="https://mdn.mozillademos.org/files/14827/Screen%20Shot%202017-03-29%20at%2009.20.35.png" style="display: block; height: 377px; margin: 0px auto; width: 600px;" title="A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it."></p> + +<p dir="rtl">يرجع هذا لعدم وجود عناصر لتنظم المحتوى، ولذلك لم يتمكن المتصفح بمعرفة أي جزء هو عنوان وأي جزء هو فقرة. المزيد:</p> + +<ul dir="rtl"> + <li>يميل المستخدمون لتصفح صفحات الويب بسرعة شديدة لإيجاد محتوى متعلق، فغالباً ما يقومون بقراءة العناوين كبداية (<a href="http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/">المستخدمون عادةً ما يقضون وقت قصير جداً في صفحة الويب</a>). فإذا لم يجدوا شيء مفيد خلال بضعة ثواني، فسوف يشعرون بالملل ويقومون بالذهاب إلى مكان آخر.</li> + <li><span id="result_box" lang="ar"><span>تعتبر محركات البحث التي تفهرس محتويات صفحتك العناوين كلمات رئيسية مهمة التأثير على ترتيب الصفحة عند البحث.</span> <span>وبدون العناوين، ستؤدي صفحتك بشكل سيء من حيث </span></span>{{glossary("SEO")}}<span lang="ar"><span> (تحسين محركات البحث).</span></span></li> + <li>غالباً لا يقوم المعاق بصرياً بقراءة صفحات الويب، حيث يقوم بالإستماع لها بدلاً من ذلك. يتم ذلك باستخدم برمجية تسمى بقارئ الشاشة. توفر هذه البرمجية طرق للوصول السريع للنص المُعطى. فمن بين العديد من الأساليب المستخدمة، توفر هذه البرمجية طريقة للحصول على خلاصة المستند من خلال قراءة العناوين، مما يسمح للمستخدمين بالحصول على المعلومات التي يريدونها بسرعة. فإذا كانت العناوين غير متوفرة، سيضطر هؤلاء للسماع للمستند بأكمله.</li> + <li dir="ltr">To style content with {{glossary("CSS")}}, or make it do interesting things with {{glossary("JavaScript")}}, you need to have elements wrapping the relevant content, so CSS/JavaScript can effectively target it.</li> +</ul> + +<p>We therefore need to give our content structural markup.</p> + +<h3 id="Active_learning_Giving_our_content_structure">Active learning: Giving our content structure</h3> + +<p>Let's jump straight in with a live example. In the example below, add elements to the raw text in the <em>Input</em> field so that it appears as a heading and two paragraphs in the <em>Output</em> field.</p> + +<p>If you make a mistake, you can always reset it using the <em>Reset</em> button. If you get stuck, press the <em>Show solution</em> button to see the answer.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><h2>Input</h2> +<textarea id="code" class="input">My short story + +I am a policewoman and my name is Trish. + +My legs are made of cardboard and I am married to a fish.</textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Show solution" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light', Helvetica, Arial, sans-serif; +} + +.input, .output { + width: 90%; + height: 8em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { +textarea.value = '<h1>My short story</h1>\n<p>I am a policewoman and my name is Trish.</p>\n<p>My legs are made of cardboard and I am married to a fish.</p>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 500) }}</p> + +<h3 id="Why_do_we_need_semantics">Why do we need semantics?</h3> + +<p>Semantics are relied on everywhere around us — we rely on previous experience to tell us what the function of everyday objects is; when we see something, we know what its function will be. So, for example, we expect a red traffic light to mean "stop", and a green traffic light to mean "go". Things can get tricky very quickly if the wrong semantics are applied (do any countries use red to mean "go"? I hope not.)</p> + +<p>In a similar vein, we need to make sure we are using the correct elements, giving our content the correct meaning, function, or appearance. In this context the {{htmlelement("h1")}} element is also a semantic element, which gives the text it wraps around the role (or meaning) of "a top level heading on your page."</p> + +<pre class="brush: html"><h1>This is a top level heading</h1></pre> + +<p>By default, the browser will give it a large font size to make it look like a heading (although you could style it to look like anything you wanted using CSS). More importantly, its semantic value will be used in multiple ways, for example by search engines and screen readers (as mentioned above.)</p> + +<p>On the other hand, you could make any element <em>look</em> like a top level heading. Consider the following:</p> + +<pre class="brush: html"><span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span></pre> + +<p>This is a {{htmlelement("span")}} element. It has no semantics. You use it to wrap content when you want to apply CSS to it (or do something to it with JavaScript) without giving it any extra meaning (You'll find out more about these later on in the course.) We've applied some CSS to it to make it look like a top level heading, but since it has no semantic value, it will not get any of the extra benefits described above. It is a good idea to use the relevant HTML element for the job.</p> + +<h2 id="Lists">Lists</h2> + +<p>Now let's turn our attention to lists. Lists are everywhere in life — from your shopping list to the list of directions you subconsciously follow to get to your house every day, to the lists of instructions you are following in these tutorials! Lists are everywhere on the Web too, and we've got three different types to worry about.</p> + +<h3 id="Unordered">Unordered</h3> + +<p>Unordered lists are used to mark up lists of items for which the order of the items doesn't matter — let's take a shopping list as an example.</p> + +<pre>milk +eggs +bread +hummus</pre> + +<p>Every unordered list starts off with a {{htmlelement("ul")}} element — this wraps around all the list items:</p> + +<pre class="brush: html"><ul> +milk +eggs +bread +hummus +</ul></pre> + +<p>The last step is to wrap each list item in a {{htmlelement("li")}} (list item) element:</p> + +<pre class="brush: html"><ul> + <li>milk</li> + <li>eggs</li> + <li>bread</li> + <li>hummus</li> +</ul></pre> + +<h4 id="Active_learning_Marking_up_an_unordered_list">Active learning: Marking up an unordered list</h4> + +<p>Try editing the live sample below to create your very own HTML unordered list.</p> + +<div class="hidden"> +<h6 id="Playable_code_2">Playable code</h6> + +<pre class="brush: html"><h2>Input</h2> +<textarea id="code" class="input">milk +eggs +bread +hummus</textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Show solution" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light', Helvetica, Arial, sans-serif; +} + +.input, .output { + width: 90%; + height: 6em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { +textarea.value = '<ul>\n<li>milk</li>\n<li>eggs</li>\n<li>bread</li>\n<li>hummus</li>\n</ul>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_2', 700, 400) }}</p> + +<h3 id="Ordered">Ordered</h3> + +<p>Ordered lists are lists in which the order of the items <em>does</em> matter — let's take a set of directions as an example:</p> + +<pre>Drive to the end of the road +Turn right +Go straight across the first two roundabouts +Turn left at the third roundabout +The school is on your right, 300 meters up the road</pre> + +<p>The markup structure is the same as for unordered lists, except that you have to wrap the list items in an {{htmlelement("ol")}} element, rather than <code><ul></code>:</p> + +<pre class="brush: html"><ol> + <li>Drive to the end of the road</li> + <li>Turn right</li> + <li>Go straight across the first two roundabouts</li> + <li>Turn left at the third roundabout</li> + <li>The school is on your right, 300 meters up the road</li> +</ol></pre> + +<h4 id="Active_learning_Marking_up_an_ordered_list">Active learning: Marking up an ordered list</h4> + +<p>Try editing the live sample below to create your very own HTML ordered list.</p> + +<div class="hidden"> +<h6 id="Playable_code_3">Playable code</h6> + +<pre class="brush: html"><h2>Input</h2> +<textarea id="code" class="input">Drive to the end of the road +Turn right +Go straight across the first two roundabouts +Turn left at the third roundabout +The school is on your right, 300 meters up the road</textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Show solution" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light', Helvetica, Arial, sans-serif; +} + +.input, .output { + width: 90%; + height: 8em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { +textarea.value = '<ol>\n<li>Drive to the end of the road</li>\n<li>Turn right</li>\n<li>Go straight across the first two roundabouts</li>\n<li>Turn left at the third roundabout</li>\n<li>The school is on your right, 300 meters up the road</li>\n</ol>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_3', 700, 500) }}</p> + +<h3 id="Active_learning_Marking_up_our_recipe_page">Active learning: Marking up our recipe page</h3> + +<p>So at this point in the article, you have all the information you need to mark up our recipe page example. You can choose to either save a local copy of our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a> starting file and do the work there, or do it in the editable example below. Doing it locally will probably be better, as then you'll get to save the work you are doing, whereas if you fill it in to the editable example, it will be lost the next time you open the page. Both have pros and cons.</p> + +<div class="hidden"> +<h6 id="Playable_code_4">Playable code</h6> + +<pre class="brush: html"><h2>Input</h2> +<textarea id="code" class="input">Quick hummus recipe + + This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years. + + Hummus is a delicious thick paste used heavily in Greek and Middle Eastern dishes. It is very tasty with salad, grilled meats and pitta breads. + + Ingredients + + 1 can (400g) of chick peas (garbanzo beans) + 175g of tahini + 6 sundried tomatoes + Half a red pepper + A pinch of cayenne pepper + 1 clove of garlic + A dash of olive oil + + Instructions + + Remove the skin from the garlic, and chop coarsely + Remove all the seeds and stalk from the pepper, and chop coarsely + Add all the ingredients into a food processor + Process all the ingredients into a paste. + If you want a coarse "chunky" hummus, process it for a short time + If you want a smooth hummus, process it for a longer time + + For a different flavour, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese. Experiment and see what works for you. + + Storage + + Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you've made it. If it starts to become fizzy, you should definitely discard it. + + Hummus is suitable for freezing; you should thaw it and use it within a couple of months.</textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Show solution" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light', Helvetica, Arial, sans-serif; +} + +.input, .output { + width: 90%; + height: 8em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { + textarea.value = '<h1>Quick hummous recipe</h1>\n\n<p>This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years.</p>\n\n<p>Hummus is a delicious thick paste used heavily in Greek and Middle Eastern dishes. It is very tasty with salad, grilled meats and pitta breads.</p>\n\n<h2>Ingredients</h2>\n\n<ul>\n<li>1 can (400g) of chick peas (garbanzo beans)</li>\n<li>175g of tahini</li>\n<li>6 sundried tomatoes</li>\n<li>Half a red pepper</li>\n<li>A pinch of cayenne pepper</li>\n<li>1 clove of garlic</li>\n<li>A dash of olive oil</li>\n</ul>\n\n<h2>Instructions</h2>\n\n<ol>\n<li>Remove the skin from the garlic, and chop coarsely.</li>\n<li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>\n<li>Add all the ingredients into a food processor.</li>\n<li>Process all the ingredients into a paste.</li>\n<li>If you want a coarse "chunky" hummus, process it for a short time.</li>\n<li>If you want a smooth hummus, process it for a longer time.</li>\n</ol>\n\n<p>For a different flavour, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese. Experiment and see what works for you.</p>\n\n<h2>Storage</h2>\n\n<p>Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you\'ve made it. If it starts to become fizzy, you should definitely discard it.</p>\n\n<p>Hummus is suitable for freezing; you should thaw it and use it within a couple of months.</p>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); + +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_4', 700, 500) }}</p> + +<p>If you get stuck, you can always press the <em>Show solution</em> button, or check out our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-complete.html">text-complete.html</a> example on our github repo.</p> + +<h3 id="Nesting_lists">Nesting lists</h3> + +<p>It is perfectly ok to nest one list inside another one. You might want to have some sub-bullets sitting below a top level bullet. Let's take the second list from our recipe example:</p> + +<pre class="brush: html"><ol> + <li>Remove the skin from the garlic, and chop coarsely.</li> + <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li> + <li>Add all the ingredients into a food processor.</li> + <li>Process all the ingredients into a paste.</li> + <li>If you want a coarse "chunky" hummus, process it for a short time.</li> + <li>If you want a smooth hummus, process it for a longer time.</li> +</ol></pre> + +<p>Since the last two bullets are very closely related to the one before them (they read like sub-instructions or choices that fit below that bullet), it might make sense to nest them inside their own unordered list, and put that list inside the current fourth bullet. This would look like so:</p> + +<pre class="brush: html"><ol> + <li>Remove the skin from the garlic, and chop coarsely.</li> + <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li> + <li>Add all the ingredients into a food processor.</li> + <li>Process all the ingredients into a paste. + <ul> + <li>If you want a coarse "chunky" hummus, process it for a short time.</li> + <li>If you want a smooth hummus, process it for a longer time.</li> + </ul> + </li> +</ol></pre> + +<p>Try going back to the previous active learning example and updating the second list like this.</p> + +<h2 id="Emphasis_and_importance">Emphasis and importance</h2> + +<p>In human language, we often emphasise certain words to alter the meaning of a sentence, and we often want to mark certain words as important or different in some way. HTML provides various semantic elements to allow us to mark up textual content with such effects, and in this section, we'll look at a few of the most common ones.</p> + +<h3 id="Emphasis">Emphasis</h3> + +<p>When we want to add emphasis in spoken language, we <em>stress</em> certain words, subtly altering the meaning of what we are saying. Similarly, in written language we tend to stress words by putting them in italics. For example, the following two sentences have different meanings.</p> + +<p>I am glad you weren't late.</p> + +<p>I am <em>glad</em> you weren't <em>late</em>.</p> + +<p>The first sentence sounds genuinely relieved that the person wasn't late. In contrast, the second one sounds sarcastic or passive-aggressive, expressing annoyance that the person arrived a bit late.</p> + +<p>In HTML we use the {{htmlelement("em")}} (emphasis) element to mark up such instances. As well as making the document more interesting to read, these are recognised by screen readers and spoken out in a different tone of voice. Browsers style this as italic by default, but you shouldn't use this tag purely to get italic styling. To do that, you'd use a {{htmlelement("span")}} element and some CSS, or perhaps an {{htmlelement("i")}} element (see below.)</p> + +<pre class="brush: html"><p>I am <em>glad</em> you weren't <em>late</em>.</p></pre> + +<h3 id="Strong_importance">Strong importance</h3> + +<p>To emphasize important words, we tend to stress them in spoken language and <strong>bold</strong> them in written language. For example:</p> + +<p>This liquid is <strong>highly toxic</strong>.</p> + +<p>I am counting on you. <strong>Do not</strong> be late!</p> + +<p>In HTML we use the {{htmlelement("strong")}} (strong importance) element to mark up such instances. As well as making the document more useful, again these are recognized by screen readers and spoken in a different tone of voice. Browsers style this as bold text by default, but you shouldn't use this tag purely to get bold styling. To do that, you'd use a {{htmlelement("span")}} element and some CSS, or perhaps a {{htmlelement("b")}} element (see below.)</p> + +<pre class="brush: html"><p>This liquid is <strong>highly toxic</strong>.</p> + +<p>I am counting on you. <strong>Do not</strong> be late!</p></pre> + +<p>You can nest strong and emphasis inside one another if desired:</p> + +<pre class="brush: html"><p>This liquid is <strong>highly toxic</strong> — +if you drink it, <strong>you may <em>die</em></strong>.</p></pre> + +<h3 id="Active_learning_Let's_be_important!">Active learning: Let's be important!</h3> + +<p>In this active learning section, we have provided an editable example. Inside it, we'd like you to try adding emphasis and strong importance to the words you think need them, just to have some practice.</p> + +<div class="hidden"> +<h6 id="Playable_code_5">Playable code</h6> + +<pre class="brush: html"><h2>Input</h2> +<textarea id="code" class="input"><h1>Important notice</h1> + +<p>On Sunday January 9th 2010, a gang of goths were +spotted stealing several garden gnomes from a shopping +center in downtown Milwaukee. They were all wearing green +jumpsuits and silly hats, and seemed to be having a whale +of a time. If anyone has any information about this +incident, please contact the police now.</p></textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Show suggestion" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light', Helvetica, Arial, sans-serif; +} + +.input, .output { + width: 90%; + height: 8em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { + textarea.value = '<h1>Important notice</h1>\n<p>On <strong>Sunday January 9th 2010</strong>, a gang of <em>goths</em> were spotted stealing <strong><em>several</em> garden gnomes</strong> from a shopping center in downtown <strong>Milwaukee</strong>. They were all wearing <em>green jumpsuits</em> and <em>silly hats</em>, and seemed to be having a whale of a time. If anyone has <strong>any</strong> information about this incident, please contact the police <strong>now</strong>.</p>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_5', 700, 500) }}</p> + +<h3 id="Italic_bold_underline...">Italic, bold, underline...</h3> + +<p>The elements we've discussed so far have clearcut associated semantics. The situation with {{htmlelement("b")}}, {{htmlelement("i")}}, and {{htmlelement("u")}} is somewhat more complicated. They came about so people could write bold, italics, or underlined text in an era when CSS was still supported poorly or not at all. Elements like this, which only affect presentation and not semantics, are known as <strong>presentational elements</strong> and should no longer be used, because as we've seen before, semantics is so important to accessibility, SEO, etc.</p> + +<p>HTML5 redefined <code><b></code>, <code><i></code> and <code><u></code> with new, somewhat confusing, semantic roles.</p> + +<p>Here's the best rule of thumb: it's likely appropriate to use <code><b></code>, <code><i></code>, or <code><u></code> to convey a meaning traditionally conveyed with bold, italics, or underline, provided there is no more suitable element. However, it always remains critical to keep an accessibility mindset. The concept of italics isn't very helpful to people using screen readers, or to people using a writing system other than the Latin alphabet.</p> + +<ul> + <li>{{HTMLElement('i')}} is used to convey a meaning traditionally conveyed by italic: Foreign words, taxonomic designation, technical terms, a thought...</li> + <li>{{HTMLElement('b')}} is used to convey a meaning traditionally conveyed by bold: Key words, product names, lead sentence...</li> + <li>{{HTMLElement('u')}} is used to convey a meaning traditionally conveyed by underline: Proper name, misspelling...</li> +</ul> + +<div class="note"> +<p>A kind warning about underline: <strong>People strongly associate underlining with hyperlinks.</strong> Therefore, on the Web, it's best to underline only links. Use the <code><u></code> element when it's semantically appropriate, but consider using CSS to change the default underline to something more appropriate on the Web. The example below illustrates how it can be done.</p> +</div> + +<pre class="brush: html"><!-- scientific names --> +<p> + The Ruby-throated Hummingbird (<i>Archilochus colubris</i>) + is the most common hummingbird in Eastern North America. +</p> + +<!-- foreign words --> +<p> + The menu was a sea of exotic words like <i lang="uk-latn">vatrushka</i>, + <i lang="id">nasi goreng</i> and <i lang="fr">soupe à l'oignon</i>. +</p> + +<!-- a known misspelling --> +<p> + Someday I'll learn how to <u>spel</u> better. +</p> + +<!-- Highlight keywords in a set of instructions --> +<ol> + <li> + <b>Slice</b> two pieces of bread off the loaf. + </li> + <li> + <b>Insert</b> a tomato slice and a leaf of + lettuce between the slices of bread. + </li> +</ol></pre> + +<h2 id="Summary">Summary</h2> + +<p>That's it for now! This article should have given you a good idea of how to start marking up text in HTML, and introduced you to some of the most important elements in this area. There are a lot more semantic elements to cover in this area, and we'll look at a lot more in our 'More Semantic Elements' article, later on in the course. In the next article, we'll be looking in detail at how to <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">create hyperlinks</a>, possibly the most important element on the Web.</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</p> + +<p> </p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li> +</ul> + +<p> </p> diff --git a/files/ar/learn/html/introduction_to_html/index.html b/files/ar/learn/html/introduction_to_html/index.html new file mode 100644 index 0000000000..f237220f27 --- /dev/null +++ b/files/ar/learn/html/introduction_to_html/index.html @@ -0,0 +1,61 @@ +--- +title: مقدمة إلى HTML +slug: Learn/HTML/Introduction_to_HTML +tags: + - HTML + - صفحة هبوط + - لغة ترميز النص الفائق +translation_of: Learn/HTML/Introduction_to_HTML +--- +<div>{{LearnSidebar}}</div> + +<p class="summary" dir="rtl">تعد لغة ترميز النص الفائق (HTML) لغة بسيطة جداً في صميمها، فهي مكوِّنة من عناصر يمكن تطبيقها على أجزاء من النص لإعطائها شكل أو وصف مختلف في الوثيقة (هل هذا النص فقرة؟ قائمة نقطية؟ هل هو جزء من جدول؟)، وتقوم بهيكلة الوثيقة إلى أقسام مُقسمة منطقياً (هل تملك تلك الصفحة رأس؟ ثلاث أعمدة من المحتوى؟ قائمة؟)، وتقوم بتضمين محتوى مثل الصور والفيديوهات في الصفحة. هذا القسم سوف يقدم لك أول وظيفتين سلف ذكرهما، كما سيغطي المفاهيم الأساسية والبنيّة الكتابيّة (syntax) التي تحتاج معرفتها لفهم اللغة.</p> + +<h2 dir="rtl" id="المتطلبات">المتطلبات</h2> + +<p dir="rtl">لا تحتاج لأي معرفة مسبقة في لغة ترميز النص الفائق للبدء في هذه الوحدة، ولكن يجب على الأقل أن تملك معرفة مبدئيّة حول استخدام الحواسيب، واستخدام متصفح الويب بشكل سلبي (بمعنى أخر، النظر إليه والتعامل مع المحتوى). يجب أن تملك بيئة عمل مُعدِة كما شُرِح في مقالة <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">تثبيت البرمجيات الأساسية</a>، ويجب أن يكون لديك معرفة بكيفيّة إنشاء وإدارة الملفات، كما شُرِح في مقالة <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">التعامل مع الملفات</a>. كلا المقالتين السابقتين جزء من وحدة <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">البدء مع الويب</a> المخصصة للمبتدئين.</p> + +<div class="note"> +<p dir="rtl"><strong>ملاحظة</strong>: إن كنت تعمل على حاسوب، جهاز لوحي، أو شيء آخر ولا تملك القدرة على إنشاء ملفات، يمكنك تجربة (معظم) الأمثلة هنا باستخدام محرر شيفرات برمجيّة على الأنترنت مثل <a href="http://jsbin.com/">JSBin</a> أو <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 dir="rtl" id="مقالات_تعليميّة">مقالات تعليميّة</h2> + +<p dir="rtl">تحتوي هذه الوحدة على المقالات التالية، والتي ستتكلم عن جميع المواضيع الأساسيّة في هذه اللغة وستعطيك فرصة لتختبر بعض المهارات.</p> + +<dl> + <dt dir="rtl"><a href="/ar/docs/Learn/HTML/Introduction_to_HTML/Getting_started">البدء مع لغة ترميز النص الفائق</a></dt> + <dd dir="rtl">تغطي هذه المقالة أساسيات لغة ترميز النص الفائق، لقد شرحنا هنا العناصر، السمات، وجميع المصطلحات المهمة الأخرى التي قد سمعت عنها، وقد قمنا بشرحها بطريقة ملائمة. لقد قمنا أيضاً بشرح كيفيّة هيكلة (إنشاء) عنصر في اللغة، وكيف يتم استخدام اللغة لهيكلة صفحة قياسيّة، وقمنا بشرح مزايا اللغة الأخرى الأساسيّة. سوف نستخدم أيضاً خلال الشرح بعض الأمثلة لنخلق بعضاً من الإثارة!</dd> + <dt dir="rtl"><a href="/ar/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">ماذا يوجد في رأس الصفحة؟ البيانات الوصفية في لغة ترميز النص الفائق</a></dt> + <dd dir="rtl">رأس وثيقة لغة ترميز النص الفائق هو الجزء الذي <strong>لا</strong> يظهر في متصفح الويب عندما يتم تحميل الصفحة. يحتوي رأس الوثيقة على معلومات مثل عنوان الصفحة، وروابط ملفات صفحات الأنماط الانسيابية (إذا أردت أنْ تُنسِق محتوى وثيقتك باستخدام هذه اللغة)، وروابط لأيقونات المُفضلة (favicons)، والبيانات الوصفيّة (هي معلومات حول الوثيقة، مثل من كَتَبها، وكلمات مفتاحيّة مهمة تصفها).</dd> + <dt dir="rtl"><a href="/ar/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">أساسيات النصوص في لغة ترميز النص الفائق</a></dt> + <dd dir="rtl">إحدى الوظائف الرئيسيّة للغة ترميز النص الفائق هي وصف النصوص (إعطائها معنىً ودلالة)؛ حتّى يستطيع المتصفح أن يعلم كيف سيعرضها بشكل صحيح. هذه المقالة تقوم بعرض كيف يمكنك استخدام هذه اللغة لتقطيع النص إلى هياكل من العناوين والفقرات، وتعليم الكلمات على أنَّها مهمة، وإنشاء قوائم، والكثير من الأمور الأخرى.</dd> + <dt dir="rtl"><a href="/ar/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">إنشاء الوصلات</a></dt> + <dd dir="rtl">الوصلات مهمة جداً، فهي التي تجعل الويب ويباً. هذه المقالة تشرح طريقة إنشاء وصلات، وتناقش الطرق المثلى لاستخدامها.</dd> + <dt dir="rtl"><a href="/ar/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">تنسيق النصوص بشكل متقدم</a></dt> + <dd dir="rtl">يوجد العديد من العناصر الأخرى في لغة ترميز النص الفائق لتنسيق النصوص، والتي لم نتكلم عنها في مقالة<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals"> أساسيات النصوص في لغة ترميز النص الفائق</a>. العناصر المشروحة في هذه المقالة قليل الاستخدام، ولكن من الجيد معرفتها. في هذه المقالة ستتعلم التعامل مع<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals"> </a>الاقتباسات، القوائم الوصفيّة، الشيفرات البرمجيّة، كتابة كلمات علويّة وسفليّة (مثل التربيع عندما يكتب على عدد بالشكل 2<sup>2</sup>)، معلومات الاتصال، والمزيد من الأمور.</dd> + <dt dir="rtl"><a href="/ar/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">هيكليّة الوثيقة والموقع</a></dt> + <dd dir="rtl">كما يتم تعريف الأجزاء الفرديّة من صفحتك (مثل الفقرة والصورة)، تُستخدَم لغة ترميز النص الفائق أيضاً لتعريف أقسام موقعك (مثل الرأس، الشريط، وأعمدة المحتوى الرئيسي). هذه المقالة تشرح كيفيّة تخطيط الهيكل الأساسي للموقع، وكيفيّة استخدام اللغة لتمثيل ذلك الهيكل.</dd> + <dt dir="rtl"><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">تنقيح شيفرة لغة ترميز النص الفائق</a></dt> + <dd dir="rtl">كتابة وثيقة بلغة ترميز النص الفائق أمر سهل، ولكن ماذا إن حدث خطأ ما، ولم تستطع معرفة مكان ذلك الخطأ؟ هذه المقالة ستقدم لك بعض الأدوات التي ستساعدك على حل المشاكل المشابهة.</dd> +</dl> + +<h2 dir="rtl" id="اختبارات">اختبارات</h2> + +<p dir="rtl">الاختبارات (التقييمات) التالية ستختبر فهمك لأساسيات اللغة المُغطاة في المقالات أعلاه.</p> + +<dl> + <dt dir="rtl"><a href="/ar/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">تنسيق رسالة</a></dt> + <dd dir="rtl">سوف تتعلم كتابة رسالة عاجلاً أم آجلاً. إنه لمن المثال المفيد لتجربة مهاراتنا في تنسيق النصوص! لذلك هذا الاختبار سوف يعطيك رسالة لتقوم بتنسيقها.</dd> + <dt dir="rtl"><a href="/ar/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">هيكلة محتوى الصفحة</a></dt> + <dd dir="rtl">هذا الاختبار سوف يختبر قدراتك على استخدام لغة ترميز النص الفائق لهيكلة محتوى صفحة بسيطة، تحتوي على رأس، ذيل، شريط، محتوى رئيسي، وشريط جانبي.</dd> +</dl> + +<h2 dir="rtl" id="طالِع_أيضاً">طالِع أيضاً</h2> + +<dl> + <dt dir="rtl"><a href="https://teach.mozilla.org/activities/web-lit-basics/">أساسيات محو أمية ويب</a></dt> + <dd dir="rtl">درس ممتاز من شركة موزيلا يقوم باستكشاف واختبار الكثير من المهارات التي تحدثنا عنها في وحدة <em>مقدمة </em>إلى HTML<em>.</em> المتعلمون سيحصلون على دراية في قراءة، كتابة، والمشاركة في الويب من خلال هذه الوحدة التي تتألف من ست أجزاء. اكتشف أساسيات الويب من خلال التعلم بطريقة إنتاجيّة وتعاونيّة.</dd> +</dl> + +<div id="eJOY__extension_root" style=""> </div> diff --git a/files/ar/learn/html/multimedia_and_embedding/index.html b/files/ar/learn/html/multimedia_and_embedding/index.html new file mode 100644 index 0000000000..d66696d111 --- /dev/null +++ b/files/ar/learn/html/multimedia_and_embedding/index.html @@ -0,0 +1,79 @@ +--- +title: الوسائط المتعددة والتضمين +slug: Learn/HTML/Multimedia_and_embedding +tags: + - Assessment + - Audio + - Beginner + - CodingScripting + - Embedding + - Flash + - Guide + - HTML + - Images + - Landing + - Learn + - Multimedia + - NeedsTranslation + - SVG + - TopicStub + - Video + - Web + - iframes + - imagemaps + - img + - responsive +translation_of: Learn/HTML/Multimedia_and_embedding +--- +<p>{{LearnSidebar}}</p> + +<p class="summary">لقد نظرنا في الكثير من النصوص حتى الآن في هذه الدورة ، ولكن الويب سيكون مملاً حقًا فقط باستخدام النص. دعونا نبدأ في النظر في كيفية جعل الويب ينبض بالحياة بمحتوى أكثر إثارة للاهتمام! تستكشف هذه الوحدة كيفية استخدام HTML لتضمين الوسائط المتعددة في صفحات الويب الخاصة بك ، بما في ذلك الطرق المختلفة التي يمكن تضمين الصور بها ، وكيفية تضمين الفيديو والصوت وحتى صفحات الويب بالكامل.</p> + +<h2 id="المتطلبات_الأساسية">المتطلبات الأساسية</h2> + +<p>قبل بدء هذه الوحدة ، يجب أن يكون لديك معرفة معقولة بأساسيات HTML ، كما هو موضح سابقًا في <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML"> مقدمة عن HTML </a> . إذا لم تعمل من خلال هذه الوحدة (أو شيء مماثل) ، فقم بالعمل عليها أولاً ، ثم ارجع!</p> + +<div class="note"> +<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="https://jsbin.com/">JSBin</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="ادله">ادله</h2> + +<p>تحتوي هذه الوحدة على المقالات التالية التي ستأخذك من خلال جميع أساسيات تضمين الوسائط المتعددة على صفحات الويب.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a></dt> + <dd> + <p dir="rtl"><strong id="docs-internal-guid-ff3bcadf-7fff-b32d-5d13-2fc8e5fb67b7">هناك أنواع أخرى من الوسائط المتعددة للنظر، ولكن من المنطقي أن تبدأ مع المتواضع {{htmlelement ("img"}} عنصر يستخدم لتضمين صورة بسيطة في صفحة ويب. في هذه المقالة سننظر في كيفية استخدامه بمزيد من العمق ، بما في ذلك الأساسيات ، والتعليق عليه مع التسميات التوضيحية باستخدام {{htmlelement ("figure"}}، وكيفية ارتباطه بصور خلفية CSS.</strong></p> + </dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a></dt> + <dd> + <p dir="rtl"><strong id="docs-internal-guid-2ddd584f-7fff-2ed9-3c17-7e4b1b33ccdb">بعد ذلك، سننظر في كيفية استخدام عناصر {{(HTML5 {{htmlelement ("video"}}} و{{(htmlelement ("audio"}} لتضمين الفيديو والصوت على صفحاتنا، بما في ذلك الأساسيات، وتوفير الوصول إلى تنسيقات ملفات مختلفة إلى متصفحات مختلفة، وإضافة التسميات التوضيحية والترجمة، وكيفية إضافة نسخ احتياطية للمتصفحات القديمة.</strong></p> + </dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From <object> to <iframe> — other embedding technologies</a></dt> + <dd>عند هذه النقطة نود أن تأخذ إلى حد ما من خطوة جانبية، والنظر في اثنين من العناصر التي تسمح لك لتضمين مجموعة واسعة من أنواع المحتوى في صفحات الويب الخاصة بك: {{htmlelement ("iframe"}}، {{htmlelement ("embed"}} و {{htmlelement ("object"}}. <iframe> هي لتضمين صفحات ويب أخرى ، والاثنان الآخران يسمحان لك بتضمين ملفات PDF و SVG وحتى Flash - وهي تقنية في طريقها للخروج ، ولكن قد لا تزال تراها بشكل شبه منتظم.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adding vector graphics to the web</a></dt> + <dd>يمكن أن تكون الرسومات المتجهة مفيدة للغاية في بعض الحالات. على عكس التنسيقات العادية مثل PNG /JPG ، فإنها لا تشوه / أو تتبكسل عند التكبير - يمكن أن تظل سلسة عند تحجيمها. تعرّفك هذه المقالة على تنسيق {{glossary ("SVG"}} في صفحات الويب.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></dt> + <dd>مع هذا العدد الكبير من أنواع الأجهزة المختلفة القادرة الآن على تصفح الويب - من الهواتف المحمولة إلى أجهزة الكمبيوتر المكتبية - فإن المفهوم الأساسي للإتقان في عالم الويب الحديث هو التصميم المتجاوب. يشير هذا إلى إنشاء صفحات ويب يمكنها تغيير ميزاتها تلقائيًا لتناسب أحجام الشاشة المختلفة والدقة وما إلى ذلك. سيتم النظر في هذا بمزيد من التفصيل في وحدة CSS في وقت لاحق ، ولكن في الوقت الحالي ، سننظر في الأدوات التي يتوفر HTML لإنشاء صور سريعة الاستجابة ، بما في ذلك عنصر {{htmlelement ("picture"}}} .</dd> +</dl> + +<h2 id="Assessments">Assessments</h2> + +<p>The following assessments will test your understanding of the HTML basics covered in the guides above:</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a></dt> + <dd>In this assessment, we'll test your knowledge of some of the techniques discussed in this module's articles, getting you to add some images and video to a funky splash page all about Mozilla!</dd> +</dl> + +<h2 id="See_also">See also</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">Add a hitmap on top of an image</a></dt> + <dd>Image maps provide a mechanism to make different parts of an image link to different places. (Think of a map linking through to further information about each different country you click on.) This technique can sometimes be useful.</dd> + <dt><a href="https://teach.mozilla.org/activities/web-lit-basics-two/">Web literacy basics 2</a></dt> + <dd> + <p>An excellent Mozilla foundation course that explores and tests some of the skills talked about in this <em>Multimedia and embedding</em> module. Dive deeper into the basics of composing webpages, designing for accessibility, sharing resources, using online media, and working open (meaning that your content is freely available and shareable by others).</p> + </dd> +</dl> diff --git a/files/ar/learn/html/الجداول/index.html b/files/ar/learn/html/الجداول/index.html new file mode 100644 index 0000000000..380e837a80 --- /dev/null +++ b/files/ar/learn/html/الجداول/index.html @@ -0,0 +1,36 @@ +--- +title: جداول HTML +slug: Learn/HTML/الجداول +translation_of: Learn/HTML/Tables +--- +<div dir="rtl">{{LearnSidebar}}</div> + +<p class="summary" dir="rtl">تتمثل مهمة شائعة جدًا في HTML في هيكلة البيانات الجدولية ، ولديها عدد من العناصر والسمات لهذا الغرض فقط. إلى جانب القليل من CSS للتصميم ، يجعل HTML من السهل عرض جداول المعلومات على شبكة الإنترنت مثل خطة درس مدرستك أو الجدول الزمني في حمام السباحة المحلي الخاص بك أو إحصائيات حول الديناصورات المفضلة لديك أو فريق كرة القدم. تنقلك هذه الوحدة إلى كل ما تحتاج إلى معرفته حول هيكلة بيانات الجداول باستخدام HTML.</p> + +<h2 dir="rtl" id="المتطلبات_الأساسية">المتطلبات الأساسية</h2> + +<p dir="rtl">قبل بدء هذه الوحدة ، يجب أن تكون قد قمت بالفعل بتغطية أساسيات HTML - راجع <a href="https://developer.mozilla.org/ar/docs/Learn/HTML/Introduction_to_HTML">مقدمة إلى HTML</a>.</p> + +<div class="note" dir="rtl"> +<p><strong>ملاحظة</strong>: إذا كنت تعمل على جهاز كمبيوتر / جهاز لوحي / جهاز آخر حيث لا تملك القدرة على إنشاء ملفاتك الخاصة ، فيمكنك تجربة (أكثر من) أمثلة التعليمات البرمجية في برنامج الترميز عبر الإنترنت مثل <a href="http://jsbin.com/">JSBin</a> أو <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 dir="rtl" id="خطوط_إرشاد">خطوط إرشاد</h2> + +<p dir="rtl">تحتوي هذه الوحدة على المقالات التالية:</p> + +<dl> + <dt dir="rtl"><a href="/en-US/docs/Learn/HTML/Tables/Basics">أساسيات جدول HTML</a></dt> + <dd dir="rtl">تبدأ هذه المقالة في البدء بجداول HTML ، والتي تغطي الأساسيات ذاتها ، مثل الصفوف والخلايا ، والعناوين ، وخلايا تجعل الأعمدة والصفوف متعددة ، وكيفية تجميع كل الخلايا في عمود معًا لأغراض التصميم.</dd> + <dt dir="rtl"><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Advanced">الميزات المتقدمة لجداول HTML وسهولة الوصول إليها </a></dt> + <dd dir="rtl">في المقالة الثانية في هذه الوحدة ، نلقي نظرة على بعض الميزات المتقدمة لجداول HTML - مثل التسميات التوضيحية / الملخصات وتجميع صفوفك في أقسام رأس الجدول والجسم والتذييل - وكذلك النظر في إمكانية الوصول إلى الجداول للمستخدمين ذوي الإعاقات البصرية .</dd> +</dl> + +<h2 dir="rtl" id="تقييم">تقييم</h2> + +<dl> + <dt dir="rtl"><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Structuring_planet_data">هيكلة بيانات الكوكب </a></dt> + <dd dir="rtl">في تقييم الجدول الخاص بنا ، نوفر لك بعض البيانات حول الكواكب في نظامنا الشمسي ، ونجعلك تنظّمها في جدول HTML.</dd> +</dl> + +<div id="eJOY__extension_root"></div> diff --git a/files/ar/learn/html/بسيطة_html_إنشاء_صفحة/index.html b/files/ar/learn/html/بسيطة_html_إنشاء_صفحة/index.html new file mode 100644 index 0000000000..72d8216f43 --- /dev/null +++ b/files/ar/learn/html/بسيطة_html_إنشاء_صفحة/index.html @@ -0,0 +1,304 @@ +--- +title: إنشاء صفحة HTML بسيطة +slug: Learn/HTML/بسيطة_HTML_إنشاء_صفحة +tags: + - البداية +translation_of: Learn/Getting_started_with_the_web +--- +<div class="summary"> +<p>فى هذا المقال سوف تتعلم كيق تنشئ صفحة ويب بسيطة باستخدام {{Glossary("HTML")}}</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">المتطلبات الأساسية:</th> + <td>يجب ان يكون لديك <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">محرر نصوص</a> و أن تعلم كيف <a href="/en-US/docs/Learn/Open_a_file_in_a_browser">كيف تفتح ملف فى متصفح</a>.</td> + </tr> + <tr> + <th scope="row">الهدف:</th> + <td>إنشاء صفحة ويب يمكنك عرضها باستخدام متصفحك.</td> + </tr> + </tbody> +</table> + +<h2 id="الملخص">الملخص</h2> + +<p>أن أبسط صفحة ويب هى فقط ملف {{Glossary("HTML")}} . فقط ملف HTML صحيح واحد موجود على حاسبك و متصفح ويب هى كل ما تحتاجه. سوف نرى كبف كيف يمكن استخدام HTML {{Glossary("Tag","tags")}} و سوف تكون فادر على عرض الصفحة التى أنشأتها فى متصفحك.</p> + +<h2 id="التعلم_النشط">التعلم النشط</h2> + +<p>أول شئ؛ تأكد أنه يوجد لديك محرر نصوص تجيد استخدامه و متصفح ويب. على الأغلب أى محرر نصوص سوف يكون كافى؛ على سبيل المثال Notepad فى Windows أو TextEdit فى Mac ؛ ولكن تأكد أنك ستنشئ ملفات نصوص بسيطة (حروف فقط بدون تنسيق). إذا كنت تستخدم TextEdit فى Mac يمكنك اختيار "Make Plain Text" من قائمة "Format".</p> + +<h3 id="الخطوة_الأولى_ملف">الخطوة الأولى: ملف</h3> + +<p>صفحة الويب الواحدة تتكون (على الأقل) من ملف HTML ؛ لذلك سنبدأ بإنشاء واحد. قم بفتح محرر النصوص و قم بإنشاء ملف نصى ؛ ثم اكتب شئ مثل هذا:</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> +<head> + <title>Hi there</title> +</head> +<body> + This is a page + a simple page +</body> +</html></pre> + +<p>يمكنك تعديل هذا كما تشاء؛ أنت حر فى أن تضيف أو تغير النص بين وسمى <title></title> و <body></body>. تأكد أن تعطى الملف اسم ينتهى بالإضافة ".html" . على سبيل المثال يمكنك تسميتها "my_page.html".</p> + +<p>الآن لديك ملف على حاسبك ؛ من الممكن أن يكون شكله يشبه هذا (هذا يتوقف على نظام التشغيل الذى تستخدمه) :</p> + +<p><img alt="Screenshot of a file explorer with a html file for local test" src="https://mdn.mozillademos.org/files/8383/Capture%20du%202014-08-20%2021:20:25.png" style="height: 72px; width: 365px;"></p> + +<p>إذا قمت فقط بالضغط مرتين على هذا الملف سوف يُفتح فى متصفحك. إذا أردت فتحه فى محرر النصوص لتعديله قم بالضغط عليه بزر الفأرة الأيمن و اختر فتح الملف فى محرر النصوص. (أو قم بسحبه و إفلاته فى المحرر؛ أو قم بفتح الملف باختيار "open" من قائمة "File" فى المحرر.) ,حسب محررك الملف سوف يبدو مثل هذا:</p> + +<p><img alt="Screenshot of a file explorer with a html file for local test" src="https://mdn.mozillademos.org/files/8385/Capture%20du%202014-08-20%2021:24:06.png" style="height: 180px; width: 311px;"></p> + +<h3 id="الخطوة_الثانية_متصفح_ويب">الخطوة الثانية: متصفح ويب</h3> + +<p>داخل متصفح الملفات الخاص بك(مثل Explorer فى Windows؛ أو Finder فى Mac أو Files فى Ubuntu)، اعثر على الملف الذى أنشأته و قم بفتحه فى متصفحك (بالضغط عليه مرتين؛ أو سحبه و إفلاته على أيقونة المتصفح) الآن المتصفح يعرض النص من ملف HTML الذى أنشأته والتبويب يعرض عنوان الصفحة. هذا يجب أن يشبه هذا؛ حسب نظام تشغيلك و متصفحك:</p> + +<p><img alt="Screenshot of a file explorer with a html file for local test" src="https://mdn.mozillademos.org/files/8387/Capture%20du%202014-08-20%2021:28:22.png" style="border-style: solid; border-width: 1px; height: 111px; width: 513px;"></p> + +<p>يمكنك أن ترى محتوى جسم الصفحة (بين وسمى <body></body>)؛ و العنوان الذى اخترته (بين وسمى <title></title>) يظهر فى التبويب ولكن لا يوجد فاصل بين سطرى النص. شئ مثير للاهتمام.</p> + +<h3 id="الخطوة_الثالثة_التجربة_والتعلم">الخطوة الثالثة: التجربة والتعلم</h3> + +<p>جرب أن تحذف بعض أجزاء ملف HTML وشاهد ما يحدث. بعض الأخطاء لن تؤثر كثيرًا والصفحة ستظل قابلة للعرض فى المتصفح، البعض الاَخر سوف يسبب مشاكل واضحة للنتائج. هذا يحدث لأن المتصفحات تحاول أن تعوض عن بعض الأخطاء الشائعة.</p> + +<p> </p> + +<p>لشيء الذي يجب أن تلاحظه هو أن الشيء الوحيد الذي تراه معروضًا على الشاشة هو النص الذي ليس داخل أقواس الزاوية (والمعروف باسم الرموز الأكبر من وأقل من الرموز ، ولكننا نسميها أقواس معقوفة عند الحديث عن HTML). كل شيء داخل الأقواس الزاوية هو {{Glossary ("tag")}} ، والذي يمثل البنية أو الهيكل العظمي لصفحة الويب الخاصة بك. يظهر كل المحتوى المعروض بين العلامات.</p> + +<p>تحتوي صفحة HTML الخاصة بنا كمثال على قسمين رئيسيين: رأس ، ومضمون في كتلة {{HTMLElement ("head")}} ، وهيئة ، موجودة داخل {{HTMLElement ("body")}}. يحتوي النص على النص المعروض داخل الصفحة.</p> + +<p>لكل علامة معنى محدد ويجب استخدامها وفقًا لذلك ؛ على سبيل المثال ، يتم استخدام {{HTMLElement ("title")}} للإشارة إلى عنوان الصفحة ، والذي قد يختلف عن اسم الملف. لاحظ أيضًا أن العلامات يمكن أن تحدث داخل محتوى علامات أخرى. يتم تضمين {{HTMLElement ("title")}} داخل {@ HTMLElement ("head")}} ، على سبيل المثال.</p> + +<p>إذا كنت تريد إضافة شيء ما مثل صورة إلى صفحتك ، فستحتاج إلى إضافة علامة للصورة والصورة نفسها. فمثلا:</p> + +<p> </p> + +<pre class="brush: html"><!DOCTYPE html> +<html> +<head> + <title>Hi there</title> +</head> +<body> + This is a page + a simple page + <img src="unicorn_pic.png" alt="Unicorn picture :)" /> + now with a unicorn +</body> +</html></pre> + +<p>عدّل ملفك ليتضمن علامة {{HTMLElement ("img")}} ، على النحو التالي:</p> + +<pre class="brush: html"><img src="unicorn_pic.png" alt="Unicorn picture :)" /></pre> + +<p> </p> + +<p>يمكن أن تذهب إلى أي مكان داخل {{HTMLElement ("body")}}. لا تنس حفظ الصفحة التي تم تغييرها!</p> + +<p>ثم ضع ملفًا باسم "unicorn_pic.png" في المجلد نفسه كملف HTML. عند تحديث نافذة المتصفح (أو إعادة فتح ملف HTML في متصفحك) ، يجب أن تشاهد المحتوى الذي تم تغييره ، مع استكمال يونيكورن! (لا تنس حفظ صفحتك).</p> + +<p> </p> + +<p><img alt="Original file for the unicorn image" src="https://mdn.mozillademos.org/files/8495/unicorn_pic.png" style="height: 300px; width: 242px;"></p> + +<div class="note"> +<p><strong>ملاحظة: يمكنك الحصول على نسخة من صورة يونيكورن لاستخدامها في تجاربك عن طريق النقر بزر الماوس الأيمن فوق الصورة واختيار خيار "حفظ الصورة باسم ..." من القائمة التي تظهر.</strong></p> +</div> + +<p>The files needed for this page to work now look something like this in your desktop:</p> + +<p><img alt="Screenshot of the explorer with 2 files : a html file and a picture file" src="https://mdn.mozillademos.org/files/8389/Capture%20du%202014-08-20%2021:37:14.png" style="height: 69px; width: 405px;"></p> + +<p>تبدو الملفات المطلوبة لهذه الصفحة الآن تبدو كشيء من هذا القبيل في سطح المكتب الخاص بك:</p> + +<p><img alt="Screenshot for the example with a picture" src="https://mdn.mozillademos.org/files/8499/Capture%20du%202014-09-04%2021:39:16.png" style="border-style: solid; border-width: 1px; height: 404px; width: 664px;"></p> + +<p> </p> + +<p>ربما لاحظت أن علامة {{HTMLElement ("img")}} تحتوي على {{Glossary ("attribute"، "attributes")}} التي توفر معلومات إضافية مطلوبة لبناء الكائن المطلوب ، وفي هذه الحالة ، اسم الملف الصورة التي سيتم عرضها والنص البديل الذي سيتم عرضه عندما يتعذر تحميل الصورة.</p> + +<p>هذا مثال على كيفية إضافة صورة إلى صفحتك ، ولكن يمكنك استخدام تقنيات مشابهة لإضافة الموسيقى ومقاطع الفيديو والمزيد ، وكل ذلك باستخدام لا شيء أكثر من HTML.<br> + </p> + +<p> </p> + +<p>الغوص أعمق<br> + هذه ليست صفحة ويب جميلة جدا<br> + كما قد تكون لاحظت ، هذه الصفحة ليست معجزة بالتصميم والجمال. وذلك لأن HTML تدور حول المحتوى وما يعنيه المحتوى (من حيث السياق والعلاقات بين كتل المحتوى) ، بدلاً من التصميم.</p> + +<p>يمكّنك {{Glossary ("CSS")}} من جعل المحتوى يتألق ، وذلك بإضافة التخطيط واللون والخطوط وما إلى ذلك. إن HTML الخالص جيد بما يكفي لصنع صفحات ويب بسيطة ، لكن الصفحات الأكثر تعقيدًا (أو حتى الصفحات البسيطة ذات التصميمات الجذابة) تحتاج عادة إلى CSS وربما {{Glossary ("JavaScript")}}. ينشئ HTML المحتوى وأنماط CSS للمحتوى وجافا سكريبت يجعل المحتوى ديناميكيًا.</p> + +<p>دعونا نجرب قليلا مع CSS بجعل النص الأساسي للصفحة باللون الأزرق:<br> + alghaws 'aemaq<br> + </p> + +<p> </p> + +<pre class="brush: html"><!DOCTYPE html> +<html> +<head> + <title>Hi there</title> + <style> + body { + color: blue; + } + </style> +</head> + <body> + <p>This is a some blue text</p> + <img src="unicorn_pic.png" alt="Unicorn picture :)" /> + </body> +</html></pre> + +<p> </p> + +<p>لاحظ إضافة عنصر {{HTMLElement ("style")}} إلى الصفحة {{HTMLElement ("head")}}. هذا يحدد CSS لتطبيقه على النص الأساسي.</p> + +<p>تريد أن يتم تسطير النص؟ حاول إضافة "زخرفة النص: تسطير ؛" حكم على أسلوبك:</p> + +<p> </p> + +<pre class="brush: css">body { + color: blue; + text-decoration: underline; +}</pre> + +<p>تريد أن يكون النص بحجم محدد؟ جرب إضافة "font-size: 42px؛" مثله:</p> + +<pre class="brush: css">body { + color: blue; + text-decoration: underline; + font-size: 42px; +}</pre> + +<p>والنهاية ستكون هكذا:</p> + +<pre class="brush: html"><html> +<head> + <title>Hi there</title> + <style> + body { + color: blue; + text-decoration: underline; + font-size: 42px; + } + </style> +</head> +<body> + <p>This is a blue underlined big text</p> + <img src="unicorn_pic.png" alt="Unicorn picture :)" /> +</body> +</html></pre> + +<p>وإذا قمت بحفظ الصفحة في المحرر الخاص بك ، ثم قم بتحديث المتصفح ، فيجب أن تبدو الصفحة كما يلي:</p> + +<p><img alt="Screenshot of the browser with the page with some CSS" src="https://mdn.mozillademos.org/files/8497/Capture%20du%202014-09-04%2021:40:18.png" style="border-style: solid; border-width: 1px; height: 494px; width: 743px;"></p> + +<p>ينمو إلى صفحتين<br> + عندما تتصفح الويب ، غالبًا ما تصادفك {{Glossary ("hyperlink" ، "links")}} ، وهي الطريقة الأكثر فائدة للانتقال من صفحة إلى أخرى. نظرًا لأن HTML عبارة عن محتوى وتعتبر الروابط نوعًا من المحتوى ، يمكنك إنشاء روابط بين الصفحات باستخدام HTML فقط.</p> + +<p>الربط بين صفحتين محليتين<br> + في هذا التمرين ، ستحتاج إلى إنشاء ملف HTML ثاني على جهاز الكمبيوتر الخاص بك. سنضيف رابطًا إلى كل صفحة حتى يمكنك التبديل سريعًا ذهابًا وإيابًا فيما بينها.</p> + +<p>في الملف الأول يمكنك الاحتفاظ بنفس البنية العامة كما كان من قبل. المهم هو إضافة علامة جديدة ، {{HTMLElement ("a")}} ، على النحو التالي:</p> + +<p> </p> + +<pre class="brush: html"><!DOCTYPE html> +<html> +<head> + <title>Page 1 to ground control</title> +</head> +<body> + This is page 1. + <a href="page2.html" title="to page 2">What is going on on page 2?</a> +</body> +</html></pre> + +<p>يجب أن ترتبط الصفحة الثانية بالصفحة الأولى:</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> +<head> + <title>Page 2 :)</title> +</head> +<body> + This is a page 2. + <a href="page1.html" title="to page 1"><span>Want to go back to page 1? Click here</span></a> +</body> +</html></pre> + +<div class="note"> +<p><strong>ملاحظة: تأكد من تطابق أسماء الملفات المحددة في سمة href للعلامة {{HTMLElement ("a")} مع أسماء الملفات التي أنشأتها على جهاز الكمبيوتر.</strong></p> +</div> + +<p> </p> + +<p>يمكنك الآن التنقل بين اثنين من مستندات HTML. افتح الصفحة 1 في المستعرض الخاص بك وانقر فوق الارتباط لفتح الصفحة 2 ، والعكس. يمكنك أيضًا اختبار الزر "السابق" في متصفحك. ستعيدك إلى الصفحة الأخيرة التي كنت تبحث عنها.</p> + +<p>يجب أن يكون لمدير الملفات ملفي HTML في نفس المجلد ، على النحو التالي:</p> + +<p><img alt="Screenshot of the file explorer with two HTML documents in one directory/folder" src="https://mdn.mozillademos.org/files/8395/Capture%20du%202014-08-20%2022:06:05.png" style="height: 92px; width: 595px;"></p> + +<p>الصفحة الاولي تشبه هذه:</p> + +<p><img alt="Screenshot of a file explorer with a html file for local test" src="https://mdn.mozillademos.org/files/8397/Capture%20du%202014-08-20%2022:11:31.png" style="border-style: solid; border-width: 1px; height: 114px; width: 365px;"></p> + +<p>والصفحة الثانية تشبهه هذه بعد الضغط علي link:</p> + +<p><img alt="Screenshot of the 2nd page of the 2 pages example in the browser" src="https://mdn.mozillademos.org/files/8401/Capture%20du%202014-08-20%2022:15:17.png" style="border-style: solid; border-width: 1px; height: 116px; width: 366px;"></p> + +<div class="note"> +<p><textarea></textarea></p> + +<p><textarea>Note: The link back to page 1 is violet because the browser "knows" that we've previously visited the first page.</textarea></p> + +<p><textarea></textarea></p> + +<p>113/5000</p> + +<p>ملاحظة: يعتبر الارتباط مرة أخرى إلى الصفحة رقم 1 هو البنفسجي لأن المتصفح "يعلم" بأننا سبق أن زرنا الصفحة الأولى.</p> + +<p> </p> +</div> + +<p> </p> + +<p>إذا أردت ، يمكنك تجربة ذلك بأكثر من صفحتين ، أو المتابعة إلى القسم التالي للانتقال إلى المستوى التالي.</p> + +<p>الربط بموقع آخر<br> + في هذا التمرين ، سنقوم بإضافة ارتباط إلى ملف HTML بحيث يمكن للقارئ الوصول بسرعة إلى بعض الصفحات المفيدة على الويب. يمكنك الربط بأي شيء متوفر على الويب العام. دعونا نحاول ربط ويكيبيديا:</p> + +<p> </p> + +<pre class="brush: html"><!DOCTYPE html> +<html> +<head> + <title>My page</title> +</head> +<body> + One day,...Unicorns are great...See you. + <a href="https://en.wikipedia.org/wiki/Unicorn" title="Unicorn page on Wikipedia"><span>Want to go know more about unicorns? Wikipedia is right here</span></a> +</body> +</html></pre> + +<p>يجب أن يبدو هذا أكثر أو أقل مثل هذا في المتصفح:</p> + +<p><img alt="Screenshot of the example page with a link to Wikipedia in the browser" src="https://mdn.mozillademos.org/files/8403/Capture%20du%202014-08-20%2022:22:24.png" style="height: 158px; width: 861px;"></p> + +<p>قم بتحريك مؤشر الماوس فوق الرابط ؛ سترى السمة {{htmlattrxref ("title")}} المعروضة في تلميح أداة تحويم. يمكن استخدام هذا لتوفير مزيد من المعلومات حول الارتباط ، بحيث يمكن للمستخدم اتخاذ قرار مستنير حول ما إذا كان سيتم النقر عليه أم لا.</p> + +<div class="note"> +<p><strong>تذكير: عندما تقوم بتحرير الصفحة ، لا تنس حفظ الملف على المحرر وتحديث الصفحة على متصفحك حتى تتمكن من رؤية التغييرات التي قمت بها.</strong></p> +</div> + +<h2 id="الخطوات_التالية_كيفية_استخدام_علامات_HTML_هناك_الكثير_من_العلامات_في_HTML_؛_لقد_نظرنا_فقط_في_الأساسيات_هنا!_ستجد_المزيد_من_الموارد_حول_ما_هو_ممكن_هنا._تشريح_صفحة_الويب_تحتوي_HTML_على_بعض_القواعد_وقد_تحتوي_الصفحة_على_الكثير_من_المحتوى_؛_يمكن_أن_يساعدك_ذلك_في_فهم_صفحات_أكثر_تعقيدًا_،_مثل_تلك_المستخدمة_في_بعض_المواقع_الأكثر_شيوعًا_على_الويب!_فهم_الروابط_استخدمنا_بعض_الأمثلة_البسيطة_جدًا_مع_الروابط_؛_هذه_المقالة_لك_إذا_كنت_تريد_أن_تعرف_فهم_لماذا_الروابط_هي_أصل_اسم_ويب._يفيد_استخدام_الصور_وإضافة_الصوت_والفيديو_لإضافة_محتوى_متعدد_الوسائط_باستخدام_HTML_بسيط.">الخطوات التالية<br> + كيفية استخدام علامات HTML: هناك الكثير من العلامات في HTML ؛ لقد نظرنا فقط في الأساسيات هنا! ستجد المزيد من الموارد حول ما هو ممكن هنا.<br> + تشريح صفحة الويب: تحتوي HTML على بعض القواعد وقد تحتوي الصفحة على الكثير من المحتوى ؛ يمكن أن يساعدك ذلك في فهم صفحات أكثر تعقيدًا ، مثل تلك المستخدمة في بعض المواقع الأكثر شيوعًا على الويب!<br> + فهم الروابط: استخدمنا بعض الأمثلة البسيطة جدًا مع الروابط ؛ هذه المقالة لك إذا كنت تريد أن تعرف فهم لماذا "الروابط" هي أصل اسم "ويب".<br> + يفيد استخدام الصور وإضافة الصوت والفيديو لإضافة محتوى متعدد الوسائط باستخدام HTML بسيط.</h2> diff --git a/files/ar/learn/index.html b/files/ar/learn/index.html new file mode 100644 index 0000000000..056540bdd7 --- /dev/null +++ b/files/ar/learn/index.html @@ -0,0 +1,128 @@ +--- +title: تعلم تطوير الويب +slug: Learn +tags: + - تعلم + - صفحة هبوط + - فهرس + - مبتدئين + - مقدمة + - ويب +translation_of: Learn +--- +<div class="summary" dir="rtl"> +<p style="direction: rtl;">مرحبا بك في قسم بـشبكة مطوري موزيلا للتعلم. تهدف مجموعة المقالات هذه إلى توفير كل ما يحتاجه المبتدئون في تطوير الويب للبدء ببناء مواقعهم.</p> +</div> + +<p dir="rtl">ليس الهدف من هذا القسم هو أن يأخذك من مرحلة «مبتدئ» إلى مرحلة «الإحتراف» ولكن لأخذك من مرحلة «مبتدئ» إلى «الإكتفاء بالأساسيات». ثم ومن هنا يجب أن تكون قادراً على إكمال طريقك عبر دراسة <a href="https://developer.mozilla.org/ar/">بقيّة مصادر شبكة مطوري موزيلا</a>، وغيرها من المصادر ذات المستوى المتوسط والمتقدم التي تتطلب معرفة مسبقة.</p> + +<p dir="rtl">إذا كنت مبتدئ، تطوير الويب يمكن أن يكون تحدياً - سنساعدك وسنوفر لك تفاصيل كافية لتشعر بالراحة وتدرس المواضيع كما ينبغي. هذا هو مكانك إن كنت طالباً يتعلم تطوير الويب (بشكل ذاتي أو كجزء من الدراسة)، مدرساً يبحث عن مصادر، هاوٍ، أو شخص ما يريد فقط فهم المزيد حول طريقة عمل تقنيات الويب.</p> + +<div class="warning" dir="rtl"> +<p><strong>مهم</strong>: المحتوى في هذا القسم هو محتوى متجدد باستمرار. فإذا كان لديك أسئلة بخصوص مواضيع تود أن يتم تغطيتها أو تشعر أنها ناقصة، انظر إلى قسم «تواصل معنا» أسفله للحصول على معلومات عن كيفية التواصل معنا.</p> +</div> + +<h2 dir="rtl" id="من_أين_أبدا">من أين أبدا</h2> + +<ul class="card-grid" dir="rtl"> + <li><span>مبتدئ:</span> + + <p>إذا كنت مبتدئًا في تطوير الويب نقترح عليك أن تبدأ في وحدة <a href="/ar/docs/Learn/Getting_started_with_the_web">البدء مع الويب</a>، والتي توفر مقدمة عملية في تطوير الويب.</p> + </li> + <li><span>أسئلة محددة:</span> + <p>إذا كان لديك سؤال محدد حول تطوير الويب، قد تجد شيئا يساعدك في قسم <a href="/ar/docs/Learn/Common_questions">الأسئلة الشائعة</a>.</p> + </li> + <li><span>ما بعد الأساسيات:</span> + <p>إذا كان لديك القليل من المعرفة مسبقاً، الخطوة التالية هي تعلم لغة ترميز النص الفائق وصفحات الأنماط الانسيابية بالتفصيل مع وحدة «<a href="/ar/docs/Learn/HTML/Introduction_to_HTML">مقدمة إلى لغة ترميز النص الفائق</a>» والمتابعة بعدها إلى وحدة «<a href="/ar/docs/Learn/CSS/Introduction_to_CSS">مقدمة إلى صفحات الأنماط الانسيابية</a>».</p> + </li> + <li><span>الإنتقال إلى البرمجة:</span> + <p>إذا كنت متمكناً من لغة ترميز النص الفائق وصفحات الأنماط الانسيابية بالفعل، وكنتَ مهتماً بالبرمجة، فحتماً سترغب في الإنتقال إلى تعلم «الجافاسكربت». ابدأ مع وحدة «<a href="/ar/docs/Learn/JavaScript/First_steps">خطوات الأولى مع الجافاسكربت</a>» و «<a href="/ar/docs/Learn/Server-side/First_steps">خطواتك الأولى مع تطوير جهة الخادم</a>».</p> + </li> +</ul> + +<div class="note" dir="rtl"> +<p><strong>ملاحظة</strong>: يحتوي <a href="/ar/docs/Glossary">قاموسنا</a> على تعريفات للمصطلحات</p> +</div> + +<p dir="rtl">{{LearnBox({"title":"معلومة سريعة", "sources":"/ar/docs/Glossary"})}}</p> + +<h2 dir="rtl" id="المواضيع_المغطاة">المواضيع المغطاة</h2> + +<p dir="rtl">القائمة التالية تحتوي على جميع المواضيع التي تمت تغطيتها في قسم التعلم الخاص بشبكة مطوري موزيلا.</p> + +<dl> + <dt dir="rtl"><a href="/ar/docs/Learn/Getting_started_with_the_web">البدء مع الويب</a></dt> + <dd dir="rtl">توفر الوحدة مقدمة عملية عن تطوير الويب للمبتدئين.</dd> + <dt dir="rtl"><a href="/ar/docs/Learn/HTML">لغة ترميز النص الفائق — لبنة الويب</a></dt> + <dd dir="rtl">لغة ترميز النص الفائق (HTML) هي اللغة التي نستخدمها لهيكلة أجزاء مختلفة من محتوانا ولتحديد معناها أو الغرض منها. هذا الموضوع يشرح هذه اللغة بالتفصيل.</dd> + <dt dir="rtl"><a href="/ar/docs/Learn/CSS">صفحة الأنماط الانسيابية — تصميم الويب</a></dt> + <dd dir="rtl">صفحات الأنماط الانسيابية (CSS) هي اللغة التي نستخدمها لتصميم وتنسيق محتوى الويب، كما نستخدمها لإضافة تأثيرات مثل الرسوم المتحركة. يوفر هذا الموضوع تغطية شاملة لهذه التقنية.</dd> + <dt dir="rtl"><a href="/ar/docs/Learn/JavaScript">الجافاسكربت — لغة برمجة ديناميكية لتطوير جهة العميل</a></dt> + <dd dir="rtl">تعد الجافاسكربت (JavaScript) لغة برمجة ديناميكيّة تُستخدم لإضافة ميزات تفاعليّة لصفحات الويب. يشرح هذا الموضوع جميع الأساسيات الضرورية لتُصبح قادراً على القراءة والكتابة باستخدام هاته اللغة.</dd> + <dt dir="rtl"><a href="/ar/docs/Learn/Accessibility">الإتاحة — اجعل الويب متاحاً للجميع</a></dt> + <dd dir="rtl">الإتاحة (Accessibility) هي جعل محتوى الويب متاحاً لأكبر قدر من الناس بغض النظر عن الإعاقة التي لديهم، أو الجهاز الذي يستخدمونه، أو اللغة التي يتقنوها، أو أي عامل آخر. يقدم هذا الموضوع كل ما تحتاج معرفته عن هذا المفهوم.</dd> + <dt dir="rtl"><a href="/ar/docs/Learn/Tools_and_testing">الأدوات والإختبار</a></dt> + <dd dir="rtl">يُغطي هذا الموضوع الأدوات التي يستخدمها المطورون لتسهيل عملهم، مثل أدوات الإختبار العابرة للمتصفحات (corss-browser).</dd> + <dt dir="rtl"><a href="/ar/docs/Learn/Server-side">برمجة جهة الخادم</a></dt> + <dd dir="rtl">حتى ولو كنت مُركزاً على تطوير جهة العميل (client-side)، مازال من المفيد التعرُّف على كيفيّة عمل الخوادم وما هي المزايا التي تمتلكها لغات جهة الخادم (server-side). توفر هذه المقالة مقدمة عامة حول كيفيّة عمل جهة الخادم، كما تقدم دورة مُفصلة عن كيفيّة بناء تطبيق يعمل على الخادم باستخدام إطارين عمل (frameworks) مشهورين — جانغو (لغة بايثون) وأكسبريس (نود).</dd> +</dl> + +<h2 dir="rtl" id="احصل_على_أمثلتنا_البرمجيّة">احصل على أمثلتنا البرمجيّة</h2> + +<p dir="rtl">جميع الأمثلة البرمجية التي ستشاهدها في قسم التعلم متوفرة على <a href="https://github.com/mdn/learning-area/">جيتهاب</a>. إذا أردت نسخهم جميعاً إلى حاسوبك، فأسهل طريقة هي:</p> + +<ol dir="rtl"> + <li><a href="https://git-scm.com/downloads">تثبيت جيت</a> على حاسوبك. يعد جيت برمجيّة التحكم بالإصدارات الأساسيّة التي يستخدمها جيتهاب للقيام بعمله.</li> + <li>قم <a href="https://github.com/join">بإنشاء حساب على جيتهاب</a>. العملية سهلة وبسيطة</li> + <li>بعدما تنتهي من إنشاء الحساب، قم بتسجيل الدخول إلى الموقع باسم المستخدم وكلمة المرور خاصتك.</li> + <li>افتح <a href="https://www.lifewire.com/how-to-open-command-prompt-2618089">موجه الأوامر</a> على حاسوبك (إذا كنت تستخدم ويندوز) أو الطرفية (إذا كنت تستخدم <a href="https://help.ubuntu.com/community/UsingTheTerminal">لينُكس</a> أو <a href="http://blog.teamtreehouse.com/introduction-to-the-mac-os-x-command-line">ماك</a>)</li> + <li>لتقوم بنسخ مستودع قسم التعلم إلى مجلد يسمى "learning-are" في مسارك الحالي، استخدم الأمر التالي: + <pre class="brush: bash line-numbers language-bash"><code class="language-bash">git clone https://github.com/mdn/learning-area</code></pre> + </li> + <li>يمكنك الآن الدخول إلى المجلد لتجد الملف الذي تبحث عنه (إما باستخدام مدير الملفات أو باستخدام <a href="https://ar.wikipedia.org/wiki/%D8%B3%D9%8A%D8%AF%D9%8A_(%D8%A3%D9%85%D8%B1)">الأمر cd</a>)</li> +</ol> + +<p dir="rtl">يمكنك الحصول على آخر التحديثات المُجراة على مستودع وتحميلها إلى مجلدك تلقائياً عن طريق اتباع الخطوات التالية:</p> + +<ol dir="rtl"> + <li>باستخدام موجه الأوامر/الطرفية، ادخل إلى المجلد <code>learning-area</code> باستخدام الأمر <code>cd</code>. على سبيل المثال إذا كنت في المجلد الحاوي للمجلد <code>learning-area</code> استخدم الأمر: + + <pre class="brush: bash line-numbers language-bash"><code class="language-bash">cd learning-area</code></pre> + </li> + <li>قم بتحديث المستودع باستخدام الأمر التالي: + <pre class="brush: bash line-numbers language-bash"><code class="language-bash">git pull</code></pre> + </li> +</ol> + +<p dir="rtl"></p> + +<h2 dir="rtl" id="تواصل_معنا">تواصل معنا</h2> + +<p dir="rtl">إذا أردت التواصل معنا من أجل إخبارنا بأي شيءٍ كان، فأفضل طريقة هي إرسال رسالة لنا عن طريق <a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">موضوع قسم التعلم</a> أو باستخدام <a href="/ar/docs/MDN/Community/Conversations#Chat_in_IRC">قنوات IRC</a>. نود أن نسمع منك أي شيء بخصوص ما تظنه خاطئاً أو مفقوداً على هذا الموقع، أو طلبات لمواضيع تعلم جديدة، أو طلبات للمساعدة بخصوص شيء لا تستطيع فهمه، أو أي أسئلة أخرى.</p> + +<p dir="rtl"></p> + +<h2 dir="rtl" id="طالع_أيضاً">طالع أيضاً</h2> + +<dl> + <dt dir="rtl"><a href="https://www.mozilla.org/en-US/newsletter/developer/">القائمة البريدية لمطوري موزيلا</a></dt> + <dd dir="rtl">قائمتنا البريدية لمطوري الويب، والتي تعد مصدر عظيم لجميع مستويات الخبرة.</dd> +</dl> + +<dl> + <dt dir="rtl"><a href="https://www.codecademy.com/">موقع Codecademy</a></dt> + <dd dir="rtl">موقع تفاعلي رائع لتعليم لغات البرمجة من الصفر.</dd> + <dt dir="rtl"><a href="https://exlskills.com/learn-en/courses">EXLskills</a><a href="https://code.org/"> </a></dt> + <dd dir="rtl">دورات مجانية ومفتوحة لتعلم المهارات التقنية ، مع الإرشاد والتعلم القائم على المشاريع</dd> + <dt dir="rtl"><a href="https://code.org/">موقع Code.org </a></dt> + <dd dir="rtl">مقالات وتدريبات برمجيّة بسيطة تستهدف بشكل أساسي المبتدئين.</dd> + <dt dir="rtl"><a href="https://www.freecodecamp.org/">موقع freeCodeCamp.org</a></dt> + <dd dir="rtl">موقع تفاعلي يحتوي على دورات ومشاريع لتعليم تطوير الويب.</dd> +</dl> + +<dl> + <dt dir="rtl"><a href="https://learning.mozilla.org/activities">أنشطة تعليميّة</a></dt> + <dd dir="rtl">سلسلة من الأنشطة التعليميّة للتعليم مُنشأة من قبل مؤسسة موزيلا، تغطي كل شيء بدءً من أساسيات الويب والخصوصيّة وصولاً إلى الجافا سكربت وغيرها من التقنيات المتقدمة.</dd> +</dl> + +<p dir="rtl"></p> diff --git a/files/ar/learn/javascript/first_steps/a_first_splash/index.html b/files/ar/learn/javascript/first_steps/a_first_splash/index.html new file mode 100644 index 0000000000..2a6a1c4860 --- /dev/null +++ b/files/ar/learn/javascript/first_steps/a_first_splash/index.html @@ -0,0 +1,618 @@ +--- +title: البداية في الجافا سكربت +slug: Learn/JavaScript/First_steps/A_first_splash +tags: + - أحداث + - تعلم + - جافا سكربت + - حالات شرطية + - دالة + - سكربت + - عمليات + - كائنات + - مبتديء + - متغيرات + - مقال +translation_of: Learn/JavaScript/First_steps/A_first_splash +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}</div> + +<p class="summary">بما أنك الآن قد تعرفت على المفهوم العام للغةْ جافاسكريبت, و ما الذي يمكن أن تعمله بها, سنقوم الآن بإعطائك كورس مكثف في أساسيات جافاسكريبت من خلال دروس تعتمد تماما على التجربة العملية. ستقوم الآن و خطوة بخطوة بعمل لعبةْإحزر الرقم .</p> + +<p class="summary"></p> + +<table class="learn-box standard-table" dir="rtl"> + <tbody> + <tr> + <th scope="row">المتطلبات اﻷساسية:</th> + <td>فهم أساسيات الحاسوب، فهم أساسيات HTML و CSS, وفهم ما هي الجافا سكربت.</td> + </tr> + <tr> + <th scope="row">الهدف:</th> + <td>أخذ قليل من الخبرة في كتابة بعض الجافا سكربت، وفهم القليل من اﻷساسيات لفهم كتابة برنامج بالجافا سكربت .</td> + </tr> + </tbody> +</table> + +<p dir="rtl">لا تتوقع أن تفهم كل تفاصيل الكود في الوقت الحالي __ نحن نريد أن نقدم لك المباديء العليا اﻵن، وإعطاؤك فكرة عن كيفية عمل الجافاسكربت ( وأي لغة برمجة أخرى ). في المقالات اللاحقة ، سوف نرى كل هذه الميزات بكثير من التفصيل!</p> + +<div class="note" dir="rtl"> +<p>ملحوظة: العديد من ملامح الكود سوف تراها في الجافا سكربت كما في اللغات البرمجية اﻵخرى __ الدوال ، الحلقات التكرارية، إلخ. بنية الكود تبدو مختلفة ، ولكن المبدأ واحد ﻻ يتغير .</p> +</div> + +<h2 dir="rtl" id="فكر_مثل_المُبَرْمِج">فكر مثل المُبَرْمِج</h2> + +<p dir="rtl">واحد من اﻷشياء الصعبة في تعلم البرمجة ليس بنية الكود، ولكن كيف تطبق هذا الكود لحل المشاكل في العالم الحقيقي. أنت تحتاج للبدء في التفكير مثل المُبَرْمِج__ عمومًا هذا يتضمن النظر في وصف ماذا يحتاج برنامجك لكي يعمل, وعلى ماذا يعمل. ملامح الكود تحتاج ﻷن تحقق هذه اﻷشياء، وكيفية جعلهم يعملون معًا.</p> + +<p dir="rtl">المتطلبات مزيج من العمل الجاد ، الخبرة في تركيب الجملة البرمجية ، و التدريب بجانب قليل من اﻹبداع. كلما قمت بكتابة الكود ، كلما كان ذلك أفضل . ﻻ نعدك أن تطور " عقل المبرمج " في خمسة دقائق، ولكن سوف نعطيك الكثير من الفرص للتدريب على التفكير مثل المُبَرْمِج خلال هذه الدورة .</p> + +<p dir="rtl">مع أخذ ذلك في الاعتبار ، دعنا نأخذ مثال سوف ننشأه في هذا المقال، ومراجعة العملية العامة لتقسيمها إلى مهام ملموسة . </p> + +<h2 dir="rtl" id="مثال____لعبة_تخمين_الرقم">مثال __ لعبة تخمين الرقم</h2> + +<p dir="rtl">في هذا المقال سنعرض لك كيفية بناء لعبة بسيطة كما في هذا المثال :</p> + +<div class="hidden"> +<h6 id="Top_hidden_code">Top hidden code</h6> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + +<head> + <meta charset="utf-8"> + <title>Number guessing game</title> + <style> + html { + font-family: sans-serif; + } + + body { + width: 50%; + max-width: 800px; + min-width: 480px; + margin: 0 auto; + } + + .lastResult { + color: white; + padding: 3px; + } + </style> +</head> + +<body> + <h1>Number guessing game</h1> + <p>We have selected a random number between 1 and 100. See if you can guess it in 10 turns or fewer. We'll tell you if your guess was too high or too low.</p> + <div class="form"> <label for="guessField">Enter a guess: </label><input type="text" id="guessField" class="guessField"> <input type="submit" value="Submit guess" class="guessSubmit"> </div> + <div class="resultParas"> + <p class="guesses"></p> + <p class="lastResult"></p> + <p class="lowOrHi"></p> + </div> +</body> +<script> + // Your JavaScript goes here + var randomNumber = Math.floor(Math.random() * 100) + 1; + var guesses = document.querySelector('.guesses'); + var lastResult = document.querySelector('.lastResult'); + var lowOrHi = document.querySelector('.lowOrHi'); + var guessSubmit = document.querySelector('.guessSubmit'); + var guessField = document.querySelector('.guessField'); + var guessCount = 1; + var resetButton; + + function checkGuess() { + var userGuess = Number(guessField.value); + if (guessCount === 1) { + guesses.textContent = 'Previous guesses: '; + } + + guesses.textContent += userGuess + ' '; + + if (userGuess === randomNumber) { + lastResult.textContent = 'Congratulations! You got it right!'; + lastResult.style.backgroundColor = 'green'; + lowOrHi.textContent = ''; + setGameOver(); + } else if (guessCount === 10) { + lastResult.textContent = '!!!GAME OVER!!!'; + lowOrHi.textContent = ''; + setGameOver(); + } else { + lastResult.textContent = 'Wrong!'; + lastResult.style.backgroundColor = 'red'; + if(userGuess < randomNumber) { + lowOrHi.textContent='Last guess was too low!' ; + } else if(userGuess > randomNumber) { + lowOrHi.textContent = 'Last guess was too high!'; + } + } + + guessCount++; + guessField.value = ''; + } + + guessSubmit.addEventListener('click', checkGuess); + + function setGameOver() { + guessField.disabled = true; + guessSubmit.disabled = true; + resetButton = document.createElement('button'); + resetButton.textContent = 'Start new game'; + document.body.appendChild(resetButton); + resetButton.addEventListener('click', resetGame); + } + + function resetGame() { + guessCount = 1; + var resetParas = document.querySelectorAll('.resultParas p'); + for(var i = 0 ; i < resetParas.length ; i++) { + resetParas[i].textContent=''; + } + + resetButton.parentNode.removeChild(resetButton); + guessField.disabled = false; + guessSubmit.disabled = false; + guessField.value=''; + guessField.focus(); + lastResult.style.backgroundColor='white'; + randomNumber=Math.floor(Math.random() * 100) + 1; + } +</script> + +</html></pre> +</div> + +<p>{{ EmbedLiveSample('Top_hidden_code', '100%', 320, "", "", "hide-codepen-jsfiddle") }}</p> + +<p dir="rtl">جرب اللعب __ تعرف بنفسك على اللعبة قبل أن تمضي قُدُمًا .</p> + +<p dir="rtl">دعنا نتخيل رئيسك في العمل أعطاك المختصر التالي ﻹنشاء هذه اللعبة :</p> + +<blockquote> +<p>أريد منك أن تنشيء لعبة بسيطة وهي لعبة تخمين الرقم. يجب اختيار رقم عشوائي بين 1 و 100 ، ثم تحدي اللاعب لتخمين الرقم في 10 مرات. بعد كل مرة يجب إخبار اللاعب هل الرقم صحيح أم خطأ — و إذا كانت اﻷرقام المخمنة خطأ ، فهل كان التخمين قريب جدًا أم بعيد جدًا . يجب أن يخبر اللاعب أيضًا ما اﻷرقام التي خمنها سابقًا . اللعبة تنتهي عندما يخمن اللاعب الرقم الصحيح، أو تستمر اللعبة حتي نهاية عدد المرات. عندما تنتهي اللعبة يجب إعطاء اللاعب خيار بدء اللعبة مرة أخرى .</p> +</blockquote> + +<p dir="rtl">بناءًا على النظر في هذا المختصر ، أول شيء يمكننا فعله هو البدء في تقسيمها إلى مهام بسيطة قابلة للتنفيذ، مثل عقلية المبرمج :</p> + +<ol dir="rtl"> + <li>أنشيء رقم عشوائي بين 1 و 100 .</li> + <li>سجل الرقم الذي أدخله اللاعب . بداية من رقم 1 .</li> + <li>أعطِ اللاعب طريقة لتخمين ما هو الرقم .</li> + <li>بمجرد أن يدخل اللاعب الرقم ، سجل أول رقم بحيث يستطيع اللاعب أي يرى تخمينات السابقة.</li> + <li>ثم ، تأكد ما إذا كان الرقم صحيح.</li> + <li>إذا كان صحيحًا : + <ol> + <li>اعرض رسالة التهنئة .</li> + <li>امنع اللاعب من كتابة تخمينات أخرى ( ﻷن هذا سيفسد اللعبة) .</li> + <li>اعرض للاعب أن يبدأ اللعبة مرة أخرى .</li> + </ol> + </li> + <li>إذا كان خطأ واللاعب لديه مرات أخرى : + <ol> + <li>أخبر اللاعب أن التخمين خطأ .</li> + <li>اسمح للاعب بإدخال تخمين آخر.</li> + <li>قم بزيادة المحاوﻻت بمقدار 1 .</li> + </ol> + </li> + <li>إذا كان خطأ واللاعب ليس لدي مرات أخرى: + <ol> + <li>أخبر اللاعب أن اللعبة انتهت .</li> + <li>امنع اللاعب من كتابة تخمينات أخرى ( ﻷن هذا سيفسد اللعبة) .</li> + <li>اعرض للاعب أن يبدأ اللعبة مرة أخرى .</li> + </ol> + </li> + <li>عندما يُعاد تشغيل اللعبة ، تأكد من إعادة تعيين اللعبة وواجهة المستخدم ، ثم نفذ الخطوة رقم 1 .</li> +</ol> + +<p dir="rtl">دعنا نبدأ اﻵن ، لنرى كيف نستطيع أن نحول هذه الخطوات إلى كود، وننشيء هذا المثال ، ونستكشف ميزات الجافا سكربت في طريقنا :</p> + +<h3 dir="rtl" id="اﻹعداد_اﻷولي">اﻹعداد اﻷولي</h3> + +<p dir="rtl">للبدء في الحل ، نفضل أن تأخذ نسخة من ملف , <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html">number-guessing-game-start.html</a> (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html">هنا يمكن رؤية المثال الحي</a>). افتح الملف في محرر النصوص الخاص بك وفي متصفح الويب.سترى عنوان رئيسي وفقرة التعليمات و نموذج ﻹدخال التخمينات ، ولكن هذا النموذج حاليًا لن يقوم بعمل أي شيء .</p> + +<p dir="rtl">المكان حيث سنضيف الكود الخاص بنا بداخله {{htmlelement("script")}} يوجد في آخر ملف HTML :</p> + +<pre class="brush: html notranslate"><script> + + // Your JavaScript goes here + +</script> +</pre> + +<h3 dir="rtl" id="إضافة_المتغيرات_لتخزين_البيانات_الخاصة_بنا">إضافة المتغيرات لتخزين البيانات الخاصة بنا</h3> + +<p dir="rtl">دعونا نبدأ. قبل كل شيء ، أضف اﻷسطر التالية بداخل عنصر{{htmlelement("script")}} :</p> + +<pre class="brush: js notranslate">let randomNumber = Math.floor(Math.random() * 100) + 1; + +const guesses = document.querySelector('.guesses'); +const lastResult = document.querySelector('.lastResult'); +const lowOrHi = document.querySelector('.lowOrHi'); + +const guessSubmit = document.querySelector('.guessSubmit'); +const guessField = document.querySelector('.guessField'); + +let guessCount = 1; +let resetButton;</pre> + +<p dir="rtl">في هذا القسم من الكود فقد هيئنا المتغيرات والثوابت التي سنحتاجها لتخزين بيانات برنامجنا. المتغيرات تحتوي بشكل أساسي على قيم ( مثل الأرقام، النصوص). ﻹنشاء متغير نكتب الكلمة <code>let</code> ( أو <code>var</code> ) متبوعة باسم المتغير ( للمزيد عن الاختلاف بين الكلمات المفتاحية في <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Variables#The_difference_between_var_and_let">هذه المقالة</a> ). الثوابت تستخدم لتخزين قيم غير قابلة للتغيير أو ﻻ تتغير وتكتب الثوابت بعد الكلمة المفتاحية <code>const</code>. في هذه الحالة ، نستخدم الثوابت لتخزين مراجع ﻷجزاء من واجهة المستخدم ; النص بداخل بعض هذه الثوابت ممكن أن يتغير ، ولكن عنصر HTML يبقى كما هو .</p> + +<p dir="rtl">تستطيع تعيين قيمة للمتغير أو الثابت بعد علامة يساوي (<code>=</code>) متبوعة بالقيمة التي تريدها .</p> + +<p dir="rtl">في مثالنا :</p> + +<ul> + <li dir="rtl">المتغير اﻷول — <code>randomNumber</code> — يحدد رقم عشوائي بين 1 و 100 ، حيث تم حسابه باستخدام خوارزمية رياضية .</li> + <li dir="rtl">أول ثلاثة ثوابت هي لتخزين مرجع للفقرات في HTML ، وتستخدم ﻹدخال قيم في عنصر الفقرات في الكود ( ﻻحظ أنهم بداخل عنصر <code><div></code> ، الذي يستخدم لتحديد الثلاثة لتهيئتهم في وقت ﻻحق ، عندما نعيد تشغيل اللعبة) + <pre class="brush: html notranslate"><div class="resultParas"> + <p class="guesses"></p> + <p class="lastResult"></p> + <p class="lowOrHi"></p> +</div></pre> + </li> + <li dir="rtl">الثابتين التاليين يخزنان مراجع لنص حقل اﻹدخال و زر اﻹرسال حيث يستخدم للتحكم في إرسال الرقم الذي تم تخمينه .</li> + <li> + <pre class="brush: html notranslate" dir="rtl"><label for="guessField">Enter a guess: </label><input type="text" id="guessField" class="guessField"> +<input type="submit" value="Submit guess" class="guessSubmit"></pre> + </li> + <li dir="rtl">آخر متغيرين لدينا يخزنان عدد مرات التخمين بداية من المرة 1 ( يستخدم لحفظ كم مرة قام اللاعب بالتخمين )، ومرجع لزر التهيئة (حيث سيكون موجود فيما بعد ) .</li> +</ul> + +<div class="note" dir="rtl"> +<p><strong>ملحوظة</strong>: سوف تتعمل المزيد عن المتغيرات / الثوابت فيما بعد في هذه الدورة ، بداية من <a href="https://developer.mozilla.org/en-US/docs/user:chrisdavidmills/variables">المقال التالي</a> .</p> +</div> + +<h3 dir="rtl" id="الدوال">الدوال</h3> + +<p dir="rtl">ثم ، أضف التالي أسفل كود الجافا سكربت الذي كتبناه باﻷعلى :</p> + +<pre class="brush: js notranslate">function checkGuess() { + alert('I am a placeholder'); +}</pre> + +<p dir="rtl">الدوال هي جزء من الكود يمكن إعادة استخدامه حيث تستطيع كتابة مرة واحدة واستدعاؤه مرة أخرى ومرة أخرى، وحفظ الكود الذي نحتاج لتكراره دائمًا .هذا حقًا مفيد.هناك عدة طرق لتعريف الدوال، ولكن اﻵن سنركز على نوع بسيط. هنا عرَّفنا الدالة باستخدام الكلمة المفتاحية <code>function</code>, متبوعة بالاسم, مع اﻷقواس بعدها . بعد ذلك وضعنا اﻷقواس المعقوفة (<code>{ }</code>). بداخل اﻷقواس المعقوفة نكتب الكود الذي نريده لكي يعمل عندما نستدعي هذه الدالة.</p> + +<p dir="rtl">عندما نريد تشغير الكود ، نكتب اسم الدالة متبوعًا باﻷقواس.</p> + +<p dir="rtl">دعنا نحاول اﻵن. احفظ الكود و أعد تحميل الصفحة في المتصفح. ثم اذهب إلى <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">developer tools JavaScript console</a>, وأدخل السطر التالي :</p> + +<pre class="brush: js notranslate">checkGuess();</pre> + +<p dir="rtl">بعد الضغط على <kbd>Return</kbd>/<kbd>Enter</kbd>, يجب أن ترى تحذير يقول لك "<samp>I am a placeholder</samp>" لقد عرَّفنا الدالة في الكود الخاص بنا حيث تنشيء تحذير عند استدعائها.</p> + +<div class="note" dir="rtl"> +<p><strong>ملحوظة</strong>: سوف تتعلم المزيد عن الدوال في هذه الدورة .</p> +</div> + +<h3 dir="rtl" id="العمليات_الرياضية">العمليات الرياضية</h3> + +<p dir="rtl">العمليات الرياضية في الجافا سكربت تسمح لنا أن نجري اختبارات، حل الرياضيات، ربط مجموعة كلمات ونصوص مع بعضهم البعض، وأشياء أخرى.</p> + +<p dir="rtl">إذا لم تقم بذلك بالفعل ، احفظ الكود الخاص بك، أعد تحميل الصفحة في المتصفح الخاص بك، وافتح <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">developer tools JavaScript console </a>.بعد ذلك نستطيع الكتابة كما في المثال التالي __ اكتب كل واحد من أعمدة "المثال" كما هو موضح تمامًا، اضغط <kbd>Return</kbd>/<kbd>Enter</kbd> بعد كل واحد، وانظر ما هي النتائج التي ظهرت :</p> + +<p dir="rtl">أوﻻً دعنا نلقى نظرة على العمليات الحسابية ، على سبيل المثال :</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">العملية</th> + <th scope="col">المسمى</th> + <th scope="col">مثال</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>+</code></td> + <td>الجمع</td> + <td><code>6 + 9</code></td> + </tr> + <tr> + <td><code>-</code></td> + <td>الطرح</td> + <td><code>20 - 15</code></td> + </tr> + <tr> + <td><code>*</code></td> + <td>الضرب</td> + <td><code>3 * 7</code></td> + </tr> + <tr> + <td><code>/</code></td> + <td>القسمة</td> + <td><code>10 / 5</code></td> + </tr> + </tbody> +</table> + +<p dir="rtl">أيضًا تستطيع استخدام علامة <code>+</code> لربط النصوص معًا ( في البرمجة، هذا يسمى التسلسل). جرب إدخال السطور التالية ، واحدًا تلو الآخر :</p> + +<pre class="brush: js notranslate">let name = 'Bingo'; +name; +let hello = ' says hello!'; +hello; +let greeting = name + hello; +greeting;</pre> + +<p dir="rtl">هناك أيضًا بعض العمليات الحسابية المختصرة ، تسمى زيادة <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">عوامل التخصيص</a>. على سبيل المثال ، إذا أردت إضافة نص جديد لنص موجود بالفعل وترى النتيجة ، تستطيع كتابة هذا :</p> + +<pre class="brush: js notranslate">name += ' says hello!';</pre> + +<p dir="rtl">هذا يعادل :</p> + +<pre class="brush: js notranslate">name = name + ' says hello!';</pre> + +<p dir="rtl">عند استخدام حالة صح/ خطأ ( على سبيل المثال بداخل الحاﻻت الشرطية __ انظر {{anch("Conditionals", "below")}} ) نستخدم <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">عمليات المقارنة</a> . على سبيل المثال :</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">العملية</th> + <th scope="col">المسمى</th> + <th scope="col">مثال</th> + </tr> + <tr> + <td><code>===</code></td> + <td>المساواة الصارمة(هل هي نفسها بالضبط؟)</td> + <td> + <pre class="brush: js notranslate"> +5 === 2 + 4 // false +'Chris' === 'Bob' // false +5 === 2 + 3 // true +2 === '2' // false; number versus string</pre> + </td> + </tr> + <tr> + <td><code>!==</code></td> + <td>عدم المساواة (أليست هي نفسها؟)</td> + <td> + <pre class="brush: js notranslate"> +5 !== 2 + 4 // true +'Chris' !== 'Bob' // true +5 !== 2 + 3 // false +2 !== '2' // true; number versus string</pre> + </td> + </tr> + <tr> + <td><code><</code></td> + <td>أقل من</td> + <td> + <pre class="brush: js notranslate"> +6 < 10 // true +20 < 10 // false</pre> + </td> + </tr> + <tr> + <td><code>></code></td> + <td>أكبر من</td> + <td> + <pre class="brush: js notranslate"> +6 > 10 // false +20 > 10 // true</pre> + </td> + </tr> + </thead> +</table> + +<h3 dir="rtl" id="الحاﻻت_الشرطية">الحاﻻت الشرطية</h3> + +<p dir="rtl">بالعودة إلى دالة <code>checkGuess()</code> ، أعتقد أنه من المكن قول أننا ﻻ نريدها ﻹظهار رسالة placeholder . نحن نريدها لفحص هل تخمين اللاعب صحيح أم غير صحيح، واﻹستجابة بشكل مناسب.</p> + +<p dir="rtl">في هذه النقطة، استبدل دالة <code>checkGuess()</code> بهذا بدلًا من ذلك :</p> + +<pre class="brush: js notranslate">function checkGuess() { + let userGuess = Number(guessField.value); + if (guessCount === 1) { + guesses.textContent = 'Previous guesses: '; + } + guesses.textContent += userGuess + ' '; + + if (userGuess === randomNumber) { + lastResult.textContent = 'Congratulations! You got it right!'; + lastResult.style.backgroundColor = 'green'; + lowOrHi.textContent = ''; + setGameOver(); + } else if (guessCount === 10) { + lastResult.textContent = '!!!GAME OVER!!!'; + setGameOver(); + } else { + lastResult.textContent = 'Wrong!'; + lastResult.style.backgroundColor = 'red'; + if(userGuess < randomNumber) { + lowOrHi.textContent = 'Last guess was too low!'; + } else if(userGuess > randomNumber) { + lowOrHi.textContent = 'Last guess was too high!'; + } + } + + guessCount++; + guessField.value = ''; + guessField.focus(); +}</pre> + +<p dir="rtl">هذا كثير من التعليمات البرمجية __ حسنًا ! دعنا ننتقل إلى كل قسم وشرح ما يفعله.</p> + +<ul> + <li dir="rtl">السطر اﻷول (سطر رقم 2 في اﻷعلى) يعلن عن متغير يسمى <code>userGuess</code> ويهييء قيمته إلى القيمة المدخلة في حقل النصوص. أيضًا نستطيع أخذ هذه القيمة بواسطة دالة <code>Number()</code> ، فقط للتأكد من أن القيمة بالفعل رقم .</li> + <li dir="rtl">في السطر التالي، سنقابل أول كود من الحالات الشرطية (سطر 3-5 في اﻷعلى). كود الحالة الشرطية يسمح لك بتشغيل الكود بشكل انتقائي، بالاعتماد على حالة شرطية مؤكدة صح أو خطأ. يشبه هذا قليلًا الدالة، لكنه ليس بدالة. ببساطة لبدء كود الحالة الشرطية نكتب الكلمة المفتاحية <code>if</code> ، ثم بعض اﻷقواس، ثم اﻷقواس المعقوفة. بداخل اﻷقواس نكتب الشرط. إذا كان الشرط صحيح <code>true</code> ، سوف يشغل الكود بداخل اﻷقواس المعقوفة. وإذا كان غير ذلك ، لن ينفذ شيء وسينتقل لتشغيل باقي الكود. في حالتنا هذه الشرط سوف يتحقق ما إذا كان متغير <code>guessCount</code> يساوي 1 (أي ما إذا كانت هذه هي المرة اﻷولى للاعب أم ﻻ):</li> + <li> + <pre class="brush: js notranslate" dir="rtl">guessCount === 1</pre> + </li> +</ul> + +<p dir="rtl">إذا كان اﻷمر كذلك، فإننا نجعل نص فقرة التخمينات مساويًا لــ "<samp>Previous guesses: </samp>". وإذا كان غير ذلك ، فلن نفعل.</p> + +<ul> + <li dir="rtl">السطر 6 يضيف قيمة <code>userGuess</code><span> في نهاية الفقرة </span><code>guesses</code><span> ، باﻹضافة إلى مسافة لذلك ستكون هناك مسافة بين كل تخمين .</span></li> + <li dir="rtl">الكود التالي (السطور من 8-24 في اﻷعلى) تقوم بالقليل من المراجعات : + <ul> + <li>أولًا <code>if(){}</code> تفحص ما إذا كان تخمين المستخدم مساويًا لــ <code>randomNumber</code> الذي عرفناه في أعلى كود الجافاسكربت. إذا صحيحًا إذا اللاعب قام بالتخمين الصحيح وربح في هذه اللعبة، لذلك يتم عرض رسالة التهاني ، ويتم مسح مربع النص الذي يحتوي على تخمين عالي/منخفض، ويتم تشغيل دالة <code>setGameOver()</code> التي سنشرحها فيما بعد.</li> + <li>اﻵن لدينا حالة شرطية أخرى باستخدام <code>else if(){}</code>. حيث إنها تفحص ما إذا كانت هذه المرة هي آخر مرة للاعب أم ﻻ. إذا كانت آخر مرة فإن هذا البرنامج يفعل نفس اﻷشياء في الكود السابق، مع عرض رسالة انتهت اللعبة بدلاً من رسالة التهنئة.</li> + <li>الجزء اﻷخير يحتوي على ( <code>else { }</code> )الذي يحتوي على الكود الذي يعمل فقط في حالة الحاﻻت الشرطية( مثل أن اللاعب لم يخمن الرقم الصحيح، ولكن تبقى له المزيد من التخمينات). في هذه الحالة سوف نخبره بأن تخمينه خطأ ، ثم نشغل حالة شرطية أخرى حيث تفحص ما إذا كان التخمين عالى أو أقل من اﻹجابة، وعرض رسالة أخرى تخبر اللاعب إذا كان تخمينه أعلى أو أقل .</li> + </ul> + </li> + <li dir="rtl">آخر ثلاثة أسطر في هذه الدالة ( السطور من 26-28 في الأعلى)تكون مستعدة ﻹرسال التخمين. لقد أضفنا 1 لمتغير <code>guessCount</code> لحساب استهلاك اللاعب عدد أدواره(<code>++</code> هي عملية زيادة__ أي زيادة بمقدار 1 في المرة)، وتفريغ قيم حقل النصوص ، والاستعداد للدور القادم من التخمين .</li> +</ul> + +<h3 dir="rtl" id="اﻷحداث">اﻷحداث</h3> + +<p>At this point we have a nicely implemented <code>checkGuess()</code> function, but it won't do anything because we haven't called it yet. Ideally we want to call it when the "Submit guess" button is pressed, and to do this we need to use an event. Events are things that happen in the browser — a button being clicked, a page loading, a video playing, etc. — in response to which we can run blocks of code. The constructs that listen out for the event happening are called <strong>event listeners</strong>, and the blocks of code that run in response to the event firing are called <strong>event handlers</strong>.</p> + +<p>Add the following line below your <code>checkGuess()</code> function:</p> + +<pre class="brush: js notranslate">guessSubmit.addEventListener('click', checkGuess);</pre> + +<p>Here we are adding an event listener to the <code>guessSubmit</code> button. This is a method that takes two input values (called <em>arguments</em>) — the type of event we are listening out for (in this case <code>click</code>) as a string, and the code we want to run when the event occurs (in this case the <code>checkGuess()</code> function). Note that we don't need to specify the parentheses when writing it inside {{domxref("EventTarget.addEventListener", "addEventListener()")}}).</p> + +<p>Try saving and refreshing your code now, and your example should work — to a point. The only problem now is that if you guess the correct answer or run out of guesses, the game will break because we've not yet defined the <code>setGameOver()</code> function that is supposed to be run once the game is over. Let's add our missing code now and complete the example functionality.</p> + +<h3 id="Finishing_the_game_functionality">Finishing the game functionality</h3> + +<p>Let's add that <code>setGameOver()</code> function to the bottom of our code and then walk through it. Add this now, below the rest of your JavaScript:</p> + +<pre class="brush: js notranslate">function setGameOver() { + guessField.disabled = true; + guessSubmit.disabled = true; + resetButton = document.createElement('button'); + resetButton.textContent = 'Start new game'; + document.body.appendChild(resetButton); + resetButton.addEventListener('click', resetGame); +}</pre> + +<ul> + <li>The first two lines disable the form text input and button by setting their disabled properties to <code>true</code>. This is necessary, because if we didn't, the user could submit more guesses after the game is over, which would mess things up.</li> + <li>The next three lines generate a new {{htmlelement("button")}} element, set its text label to "<samp>Start new game</samp>", and add it to the bottom of our existing HTML.</li> + <li>The final line sets an event listener on our new button so that when it is clicked, a function called <code>resetGame()</code> is run.</li> +</ul> + +<p>Now we need to define this function too! Add the following code, again to the bottom of your JavaScript:</p> + +<pre class="brush: js notranslate">function resetGame() { + guessCount = 1; + + var resetParas = document.querySelectorAll('.resultParas p'); + for (var i = 0 ; i < resetParas.length ; i++) { + resetParas[i].textContent = ''; + } + + resetButton.parentNode.removeChild(resetButton); + + guessField.disabled = false; + guessSubmit.disabled = false; + guessField.value = ''; + guessField.focus(); + + lastResult.style.backgroundColor = 'white'; + + randomNumber = Math.floor(Math.random() * 100) + 1; +}</pre> + +<p>This rather long block of code completely resets everything to how it was at the start of the game, so the player can have another go. It:</p> + +<ul> + <li>Puts the <code>guessCount</code> back down to 1.</li> + <li>Clears all the information paragraphs.</li> + <li>Removes the reset button from our code.</li> + <li>Enables the form elements, and empties and focuses the text field, ready for a new guess to be entered.</li> + <li>Removes the background color from the <code>lastResult</code> paragraph.</li> + <li>Generates a new random number so that you are not just guessing the same number again!</li> +</ul> + +<p><strong>At this point you should have a fully working (simple) game — congratulations!</strong></p> + +<p>All we have left to do now in this article is talk about a few other important code features that you've already seen, although you may have not realized it.</p> + +<h3 id="Loops">Loops</h3> + +<p>One part of the above code that we need to take a more detailed look at is the <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for</a> loop. Loops are a very important concept in programming, which allow you to keep running a piece of code over and over again, until a certain condition is met.</p> + +<p>To start with, go to your <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">browser developer tools JavaScript console</a> again, and enter the following:</p> + +<pre class="brush: js notranslate">for (var i = 1 ; i < 21 ; i++) { console.log(i) }</pre> + +<p>What happened? The numbers <samp>1</samp> to <samp>20</samp> were printed out in your console. This is because of the loop. A <code>for</code> loop takes three input values (arguments):</p> + +<ol> + <li><strong>A starting value</strong>: In this case we are starting a count at 1, but this could be any number you like. You could replace the letter <code>i</code> with any name you like too, but <code>i</code> is used as a convention because it's short and easy to remember.</li> + <li><strong>An exit condition</strong>: Here we have specified <code>i < 21</code> — the loop will keep going until <code>i</code> is no longer less than 21. When <code>i</code> reaches 21, the loop will no longer run.</li> + <li><strong>An incrementor</strong>: We have specified <code>i++</code>, which means "add 1 to i". The loop will run once for every value of <code>i</code>, until <code>i</code> reaches a value of 21 (as discussed above). In this case, we are simply printing the value of <code>i</code> out to the console on every iteration using {{domxref("Console.log", "console.log()")}}.</li> +</ol> + +<p>Now let's look at the loop in our number guessing game — the following can be found inside the <code>resetGame()</code> function:</p> + +<pre class="brush: js notranslate">var resetParas = document.querySelectorAll('.resultParas p'); +for (var i = 0 ; i < resetParas.length ; i++) { + resetParas[i].textContent = ''; +}</pre> + +<p>This code creates a variable containing a list of all the paragraphs inside <code><div class="resultParas"></code> using the {{domxref("Document.querySelectorAll", "querySelectorAll()")}} method, then it loops through each one, removing the text content of each.</p> + +<h3 id="A_small_discussion_on_objects">A small discussion on objects</h3> + +<p>Let's add one more final improvement before we get to this discussion. Add the following line just below the <code>var resetButton;</code> line near the top of your JavaScript, then save your file:</p> + +<pre class="brush: js notranslate">guessField.focus();</pre> + +<p>This line uses the {{domxref("HTMLElement.focus", "focus()")}} method to automatically put the text cursor into the {{htmlelement("input")}} text field as soon as the page loads, meaning that the user can start typing their first guess right away, without having to click the form field first. It's only a small addition, but it improves usability — giving the user a good visual clue as to what they've got to do to play the game.</p> + +<p>Let's analyze what's going on here in a bit more detail. In JavaScript, everything is an object. An object is a collection of related functionality stored in a single grouping. You can create your own objects, but that is quite advanced and we won't be covering it until much later in the course. For now, we'll just briefly discuss the built-in objects that your browser contains, which allow you to do lots of useful things.</p> + +<p>In this particular case, we first created a <code>guessField</code> variable that stores a reference to the text input form field in our HTML — the following line can be found amongst our variable declarations near the top:</p> + +<pre class="brush: js notranslate">var guessField = document.querySelector('.guessField');</pre> + +<p>To get this reference, we used the {{domxref("document.querySelector", "querySelector()")}} method of the {{domxref("document")}} object. <code>querySelector()</code> takes one piece of information — a <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors">CSS selector</a> that selects the element you want a reference to.</p> + +<p>Because <code>guessField</code> now contains a reference to an {{htmlelement("input")}} element, it will now have access to a number of properties (basically variables stored inside objects, some of which can't have their values changed) and methods (basically functions stored inside objects). One method available to input elements is <code>focus()</code>, so we can now use this line to focus the text input:</p> + +<pre class="brush: js notranslate">guessField.focus();</pre> + +<p>Variables that don't contain references to form elements won't have <code>focus()</code> available to them. For example, the <code>guesses</code> variable contains a reference to a {{htmlelement("p")}} element, and <code>guessCount</code> contains a number.</p> + +<h3 id="Playing_with_browser_objects">Playing with browser objects</h3> + +<p>Let's play with some browser objects a bit.</p> + +<ol> + <li>First of all, open up your program in a browser.</li> + <li>Next, open your <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">browser developer tools</a>, and make sure the JavaScript console tab is open.</li> + <li>Type in <code>guessField</code> and the console will show you that the variable contains an {{htmlelement("input")}} element. You'll also notice that the console autocompletes the names of objects that exist inside the execution environment, including your variables!</li> + <li>Now type in the following: + <pre class="brush: js notranslate">guessField.value = 'Hello';</pre> + The <code>value</code> property represents the current value entered into the text field. You'll see that by entering this command, we've changed the text in the text field!</li> + <li>Now try typing in <code>guesses</code> and pressing return. The console will show you that the variable contains a {{htmlelement("p")}} element.</li> + <li>Now try entering the following line: + <pre class="brush: js notranslate">guesses.value</pre> + The browser will return <samp>undefined</samp>, because paragraphs don't have the <code>value</code> property.</li> + <li>To change the text inside a paragraph, you need the {{domxref("Node.textContent", "textContent")}} property instead. Try this: + <pre class="brush: js notranslate">guesses.textContent = 'Where is my paragraph?';</pre> + </li> + <li>Now for some fun stuff. Try entering the below lines, one by one: + <pre class="brush: js notranslate">guesses.style.backgroundColor = 'yellow'; +guesses.style.fontSize = '200%'; +guesses.style.padding = '10px'; +guesses.style.boxShadow = '3px 3px 6px black';</pre> + Every element on a page has a <code>style</code> property, which itself contains an object whose properties contain all the inline CSS styles applied to that element. This allows us to dynamically set new CSS styles on elements using JavaScript.</li> +</ol> + +<h2 id="Finished_for_now...">Finished for now...</h2> + +<p>So that's it for building the example. You got to the end — well done! Try your final code out, or <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game.html">play with our finished version here</a>. If you can't get the example to work, check it against the <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html">source code</a>.</p> + +<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}</p> + +<h2 dir="rtl" id="في_هذه_الوحدة">في هذه الوحدة</h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li> + <li dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">البداية في الجافا سكربت</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li> +</ul> diff --git a/files/ar/learn/javascript/first_steps/index.html b/files/ar/learn/javascript/first_steps/index.html new file mode 100644 index 0000000000..66c8c8c2f8 --- /dev/null +++ b/files/ar/learn/javascript/first_steps/index.html @@ -0,0 +1,70 @@ +--- +title: الخطوات الأولى مع الجافاسكربت +slug: Learn/JavaScript/First_steps +tags: + - Landing + - Module + - NeedsTranslation + - TopicStub + - 'l10n:priority' + - أرقام + - برمجةسكربتات + - جافاسكربت + - دروس + - رياضيات + - عمليات حسابية + - مبتدئ + - متغيرات + - مصفوفات + - مقالة + - نصوص + - واجب +translation_of: Learn/JavaScript/First_steps +--- +<div>{{LearnSidebar}}</div> + +<p class="summary" dir="rtl">في اول دروس تعلم الجافاسكربت. ينبغي ان نجاوب عن اسئلة أساسية مثل "ماهي الجافاسكربت؟", "ماهي شكلها؟" و "مالذي تستطيع لغة الجافاسكربت عمله؟", قبل ما نبدأ الأمثلة العملية لكتابة اكواد الجافاسكربت. بعد ذلك سنناقش الأركان الأساسية بالتفصيل. مثل المتغيرات, النصوص, الأرقام و المصفوفات.</p> + +<h2 dir="rtl" id="متطلبات_مسبقة">متطلبات مسبقة</h2> + +<p dir="rtl">قبل ان تبدأ بهذه الدروس. لا تحتاج الى اي معرفة بالجافاسكربت, لكنك تحتاج خبرة بسيطة بكتابة اكواد HTML و CSS. ننصحك بهذه الدروس قبل البدء بتعلم الجافاسكربت:</p> + +<ul dir="rtl"> + <li><a href="https://developer.mozilla.org/ar/docs/Learn/Getting_started_with_the_web">البدء مع الويب</a> (الذي يحتوي على <a href="https://developer.mozilla.org/ar/docs/Learn/Getting_started_with_the_web/JavaScript_basics">مقدمة بسيطة بالجافاسكربت</a>).</li> + <li><a href="https://developer.mozilla.org/ar/docs/Learn/HTML/Introduction_to_HTML">مقدمة للغة الترميز الفائق</a>.</li> + <li><a href="https://developer.mozilla.org/ar/docs/Learn/CSS/Introduction_to_CSS">مقدمة لـ CSS</a>.</li> +</ul> + +<div class="note" dir="rtl"> +<p><strong>ملاحظة:</strong></p> +اذا كنت لا تستخدم كمبيوتر, لابتوب او اي جهاز لا يسمح لك بإنشاء ملفات جديدة يمكنك تجربة (اغلب) الاكواد بإستخدام احد الخدمات السحابية لكتابة الاكواد مثل<a href="http://jsbin.com/"> JSBin</a> أو <a href="https://thimble.mozilla.org/">Thimble</a></div> + +<h2 dir="rtl" id="دروس">دروس</h2> + +<dl> + <dt dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">ما هي الجافاسكربت؟</a></dt> + <dd dir="rtl">اهلا بك في دورة جافاسكربت للمبتدئين من MDN! في اول درس في هذه الدورة سنلقي نظرة على الجافاسكربت. سنجاوب بعض الاسئلة بشكل بسيط مثل "ماهي جافاسكربت؟", "ماذا تعمل الجافاسكربت؟", لنتأكد بأن تأخذ راحتك مع اللغة.</dd> + <dt dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">نظرة اولية على الجافاسكربت</a></dt> + <dd dir="rtl">الآن تعلمت الجافاسكربت من الناحية النظرية, وماذا يمكننا العمل بها. لنلقي نظرة على المميزات الأساسية بالجافاسكربت من الناحية العملية. في هذا الدرس سنبرمج لعبة "توقّع الرقم". خطوة بخطوة.</dd> + <dt dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">مالذي حصل؟ اصلاح اخطاء الجافاسكربت</a></dt> + <dd dir="rtl">عندما برمجت لعبة "توقّع الرقم" في الدرس السابق. ربما وجدت انها لا تعمل! لا تخف. في هذا الدرس سنقوم بتعلم كيف تبحث عن الاخطاء في لعبتك وكيفية اصلاحها.</dd> + <dt dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">تخزين المعلومات التي تحتاجها ــ المتغيرات</a></dt> + <dd dir="rtl">بعد قراءة الدروس الاخيرة ينبغي ان تعلم الآن ماهي الجافاسكربت و ماذا يمكنها ان تعمل من اجلك وكيف يمكنك استخدامها مع تقنيات الويب الأخرى وما هي مميزاتها الرئيسية بشكل مبسط. في هذا الدرس سنتعلم أحد أهم و أبسط الأشياء، المتغيرات. </dd> + <dt dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">الرياضيات بالجافاسكربت ــ الأرقام والعمليات الحسابية</a></dt> + <dd dir="rtl">عند هذه المرحلة من الدورة ينبغي أن نناقش الرياضيات في الجافاسكربت, كيف يمكننا إجراء العمليات الحسابية باللغة.</dd> + <dt dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">التعامل مع النصوص ــ النصوص بالجافاسكربت </a></dt> + <dd dir="rtl">بعد ذلك سنلقي نظرة على النصوص. في هذا الدرس ستتعلم كيف تتعامل مع النصوص. مثل انشاء النصوص. كتابة بعض الرموز. و جمع اكثر من نص مع بعض.</dd> + <dt dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">دوال للنصوص مفيدة</a></dt> + <dd dir="rtl">بما اننا تعلمنا اساسيات التعامل مع النصوص. لننتقل الى المرحلة التالية ولنفكر ماذا يمكننا ان نعمل بالنصوص. مثلا لنجد طول نص, دمج النصوص, استبدال احد الاحرف بحرف اخر. وغيرها.</dd> + <dt dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">المصفوفات</a></dt> + <dd dir="rtl">في آخر درس في هذه الدورة البسيطة، سنلقي نظرة على المصفوفات. طريقة مثالية لجمع بيانات تحت اسم متغير واحد. سنتعلم لماذا هذا مفيد، كيف انشاءها، الحصول على احد البيانات الموجودة، اضافة المزيد من البيانات، حذف بعض البيانات والمزيد</dd> +</dl> + +<h2 dir="rtl" id="الواجبات">الواجبات</h2> + +<p dir="rtl">في هذا الواجب ستختبر فهمك للدروس السابقة</p> + +<dl> + <dt dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">مصنع القصص الظريفة</a></dt> + <dd dir="rtl">في هذا الواجب سيطلب منك بإستخدام المعرفة التي اكتسبتها من الدروس السابقة كتابة برنامج يكتب قصة ظريفة عشوائية. استمتع!</dd> +</dl> diff --git a/files/ar/learn/javascript/first_steps/useful_string_methods/index.html b/files/ar/learn/javascript/first_steps/useful_string_methods/index.html new file mode 100644 index 0000000000..fac2541302 --- /dev/null +++ b/files/ar/learn/javascript/first_steps/useful_string_methods/index.html @@ -0,0 +1,684 @@ +--- +title: بعض الخصائص المفيدة للسلاسل الحرفية +slug: Learn/JavaScript/First_steps/Useful_string_methods +tags: + - استبدال + - تعلم + - تقطيع + - جافا سكربت + - حالة + - حرف صغير + - حرف كبير + - سلسلة حرفية + - مبتديء + - مقال +translation_of: Learn/JavaScript/First_steps/Useful_string_methods +--- +<div dir="rtl">{{LearnSidebar}}</div> + +<div dir="rtl">{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</div> + +<p class="summary" dir="rtl">الآن بعدما تعلمنا أساسيات السلاسل، دعنا نبدأ في التفكير وتجربة العمليات التي يمكننا القيام بها على هذه السلاسل، مثل إيجاد طول السلسلة، ربط السلاسل وأيضًا طريقة تقسيمها إلى أجزاء، ومعرفة كيفية استبدال حرف بآخر، وأشياء أخرى.</p> + +<table class="learn-box standard-table" dir="rtl"> + <tbody> + <tr> + <th scope="row">المتطلبات اﻷساسية:</th> + <td>أساسيات استخدام الحاسوب ، فهم أساسيات HTML و CSS ، وفهم ماهية الجافاسكربت.</td> + </tr> + <tr> + <th scope="row">الهدف:</th> + <td>فهم أن سلاسل الحروف strings هو عبارة عن كائنات ، وتعلم كيفية استخدام الطرق المتاحة لهذه الكائنات لمعالجة سلاسل الحروف strings .</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="السلاسل_ككائنات">السلاسل ككائنات</h2> + +<p dir="rtl" id="Useful_string_methods">معظم اﻷشياء في الجافا سكريبت هي كائنات. فعند إنشاء سلسلة، على سبيل المثال بإستخدام :</p> + +<pre class="brush: js notranslate" dir="rtl">let string = 'This is my string';</pre> + +<p dir="rtl">يصبح المتغير الخاص بك مثل كائن سلسلة، وبناءًا على ذلك يصبح لديه العديد من الخصائص والأساليب المتاحة له والتي يمكن تنفيذها عليه. يمكنك رؤية ذلك إذا انتقلت إلى صفحة الكائن {{jsxref("String")}} وألقيت نظرة على القائمة الموجودة في هذه الصفحة بالأسفل.</p> + +<p dir="rtl"><strong>اﻵن وقبل أن يبدأ عقلك في التوهان أو التشتيت، لا تقلق!</strong> أنت لست بحاجة لمعرفة هذه اﻷشياء في وقت مبكر من رحلة تعلمك للجافا سكريبت. وهناك عدد قليل من الاحتمالات لإستخدامك هذا كثيرًا والذي سننظر إليه هنا في هذا المقال.</p> + +<p dir="rtl">دعنا نجرب بعض اﻷمثلة داخل <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">الكونسول الخاص بالمتصفح</a>.</p> + +<h3 dir="rtl" id="إيجاد_طول_السلسلة">إيجاد طول السلسلة</h3> + +<p dir="rtl">هذا سهل للغاية — أنت ببساطة تستخدم هذه الخاصية لإيجاد طول السلسلة {{jsxref("String.prototype.length", "length")}} حاول إتباع الأسطر التالية :</p> + +<pre class="brush: js notranslate" dir="rtl">// هنا نقوم بإنشاء متغير يحتوي على سلسلة نصية +let browserType = 'العربية'; + +// هنا نقوم بكتابة اسم المتغير متبوعًا بالخاصية لمعرفة طول القيمة الموجودة داخل المتغير +browserType.length;</pre> + +<p dir="rtl">النتيجة ستكون 7, ﻷن كلمة "العربية" تحتوي على 7 أحرف. وهذه الخاصية مفيدة لعدة أسباب؛ على سبيل المثال، قد ترغب في العثور على أطول سلسلة نصية من اﻷسماء حتى تتمكن من عرضها بترتيب الطول، أو إخبار المستخدم أن اسم المستخدم الذي قام بإدخاله في حقل النموذج (حقل الإدخال) هو طويل جدًا. (في حالة تجاوز الاسم طول معين.)</p> + +<h3 dir="rtl" id="استرجاع_استدعاء_حرف_سلسلة_معين">استرجاع (استدعاء) حرف سلسلة معين</h3> + +<p dir="rtl">في ملاحظة ذات صلة، يمكن إرجاع أي حرف داخل السلسلة باستخدام <strong>الاقواس المربعة</strong> — هذا يعني إدراج أو تضمين اﻷقواس المربعة (<code>[]</code>) في نهاية اسم المتغيرالخاص بك. وفي داخل اﻷقواس ستقوم بكتابة رقم الحرف الذي تريد إرجاعه، لذا على سبيل المثال إذا كنت تريد إرجاع الحرف اﻷول فستقوم بإتباع الكود التالي:</p> + +<pre class="brush: js notranslate" dir="rtl">browserType[0];</pre> + +<p dir="rtl">تذكر: الكمبيوتر يبدأ العد من 0 وليس1! ويمكنك استخدام هذا على سبيل المثال للعثور على الحرف اﻷول من السلسلة وترتيبها أبجديًا.</p> + +<p dir="rtl">لكي نستدعي الحرف اﻷخير ﻷي سلسلة حروف ، سوف نستخدم السطر التالي , باﻹضافة إلى استخدام خاصية <code>length</code> التي ذكرناها في اﻷعلى:</p> + +<pre class="brush: js notranslate" dir="rtl">browserType[browserType.length-1];</pre> + +<p dir="rtl">إن طول "mozilla" هو 7 حروف , ولكن ﻷن العد يبدأ من 0 , فإن موقع الحرف هو 6; باستخدام <code>length-1</code> يعطينا الحرف اﻷخير.</p> + +<h3 dir="rtl" id="إيجاد_سلسلة_حروف_فرعية_داخل_السلسلة_الرئيسية_واستخراجها">إيجاد سلسلة حروف فرعية داخل السلسلة الرئيسية واستخراجها</h3> + +<p dir="rtl">أحيانًا تريد أن تسدعي بعض الحروف الموجودة داخل السلسلة الكبيرة (<em>نقول بشكل عام إذا كانت سلسلة فرعية موجودة داخل السلسلة اﻷم </em>). نستطيع فعل هذا بواسطة استخدام طريقة {{jsxref("String.prototype.indexOf()", "indexOf()")}} , والتي تحتوي عامل {{glossary("parameter")}} — السلسلة الفرعية التي نريد أن نستدعيها.</p> + +<ol dir="rtl"> + <li>جرب هذا: + <pre class="brush: js notranslate">browserType.indexOf('zilla');</pre> + والنتيجة هي 2 , ﻷن سلسلة الحروف الفرعية "zilla" تبدأ من الموقع 2 (0, 1, 2 — أي 3 حروف) بداخل "mozilla". مثل هذا الكود من الممكن أن يستخدم لفلترة السلاسل الحرفية. على سبيل المثال , لدينا قائمة بالعديد من عنواين الويب ونريد أن نستدعي فقط العنوان الذي يحتوي كلمة "mozilla" .</li> +</ol> + +<ol dir="rtl" start="2"> + <li>هناك طريقة أخري لذلك , التي من الممكن أن تكون فعالة . جرب المثال التالي: + <pre class="brush: js notranslate">browserType.indexOf('vanilla');</pre> + يجب أن تكون النتيجة هي <code>-1</code> — هذا ﻷن سلسلة الحروف التي نبحث عنها في هذه الحالة , 'vanilla', غير موجودة في السلسلة الرئيسية.<br> + <br> + يمكن استخدام هذا ﻹيجاد كل حالات السلسلة حيث ﻻ تحتوي السلسلة الفرعية 'mozilla',( أو فعل ذلك باستخدام عامل النفي ، <code>!==</code>) : + + <pre class="brush: js notranslate">if(browserType.indexOf('mozilla') === -1) { + // do stuff with the string if the 'mozilla' + // substring is NOT contained within it +} + +if(browserType.indexOf('mozilla') !== -1) { + // do stuff with the string if the 'mozilla' + // substring IS contained within it +}</pre> + </li> + <li>إذا علمت أين تبدأ السلسلة الفرعية داخل السلسلة الرئيسية , وتعلم الحرف اﻷخير الذي تريده ,فإن {{jsxref("String.prototype.slice()", "slice()")}} تستخدم لاستدعاءه . جرب المثال التالي: + <pre class="brush: js notranslate">browserType.slice(0,3);</pre> + النتيجة هي "moz" — البرامتر اﻷولparameter يشير إلى موقع الحرف الذي نريد أن نبدأ البحث من عنده , البرامتر الثاني parameterيشير إلى موقع الحرف الذي يوجد بعد آخر حرف تم استدعاءه. لذلك التقطيع slice يحدث بداية من الحرف اﻷول حتى الحرف اﻷخير لكنه ﻻ يشمل الحرف اﻷخير . في هذا المثال , من البداية 0 ، فإن البرامتر الثاني يساوي طول السلسلة التي نريد استدعائها.</li> + <li>أيضًا ، إذا أردت استدعاء كل الحروف المتبقية بعد حرف معين , فإننا ﻻ نحتاج البرامتر الثاني! بدلًا من ذلك نحتاج فقط موقع الحرف الذي نريد أن نستدعي الحروف المتبقية بعده. جرب المثال التالي: + <pre class="brush: js notranslate">browserType.slice(2);</pre> + والنتيجة هي "zilla" — وهذا ﻷن الحرف الذي رقمه 2 هو الحرف z ، وﻷننا لم نكتب البرامتر الثاني ، فإن النتيجة هي طباعة كل الحروف بعد هذا الحرف . </li> +</ol> + +<div class="note" dir="rtl"> +<p><strong>ملاحظة </strong>: البرامتر الثاني parameter للــ <code>slice()</code> هو اختياري : إذا لم نكتبه ، فإن النتيجة تكون حتى نهاية السلسلة الرئيسية. أيضًا هناك خيار آخر ، راجع صفحة ; {{jsxref("String.prototype.slice()", "slice()")}} للاطلاع على المزيد حول slice.</p> +</div> + +<h3 dir="rtl" id="تغيير_حالة_الحروف">تغيير حالة الحروف</h3> + +<p dir="rtl">خاصية {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}} و {{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}} تستخدم لتحويل الحروف لحروف صغيرة أو حروف كبيرة, على التوالي. وهذا مفيد حيث على سبيل المثال إذا أردنا تهيئة البيانات التي أدخلها المستخدم قبل حفظها في قاعدة البيانات . </p> + +<p dir="rtl">دعونا نجرب المثال التالي ونرى ما سيحدث:</p> + +<pre class="brush: js notranslate" dir="rtl">let radData = 'My NaMe Is HeSHam'; +radData.toLowerCase(); +radData.toUpperCase();</pre> + +<h3 dir="rtl" id="تحديث_أجزاء_من_السلسلة">تحديث أجزاء من السلسلة</h3> + +<p dir="rtl">نستطيع استبدال سلسلة حروف بأخرى داخل السلسلة الرئيسية باستخدام خاصية .{{jsxref("String.prototype.replace()", "replace()")}} إنها خاصية بسيطة جدًا ، ولكنها تملك خيارات متقدمة سوف نستخدمها ولكن ليس اﻵن .</p> + +<p dir="rtl">هذه الخاصية لها 2 بارامتر ( الحروف الذي تريد استبدالها, والحروف الجديدة). جرب هذا المثال:</p> + +<pre class="brush: js notranslate" dir="rtl">browserType.replace('moz','van');</pre> + +<p dir="rtl">والنتيجة هي طباعة كلمة "vanilla" في الكونسول. ولكن إذا تفحصنا قيمة . <code>browserType</code>,فإنها ما تزال "mozilla" . لتحديث قيمة المتغير <code>browserType</code> حقيقة, سوف نحتاج إلى تحديد قيمة المتغير للقيمة التي نتجت لدينا ؛ حيث أن قيمة المتغير ﻻ تتحدث تلقائيًا . لذلك نحن بحاجة لكتابة هذا الكود: </p> + +<pre class="brush: js notranslate">browserType = browserType.replace('moz','van');</pre> + +<h2 dir="rtl" id="أمثلة_عملية_للتعلم">أمثلة عملية للتعلم</h2> + +<p dir="rtl">في هذا القسم سوف نتعلم كتابة كود لمعالجة السلاسل الحرفية. في كل مثال باﻷسفل , لدينا مصفوفة من العبارات ، و حلقات تكرارية لتنفيذ القيم في المصفوفة وعرضها في قائمة نقطية. ﻻ تحتاج إلى معرفة المصفوفات والحلقات التكرارية اﻵن ( سوف تُشرح في مقالات مستقبلية). كل ما تحتاجه في كل مثال هو كتابة الكود الذي سوف يعرض العبارات في الهيئة التي نريدها.</p> + +<p dir="rtl">كل مثال يحتوي على زر "reset" حيث يمكن إرجاع الكود إلى حالته اﻷصلية في حالة الخطأ أو أن الحل لم يعمل جيدًا ، وهناك زر "Show solution" يمكن الضغط عليه لترى اﻹجابة المحتملة إذا واجهتك مشكلة بالفعل.</p> + +<h3 dir="rtl" id="معالجة_رسائل_التهنئة">معالجة رسائل التهنئة</h3> + +<p dir="rtl">في أول تمرين سوف نبدأ بشيء بسيط — حيث لدينا مصفوفة من رسائل التهنئة ، ولكننا نريد أن نرتبها في قائمة مثل رسائل العيد. سوف نستخدم الحاﻻت الشرطية <code>if( ... )</code> ، لطباعة الجمل في قائمة إذا كانت رسائل تهنئة.</p> + +<ol dir="rtl"> + <li>نفكر أوﻻً حول كيفية معرفة رسائل التهنئة في كل عبارة. هل هذه العبارة موجودة في الرسائل ، وما هي الطريقة التي نستخدمها لمعرفة ذلك ؟</li> + <li>سوف نحتاج إلى كتابة حالة شرطية .</li> + <li>تلميح: في هذا المثال من الفيد اختبار الطريقة لمعرفة النتيجة الصحيحة.</li> +</ol> + +<div class="hidden" dir="rtl"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><h2>Live output</h2> + +<div class="output" style="min-height: 125px;"> + +<ul> + +</ul> + +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="playable-code" style="height: 290px; width: 95%"> +const list = document.querySelector('.output ul'); +list.innerHTML = ''; +let greetings = ['Happy Birthday!', + 'Happy eid Day', + 'A happy Eid to all the family', + 'You\'re all I want for Eid', + 'Get well soon']; + +for (let i = 0; i < greetings.length; i++) { + let input = greetings[i]; + // Your conditional test needs to go inside the parentheses + // in the line below, replacing what's currently there + if (greetings[i]) { + let listItem = document.createElement('li'); + listItem.textContent = input; + list.appendChild(listItem); + } +} +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div> +</pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">const textarea = document.getElementById('code'); +const reset = document.getElementById('reset'); +const solution = document.getElementById('solution'); +let code = textarea.value; +let userEntry = textarea.value; + +function updateCode() { + eval(textarea.value); +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = jsSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +const jsSolution = 'const list = document.querySelector(\'.output ul\');' + +'\nlist.innerHTML = \'\';' + +'\nlet greetings = [\'Happy Birthday!\',' + +'\n \'Happy Eid Day\',' + +'\n \'A happy Eid to all the family\',' + +'\n \'You\\\'re all I want for Eid\',' + +'\n \'Get well soon\'];' + +'\n' + +'\nfor (let i = 0; i < greetings.length; i++) {' + +'\n let input = greetings[i];' + +'\n if (greetings[i].indexOf(\'Christmas\') !== -1) {' + +'\n let result = input;' + +'\n let listItem = document.createElement(\'li\');' + +'\n listItem.textContent = result;' + +'\n list.appendChild(listItem);' + +'\n }' + +'\n}'; + +let solutionEntry = jsSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + const scrollPos = textarea.scrollTop; + const caretPos = textarea.selectionStart; + const front = (textarea.value).substring(0, caretPos); + const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p dir="rtl">{{ EmbedLiveSample('Playable_code', '100%', 590, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 dir="rtl" id="إصلاح_الحروف_الكبيرة">إصلاح الحروف الكبيرة</h3> + +<p dir="rtl">في هذا التمرين لدينا أسماء المدن في المملكة المتحدة، ولكن الحروف الكبيرة مكتوبة بشكل عبثي . نريد منك تغييرها للحروف الصغيرة، ماعدا الحرف اﻷول يكون كبير . وأفضل طريق لعمل ذلك هو :</p> + +<ol dir="rtl"> + <li>حول كل كلمة في متغير <code>input</code> للحروف الصغيرة وخزنها في متغير جديد.</li> + <li>اقتنص الحرف اﻷول من كل كلمة في هذا المتغير الجديد وخزنه في متغير آخر.</li> + <li>استخدم المتغير اﻷخير لاستبدال الحرف اﻷول من الكلمة بحرف كبير. وخزن نتيجة عملية الاستبدال لمتغير جديد آخر.</li> + <li>غيِّر قيمة متغير <code>result</code> لتساوي النتيجة النهائية.</li> +</ol> + +<div class="note" dir="rtl"> +<p><strong>ملحوظة: </strong>البرامتر الخاص بالطريقة المستخدمة ليس فقط الحروف ، بل يمكن أن يكون متغير أيضًا .</p> +</div> + +<div class="hidden" dir="rtl"> +<h6 id="Playable_code_2">Playable code 2</h6> + +<pre class="brush: html notranslate"><h2>Live output</h2> + +<div class="output" style="min-height: 125px;"> + +<ul> + +</ul> + +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="playable-code" style="height: 250px; width: 95%"> +const list = document.querySelector('.output ul'); +list.innerHTML = ''; +let cities = ['lonDon', 'ManCHESTer', 'BiRmiNGHAM', 'liVERpoOL']; + +for (let i = 0; i < cities.length; i++) { + let input = cities[i]; + // write your code just below here + + let result = input; + let listItem = document.createElement('li'); + listItem.textContent = result; + list.appendChild(listItem); +} +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div> +</pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">const textarea = document.getElementById('code'); +const reset = document.getElementById('reset'); +const solution = document.getElementById('solution'); +let code = textarea.value; +let userEntry = textarea.value; + +function updateCode() { + eval(textarea.value); +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = jsSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +const jsSolution = 'const list = document.querySelector(\'.output ul\');' + +'\nlist.innerHTML = \'\';' + +'\nlet cities = [\'lonDon\', \'ManCHESTer\', \'BiRmiNGHAM\', \'liVERpoOL\'];' + +'\n' + +'\nfor (let i = 0; i < cities.length; i++) {' + +'\n let input = cities[i];' + +'\n let lower = input.toLowerCase();' + +'\n let firstLetter = lower.slice(0,1);' + +'\n let capitalized = lower.replace(firstLetter,firstLetter.toUpperCase());' + +'\n let result = capitalized;' + +'\n let listItem = document.createElement(\'li\');' + +'\n listItem.textContent = result;' + +'\n list.appendChild(listItem);' + +'\n' + +'\n}'; + +let solutionEntry = jsSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + const scrollPos = textarea.scrollTop; + const caretPos = textarea.selectionStart; + const front = (textarea.value).substring(0, caretPos); + const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p dir="rtl">{{ EmbedLiveSample('Playable_code_2', '100%', 550, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 dir="rtl" id="عمل_عبارة_جديدة_من_العبارة_اﻷصلية">عمل عبارة جديدة من العبارة اﻷصلية</h3> + +<p dir="rtl">في هذا التمرين اﻷخير ، المصفوفة تحتوي على مجموعة من العبارات التي تحتوي معلومات عن محطات القطار في شمال انجلترا. هذه الكلمات تحتوي على ثلاثة حروف لكود المحطة ، متبوعًا بكود القطار، متبوعًا بالفاصلة المنقوطة، متبوعًا اسم المحطة. على سبيل المثال:</p> + +<pre dir="rtl">MAN675847583748sjt567654;Manchester Piccadilly</pre> + +<p dir="rtl">نريد استخراج كود المحطة والاسم ، ووضعهم جميعًا في عبارة واحدة بالهيئة التالية:</p> + +<pre dir="rtl">MAN: Manchester Piccadilly</pre> + +<p dir="rtl">نقترح أن تتبع هذه الخطوات:</p> + +<ol dir="rtl"> + <li>استخرج الثلاثة أحرف لكود المحطة وخزنه في متغير جديد.</li> + <li>أوجد رقم موقع حرف الفاصلة المنقوطة ; .</li> + <li>استخرج اسم المحطة باستخدام رقم موقع الفاصلة المنقوطة كنقطة مرجعية ، وخزنه في متغير جديد .</li> + <li>اربط المتغيرين الجديدين مع العبارة لعمل عبارة جديدة .</li> + <li>غيِّر قيمة المتغير <code>result</code> لتساوي العبارة النهائية، وليست العبارة الأصلية <code>input</code>.</li> +</ol> + +<div class="hidden" dir="rtl"> +<h6 id="Playable_code_3">Playable code 3</h6> + +<pre class="brush: html notranslate"><h2>Live output</h2> + +<div class="output" style="min-height: 125px;"> + +<ul> + +</ul> + +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="playable-code" style="height: 285px; width: 95%"> +const list = document.querySelector('.output ul'); +list.innerHTML = ''; +let stations = ['MAN675847583748sjt567654;Manchester Piccadilly', + 'GNF576746573fhdg4737dh4;Greenfield', + 'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street', + 'SYB4f65hf75f736463;Stalybridge', + 'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield']; + +for (let i = 0; i < stations.length; i++) { + let input = stations[i]; + // write your code just below here + + let result = input; + let listItem = document.createElement('li'); + listItem.textContent = result; + list.appendChild(listItem); +} +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div> +</pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +} +</pre> + +<pre class="brush: js notranslate">const textarea = document.getElementById('code'); +const reset = document.getElementById('reset'); +const solution = document.getElementById('solution'); +let code = textarea.value; +let userEntry = textarea.value; + +function updateCode() { + eval(textarea.value); +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = jsSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +const jsSolution = 'const list = document.querySelector(\'.output ul\');' + +'\nlist.innerHTML = \'\';' + +'\nlet stations = [\'MAN675847583748sjt567654;Manchester Piccadilly\',' + +'\n \'GNF576746573fhdg4737dh4;Greenfield\',' + +'\n \'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street\',' + +'\n \'SYB4f65hf75f736463;Stalybridge\',' + +'\n \'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield\'];' + +'\n' + +'\nfor (let i = 0; i < stations.length; i++) {' + +'\n let input = stations[i];' + +'\n let code = input.slice(0,3);' + +'\n let semiC = input.indexOf(\';\');' + +'\n let name = input.slice(semiC + 1);' + +'\n let result = code + \': \' + name;' + +'\n let listItem = document.createElement(\'li\');' + +'\n listItem.textContent = result;' + +'\n list.appendChild(listItem);' + +'\n}'; + +let solutionEntry = jsSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + const scrollPos = textarea.scrollTop; + const caretPos = textarea.selectionStart; + const front = (textarea.value).substring(0, caretPos); + const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p dir="rtl">{{ EmbedLiveSample('Playable_code_3', '100%', 585, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 dir="rtl" id="اختبر_مهاراتك!">اختبر مهاراتك!</h2> + +<p dir="rtl">لقد وصلنا لنهاية هذا المقال. ولكن هل تستطيع أن تتذكر المعلومات المهمة؟ تستطيع أن تجد بعض الاختبارات لتثبت هذه المعلومات في الذاكرة قبل أن تذهب __ <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Test_your_skills:_Strings">اختبر مهاراتك : السلاسل الحرفية</a>.</p> + +<h2 dir="rtl" id="الخاتمة">الخاتمة</h2> + +<p dir="rtl">ﻻ نستطيع الهروب من الحقيقة بأنه القدرة على معالجة الكلمات والجُمَل في البرمجة هو في غاية اﻷهمية __ بخاصة في الجافا سكربت، مثل مواقع التواصل مع الناس. هذا المقال يعطيك اﻷساسيات التي تحتاج معرفتها حول معالجة سلاسل الحروف (العبارات). هذا يجب أن يفيدك جيدًا عند قراءة مواضيع معقدة في المستقبل. اﻵن لنذهب للنظر في النوع الرئيسي من البيانات التي نحتاج للتركيز عليها __ المصفوفات arrays .</p> + +<p dir="rtl">تمت بحمد الله.</p> + +<p dir="rtl">{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</p> + +<h2 dir="rtl" id="في_هذه_الوحدة">في هذه الوحدة</h2> + +<ul> + <li dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li> + <li dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li> + <li dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li> + <li dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li> + <li dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li> + <li dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li> + <li dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">بعض الخصائص المفيدة للسلاسل الحرفية</a></li> + <li dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li> + <li dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li> +</ul> diff --git a/files/ar/learn/javascript/index.html b/files/ar/learn/javascript/index.html new file mode 100644 index 0000000000..6677754e3d --- /dev/null +++ b/files/ar/learn/javascript/index.html @@ -0,0 +1,58 @@ +--- +title: جافاسكريبت Javascript +slug: Learn/JavaScript +tags: + - Beginner + - CodingScripting + - JavaScript + - Landing + - NeedsTranslation + - Topic + - TopicStub + - جافاسكريبت + - ساعد في الترجمة + - مبتدئ +translation_of: Learn/JavaScript +--- +<p class="summary" dir="rtl">جافاسكريبت هي لغة برمجة تسمح لك بتوظيف أشياء أكثر تعقيدا في صفحات الويب -- في كل مرة يقوم فيها موقع بأكثر من مجرد عرض معلومات بسيطة ساكنة -- كعرض تغييرات وتحديثات للصفحة , خرائط تفاعلية , رسومات ثنائية او ثلاثية الابعاد متحركة ومتفاعل معها , التمرير في خزانات كبيرة من فيديوهات ... الخ. يمكنك بالتأكيد المراهنة على أن اللغة تطورت عما كانت عليه وهي دائما في تقدم مستمر.</p> + +<h2 dir="rtl" id="مسار_التعلم">مسار التعلم</h2> + +<p dir="rtl">لغة جافاسكربت تعتبر اكثر تعقيدا نظريا من التكنولوجيات التابعة لها من امثال HTML و CSS . قبل انطلاقك في تعلم جافاسكريبت , ينصحك اولا بان تصبح متعودا على هاتين التقنيتين اولا , وربما تقنيات اخرى ايضا. ابدا عن طريق المقالات و الدورات التالية :</p> + +<ul dir="rtl"> + <li><a href="/en-US/docs/Learn/Getting_started_with_the_web">إنطلاقتك مع الانترنيت -الويب-</a></li> + <li><a href="/en-US/docs/Web/Guide/HTML/Introduction">مقدمة الى HTML</a></li> + <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">مقدمة الى CSS </a></li> +</ul> + +<p dir="rtl">المعرفة و الخبرة بلغات البرمجة السابقة يمكنه كذلك ان يساعدك</p> + +<p dir="rtl">بعد أن تصبح اكثر تعودا على مبادئ جافاسكريت . يمكنك ام تنطلق في مواضيع اكثر تعقيدا , مثال ذلك مايلي :</p> + +<ul dir="rtl"> + <li>جافاسكريبت بعمق <a href="/en-US/docs/Web/JavaScript/Guide">دليل جافاسكريبت</a></li> + <li><a href="/en-US/docs/Web/API"> واجهة تطبيقات HTML5</a></li> +</ul> + +<h2 dir="rtl" id="الوحدات">الوحدات</h2> + +<p dir="rtl">هذا الموضوع يحتوي على الوحدات التالية حسب الترتيب المقرح الانطلاق منه :</p> + +<dl> + <dt dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps">الخطوات الأولى في جافاسكريب</a></dt> + <dd dir="rtl">في الوحدة الاولى , سنجيب عن بعض الاسئلة الجوهرية مثل ’ماهي جافاسكريبت؟’ , ’كيف تبدو اللغة؟’ و ’ماذا يمكنها ان تفعل’ , قبل الانطلاق الى تجربتك العملية الاولى في كتابة اللغة. بعد ذلك ننقاش مميزات اللغة بالتفصيل كالمتغيرات , السلاسل , الارقام و صفائف وتتظيمات البيانات</dd> + <dt dir="rtl"><a href="/en-US/docs/Learn/JavaScript/Building_blocks">قواعد بناء و أساسيات لغة جافاسكريبت</a></dt> + <dd dir="rtl">في هذه الوحدة سنتابع تغطيتنا لكل مبادئ ومفاتيح لغة جافاسكريبت مع ادارة الانتباه الى اكثر طرق البرمجة شيوعا كالجمل الشرطية , الحلقات , الوظائف و الاحداث . لقد رأيت واستعملت هذه الاشياء من قبل في هذا الدرس لكن مررنا بها سريعا , هنا سندرسها بالتفصيل .</dd> + <dt dir="rtl"><a href="/en-US/docs/Learn/JavaScript/Objects">تقديم الكائنات في جافاسكريبت</a></dt> + <dd dir="rtl">في لغة الجافاسكريبت معظم معظم العمل سيكون مع الاجسام , انطلاقات من اساسيات اللغة كالحلقات والسلاسل وصولا الى واجهات تطبيقات المتصفح المبنية بواسطة جافاسكريبت. يمكنك كتابة اجسامك لتشمل وتغلف الوظائف والمتغيرات في حزم فعالة. طبيعة جافاسكريبت الجسمية التوجيه مهمة جدا اذا اردت الذهاب بعيدا في تعلم اللغة و كتابة برامج اكثر فعالية , لهذا نوفر لك هذه الوحدة لتساعدك. هنا نعلمك الاجسام وطريقة البناء بالتفصيل , تعلم كيفية كتابة اجسامك الخاصة , شرح ماهية بيانات JSON وكيفية عملها مع بعض.</dd> + <dt dir="rtl"><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">تطبيقات واجهات الويب من جهة المستخدم</a></dt> + <dd dir="rtl">عند كتابة جافاسكربت لمواقع الويب او التطبيقات , لن تذهب بعيدا من دون الاحاطة بواجهات التطبيقات API , هذه الواجهات يجب ان تعمل على مختاف المتصفحات و انظمة التشغيل التي بمكن ان تستخدم الموقع , وحتى اذا كنت تجمع بياناتك من جهة اخرى.في هذه الوحدة سنتعرف على ماهية واجهات التطبيقات , وكيفية استعمال اشهرها التي ستمر على اسخدامها عند عملك في التطوير.</dd> +</dl> + +<h2 dir="rtl" id="أنظر_ايضا">أنظر ايضا</h2> + +<dl> + <dt dir="rtl"><a href="https://www.youtube.com/user/codingmath">الرياضيات المستعملة في البرمجة</a></dt> + <dt dir="rtl">سلسلة من الفيديوهات الممتازة لتعليمك الرياضيات التي تحتاجها لكي تصبح مبرمجا فعالا بواسطة <a href="https://twitter.com/bit101">Keith Peters</a>.</dt> +</dl> diff --git a/files/ar/learn/javascript/objects/basics/index.html b/files/ar/learn/javascript/objects/basics/index.html new file mode 100644 index 0000000000..1d018b179b --- /dev/null +++ b/files/ar/learn/javascript/objects/basics/index.html @@ -0,0 +1,258 @@ +--- +title: اساسيات الكائن في جافاسكريبت +slug: Learn/JavaScript/Objects/Basics +translation_of: Learn/JavaScript/Objects/Basics +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</div> + +<p class="summary" dir="rtl">في المادة الأولى من هذا الدرس سنتطرق إلى كائنات الجافا سكريبت، ثم سنلقي نظرة على التركيبة الأساسية لكائن الجافاسكريبت، ومن ثم إعادة النظر في بعض الميزات التي سبق وأن درسناها في وقت سابق من هذه الدورة التدريبية. علينا التأكيد أن العديد من الميزات التي قمت بالفعل بالتعامل معها هي في الحقيقة كائنات.</p> + +<table class="learn-box standard-table" dir="rtl"> + <tbody> + <tr> + <th scope="row">المتطلبات الأساسية:</th> + <td><span style="display: none;"> </span><span style="display: none;"> </span>دراية لا بأس بها بخصوص الحاسوب، الإلمام بمبادئ وأساسيات HTML و CSS، وبطبيعة الحال التمكن من أساسيات الجافاسكريبت (شاهد <a href="/en-US/docs/Learn/JavaScript/First_steps">First steps</a> وأيضا <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Building blocks</a>).<span style="display: none;"> </span><span style="display: none;"> </span></td> + </tr> + <tr> + <th scope="row">الهدف :</th> + <td>التمكن من فهم لغة البرمجة كائنية التوجه وكيف أن (" معظم الأشياء كائنات ") في الجافا سكريبت<br> + وأيضا الشروع في العمل مع كائنات الجافا سكريبت.</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="أساسيات_الكائن"><strong>أساسيات الكائن</strong></h2> + +<div style="font-size: 15px; font-family: 'tahoma';"> +<p dir="rtl">أولا وقبل كل شيء، قم بتحميل نسخة من الملف التالي <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs.html">oojs.html</a>. هذا الملف يتضمن العنصر — {{HTMLElement("script")}} سنستخدمه في كتابة الكود الخاص بنا، وعنصر الإدخال {{HTMLElement("input")}} سنستخدمه لإدخال بعض التعليمات البرمجية، وبعض المتغيرات والوظائف لاستخراج النتائج من حقل المدخلات ووضعها في العنصر {{HTMLElement("p")}}. سنستخدم هذه العناصر كأساس، لدراسة أساسيات بناء الكائن.</p> + +<p dir="rtl">كما هو الحال مع الكثير من الأشياء في جافا سكريبت، إنشاء كائن غالباً ما يبدأ بتعريف وتهيئة متغير.<br> + حاول إدخال التعليمة البرمجية أدناه في الملف الخاص بك، ثم قم بحفظ وتحديث:</p> + +<pre class="brush: js">var person = {};</pre> + +<p dir="rtl">قم بإدخال person إلى حقل المدخلات الخاص بك واضغط على الزر button، لتحصل على النتيجة التالية:</p> + +<pre class="brush: js">[object Object]</pre> + +<p dir="rtl">تهانينا، لقد أنشأت للتو أول كائن خاص بك. أنجزت المهمة! لكن هذا كائن فارغ، دعونا نقوم بتحديث هذ الكائن ليصبح على هذا الشكل:</p> + +<pre class="brush: js">var person = { + name : ['Bob', 'Smith'], + age : 32, + gender : 'male', + interests : ['music', 'skiing'], + bio : function() { + alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.'); + }, + greeting: function() { + alert('Hi! I\'m ' + this.name[0] + '.'); + } +}; +</pre> + +<p dir="rtl">بعد الحفظ والتحديث، قم بإدخال التعليمات البرمجية التالية واحدة تلو الاخرى في حقل المدخلات الخاص بك:</p> + +<pre class="brush: js">person.name[0] +person.age +person.interests[1] +person.bio() +person.greeting() +</pre> + +<p dir="rtl">لقد حصلت الآن على بعض البيانات والوظائف من داخل الكائن الخاص بك، جميل! أصبحت الآن قادرا على الوصول إلى البعض من التركيبة الاساسية للكائن.</p> + +<div class="note" dir="rtl"> +<p><strong>ملاحظة </strong>: إذا واجهتك صعوبة في الحصول على هذا العمل، حاول مقارنة التعليمات البرمجية الخاصة بك مع النسخة لدينا، انظر <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-finished.html">oojs-finished.html</a> (يمكنك ايضا <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-finished.html">see it running live</a>). من الأخطاء الشائعة أثناء العمل مع الكائنات هو وضع فاصلة في نهاية آخر العضو — وهذا سوف يسبب خطأ.</p> +</div> + +<p dir="rtl">هذا ما يحدث هنا؟ لدينا كائن يتكون من عدة أعضاء، لكل واحد منهم اسماً (مثل name و age أعلاه)، وقيمة ( مثل ['Bob', 'Smith'] و 32). كل زوج (name: value) يجب أن يفصلا بفاصلة، والاسم والقيمة في كل حالة مفصولة بفاصلة منقوطة. فيما تكون دائماً، تركيبة الكائن الأساسية على هذا النحو :</p> + +<pre class="brush: js">var objectName = { + member1Name : member1Value, + member2Name : member2Value, + member3Name : member3Value +}</pre> + +<p dir="rtl">قيمة العضو في الكائن يمكن أن تكون أي شيء، في الكائن person لدينا سلسلة نصية، وقيمة رقمية، ومصفوفتان، ووظيفتان. العناصر الأربعة الأولى تسمى عناصر البيانات، ويشار إليها <strong>بخصائص الكائن </strong>(object properties). والعنصرين الأخيرين هما من الوظائف التي تسمح للكائن أن يفعل شيئا مع تلك البيانات، ويشار إليها <strong>بوظائف الكائن</strong> (object methods).</p> + +<p dir="rtl">يسمى هذا النوع من الكائنات بـ<strong> object literal</strong> — لقد كتبنا حرفيا محتويات الكائن إلى أن وصلنا إلى إنشائه. هذا على النقيض من الكائنات المبنية على الأصناف (classes)، والتي سوف نتطرق إليها في وقت لاحق.</p> + +<p dir="rtl">من الشائع جدا إنشاء كائن باستخدام object literal لنقل سلسلة من البيانات الهيكلية، البيانات المتصلة بطريقة ما، على سبيل المثال إرسال طلب إلى الخادم (server) لوضعها في قاعدة البيانات. إرسال كائن واحد سيكون أكثر كفاءة بكثير من إرسال عدة عناصر على حدة، وأسهل مقارنة بالعمل مع المصفوفة (Array)، حينما تريد تحديد عناصر فردية حسب الاسم.</p> + +<h2 dir="rtl" id="رمز_النقطة">رمز النقطة</h2> + +<p dir="rtl">أعلاه، يمكنك الوصول لخصائص الكائن ووظائفه باستخدام رمز النقطة.<br> + اسم الكائن (person) بمثابة <strong>namespace</strong> - يجب أن يتم ادراجه أولا قبل الوصول إلى أي شيء <strong>مغلف</strong> داخله. تليه النقطة، ثم يليها العنصر الذي تريد الوصول إليه - وهذا يمكن أن يكون اسم خاصية بسيطة، او عنصر من المصفوفة أو تنفيذ احدى وظائف الكائن، على سبيل المثال:</p> + +<pre class="brush: js">person.age +person.interests[1] +person.bio()</pre> + +<h3 dir="rtl" id="Sub-namespaces">Sub-namespaces</h3> + +<p dir="rtl">من الممكن تغيير شكل التعليمة البرمجية، من مصفوفة الى Sub-namespaces. على سبيل المثال، حاول تغيير اسم العضو من :</p> + +<pre class="brush: js">name : ['Bob', 'Smith'],</pre> + +<p dir="rtl">الى</p> + +<pre class="brush: js">name : { + first : 'Bob', + last : 'Smith' +},</pre> + +<p dir="rtl">على نحو فعال قمنا بانشاء Sub-namespaces. هذا يبدو معقدا، في الحقيقة هو ليس كذالك - للوصول إلى هذه العناصر كل ما تحتاج اليه هو ربط سلسلة العناصر بنقطة الترميز. جرب هذا :</p> + +<pre class="brush: js">person.name.first +person.name.last</pre> + +<p dir="rtl"><strong>هام</strong> : في هذه الحالة ستحتاج أيضا للذهاب الى الكود الخاص بك واستبدال الحالات التالية من :</p> + +<pre class="brush: js">name[0] +name[1]</pre> + +<p dir="rtl">الى</p> + +<pre class="brush: js">name.first +name.last</pre> + +<p dir="rtl">وإلا، فسوف لن تعمل الوظائف الخاصة بك.</p> + +<h2 dir="rtl" id="رمز_الاقواس">رمز الاقواس</h2> + +<p dir="rtl">هناك طريقة أخرى للوصول إلى خصائص الكائن – باستخدام رمز الاقواس. بدلاً من استخدام هذه :</p> + +<pre class="brush: js">person.age +person.name.first</pre> + +<p dir="rtl">يمكنك استخدام هذه</p> + +<pre class="brush: js">person['age'] +person['name']['first']</pre> + +<p dir="rtl">تبدو هذه الطريقة مشابهة جدا لكيفية الوصول إلى العناصر في المصفوفة، فعلا هي كذالك - بدلا من استخدام رقم الفهرس للوصول الى العنصر المطلوب، نستخدم اسم القيمة للوصول اليه. ليس مستغربا أن تسمى هذه الكائنات أحيانا بالمصفوفات الترابطية associative arrays - هذه السلاسل النصية تشير الى قيمها. نفس الشئ بالنسبة للمصفوفات حيث تشير الفهرسة الرقمية لقيمها.</p> + +<h2 dir="rtl" id="إعداد_اعضاء_الكائن">إعداد اعضاء الكائن</h2> + +<p dir="rtl">حتى الآن قمنا فقط <strong>بارجاع/ جلب</strong> اعضاء الكائن - يمكننا أيضا <strong>تعيين/تحديث</strong> اعضاء الكائن ببساطة عن طريق الإعلان عن العضو الذي نريد تحديثه سواء باستخدام النقطة أو برمز الاقواس، كالتالي :</p> + +<pre class="brush: js">person.age = 45 +person['name']['last'] = 'Cratchit'</pre> + +<p dir="rtl">في حقل المدخلات الخاص بك جرب ادخال التعليمات البرمجية التالية واحدة تلوى الاخرى للحصول على الاعضاء مرة أخرى بعد التحديث :</p> + +<pre class="brush: js">person.age +person['name']['last']</pre> + +<p dir="rtl">إعداد ألاعضاء لا يقتصر فقط على تحديث قيم الخصائص والوظائف القائمة، يمكنك أيضا إنشاء أعضاء جدد تماما. جرب هذا:</p> + +<pre class="brush: js">person['eyes'] = 'hazel' +person.farewell = function() { alert("Bye everybody!") }</pre> + +<p dir="rtl">يمكنك الآن اختبار ألاعضاء الجدد خاصتك :</p> + +<pre class="brush: js">person['eyes'] +person.farewell()</pre> + +<p dir="rtl">احد اهم الجوانب المفيدة في استخدام رموز الاقواس هو امكانية استخدامها ليس فقط لتحديد قيم الاعضاء، ولكن أسماء الأعضاء أيضا. دعونا نقول أننا نريد أن يتمكن المستخدم من تخزين قيمة مخصصة لبيانات الاشخاص، عن طريق كتابة اسم العضو وقيمته في اثنين من المدخلات النصية؟ يمكن أن نحصل على تلك القيم كالتالي :</p> + +<pre class="brush: js">var myDataName = nameInput.value +var myDataValue = nameValue.value +</pre> + +<p dir="rtl">يمكننا بعد ذلك إضافة اسم العضو الجديد وقيمته إلى الكائن person كالتالي :</p> + +<pre class="brush: js">person[myDataName] = myDataValue</pre> + +<p dir="rtl">لاختبار هذا، قم بإضافة الأسطر التالية أسفل التعليمات البرمجية خاصتك، بعد قوس الاغلاق للكائن person :</p> + +<pre class="brush: js">var myDataName = 'height' +var myDataValue = '1.75m' +person[myDataName] = myDataValue</pre> + +<p dir="rtl">الآن قم بحفظ وتحديث، وادخل ما يلي في حقل المدخلات الخاص بك :</p> + +<pre class="brush: js">person.height</pre> + +<p dir="rtl">وهذا لم يكن ممكناً مع طريقة نقطة الترميز، لانها تقبل اسم العضو كقيمة حرفية فقط، والتالي لا يمكن لهذه القيمة الحرفية ان تشير إلى اسم المتغير.</p> + +<h2 dir="rtl" id="ما_هي_this؟">ما هي this؟ </h2> + +<p dir="rtl">لربما لاحظت شيئا غريبا بعض الشيء في الوظائف الخاصة بنا؟. القي نظرة على هذه على سبيل المثال:</p> + +<pre class="brush: js">greeting: function() { + alert('Hi! I\'m ' + this.name.first + '.'); +}</pre> + +<p dir="rtl"><br> + ربما تسألت ما هي <strong>this</strong>. هي كلمة من الكلمات المحجوزة للغة جافاسكريبت.<br> + تشير إلى الكائن الحالي الذي تم كتابة التعليمات البرمجية داخله — في هذه الحالة هي تعادل person. فلماذا لا نستخدم person بدلا من ذلك؟<br> + كما سترى في <a href="/ar/docs/Learn/JavaScript/Objects/Object-oriented_JS"> جافاسكريبت - البرمجة غرضية التوجه للمبتدئين</a> عندما نبدأ بانشاء constructors، ... الخ، this مفيدة جداً — لانها ستضمن دائما أن تستخدم القيم الصحيحة عندما يتغير سياق العضو.<br> + ( على سبيل المثال عند وجود حالتين مختلفتين للكائن person بأسماء مختلفة، سوف ترغب في التعامل مع ال name الموجودة في كل منهما عن طريق الوظيفة ()greeting ).</p> + +<p dir="rtl">ولتوضيح ما نعنيه مع زوج من الكائنات person1 و person2 :</p> + +<pre class="brush: js">var person1 = { + name : 'Chris', + greeting: function() { + alert('Hi! I\'m ' + this.name + '.'); + } +} + +var person2 = { + name : 'Brian', + greeting: function() { + alert('Hi! I\'m ' + this.name + '.'); + } +}</pre> + +<p dir="rtl">في هذه الحالة، الوظيفة ()greeting الخاصة بالكائن person1، ستظهر ".<strong>Hi! I'm Chris</strong>".<br> + فيما الوظيفة ()greeting الخاصة بالكائن person2، ستقوم باظهار ".<strong>Hi! I'm Brian</strong>".<br> + على الرغم من ان التعليمات البرمجية للوظيفة greeting هي نفسها في كلا الحالتين. وكما قلنا في وقت سابق، <strong>this</strong> تساوي الكائن داخل التعليمات البرمجية — هي ليست مفيدة بشكل كبير خصوصا عند الكتابة خارج ال object literals، لكنها مفيدة جدا عندما تريد توليد كائن حيوي (على سبيل المثال باستخدام ال constructors). سوف تتضح لك الامور في وقت لاحق.</p> + +<h2 dir="rtl" id="استخدمنا_الكائنات_طوال_المرحلة">استخدمنا الكائنات طوال المرحلة</h2> + +<p dir="rtl">من خلال الأمثلة السابقة، لربما فكرت بأن نقطة الترميز التي استخدمناها مؤلوفة جدا. هذا لأننا استخدمناها تقريبا في جميع المراحل السابقة، في كل مرة كنا نعمل من خلال مثال يستخدم اما built-in browser API او JavaScript object، استخدمنا الكائنات، نظراً لأن هذه الميزات تم بناؤها باستخدام نفس النوع من ال object structures مثل ما راينا هنا،<br> + وإن كانت أكثر تعقيدا من الأمثلة الخاصة بنا.</p> + +<p dir="rtl">عند استخدامك لوظائف السلاسل النصية string methods، كهذه :</p> + +<pre class="brush: js">myString.split(',');</pre> + +<p dir="rtl">فقد استخدمت وظيفة متاحة في مثيل الفئة <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code>. في كل مرة تقوم فيها بإنشاء سلسلة نصية في التعليمات البرمجية الخاصة بك، بشكل اوتوماتيكي يتم انشاء هذه السلسلة النصية ك instance (مثيل) من String، وبالتالي سيصبح متاح لها العديد من ال methods/properties الخاصة بال String.</p> + +<p dir="rtl"><br> + عندما تصل الى document object model باستخدام سطور كهذه :</p> + +<pre class="brush: js">var myDiv = document.createElement('div'); +var myVideo = document.querySelector('video');</pre> + +<p dir="rtl">فقد استخدمت وظيفة متاحة في مثيل الفئة <code><a href="/en-US/docs/Web/API/Document">Document</a></code>. في كل مرة تحمل فيها صفحة الويب، يتم إنشاء instance (مثيل) من الوثيقة، تسمى <code>document</code>، والتي تمثل بنية الصفحة كاملة، والمحتوى، وغيرها من الميزات مثل عنوان URL الخاص بها. وهذا يعني أن لديها العديد من ال methods/properties المتاحة لها.</p> + +<p dir="rtl">وينطبق الأمر نفسه على اي من (كائنات <span class="short_text" id="result_box" lang="ar"><span class="alt-edited">برمجة</span></span> <span class="short_text" id="result_box" lang="ar"><span class="alt-edited">واجهة التطبيقات</span></span> المدمجة built-in object/API) الاخرى قد تمت باستخدام — <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math">Math</a></code>, etc.</p> + +<p dir="rtl">لاحظ ان الكائنات المدمجة Objects/APIs لا تقوم دائما بانشاء object instances (مثيلات الكائن) اوتوماتيكيا. وكمثال على ذلك، <a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a> — التي تسمح للمتصفحات الحديثة باطلاق system notifications - يتطلب منك إنشاء مثيل object instance جديد باستخدام ال constructor لكل اشعار تريد اطلاقه.</p> + +<p dir="rtl">قم بادخال التعليمة التالية في console الجافاسكريبت الخاص بك :</p> + +<pre class="brush: js">var myNotification = new Notification('Hello!');</pre> + +<p dir="rtl">سوف نبحث في ال constructor في مقال لاحق.</p> + +<div class="note" dir="rtl"> +<p><strong>ملاحظة</strong>: من المفيد أن نفكر في طريقة تواصل الكائنات على شكل رسائل ممررة. — عندما يكون الكائن بحاجة لأداء بعض العمل في كثير من الأحيان سوف يرسل رسالة إلى كائن آخر عن طريق احدى وظائفه،<br> + وينتظر الرد، والذي يعرف بالقيمة المرجعة.</p> +</div> + +<h2 dir="rtl" id="ملخص">ملخص</h2> + +<p dir="rtl">تهانينا، لقد وصلت إلى نهاية الجزء الخاص بكائنات الجافاسكريبت الأولىية — وينبغي الآن ان تكون لديك فكرة جيدة عن كيفية العمل مع الكائنات في الجافا سكريبت بما في ذلك إنشاء الكائنات البسيطة الخاصة بك. وينبغي أن تدرك أيضا أن الكائنات مفيدة جداً كهياكل لتخزين البيانات والوظائف الخاصة بها. — إذا حاولت جعل كافة الخصائص والوظائف في الكائن person كمتغيرات ووظائف مستقلة، سيكون امر غير فعال ومخيب للامال، بحيث يمكن أن تتعرض لمخاطر اشتباك المتغيرات والوظائف التي لها نفس الأسماء.<br> + الكائنات تسمح لنا بالاحتفاظ بالمعلومات مؤمنة بأمان في حزمة خاصة بها، وتحفظها من الاذى.</p> + +<p dir="rtl"><strong>في المقال القادم سنبدأ بالنظر في البرمجة كائنية التوجه (OOP) ، وكيف يمكن استخدام هذه التقنية في جافا سكريبت.</strong></p> + +<p>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</p> +</div> diff --git a/files/ar/learn/javascript/objects/index.html b/files/ar/learn/javascript/objects/index.html new file mode 100644 index 0000000000..9eb705138c --- /dev/null +++ b/files/ar/learn/javascript/objects/index.html @@ -0,0 +1,53 @@ +--- +title: تقديم JavaScript objects +slug: Learn/JavaScript/Objects +tags: + - Article + - Assessment + - Beginner + - CodingScripting + - Guide + - JavaScript + - Learn + - NeedsTranslation + - Objects + - TopicStub + - Tutorial +translation_of: Learn/JavaScript/Objects +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">في JavaScript ، معظم الأشياء هي كائنات ، من ميزات JavaScript الأساسية مثل السلاسل والمصفوفات إلى واجهات برمجة التطبيقات للمتصفح المبنية أعلى جافا سكريبت. يمكنك حتى إنشاء الكائنات الخاصة بك لتغليف الوظائف والمتغيرات ذات الصلة إلى حزم فعالة ، وتكون بمثابة حاويات بيانات مفيدة. إن طبيعة جافا سكريبت الموجهة للكائنات مهمة لفهم ما إذا كنت ترغب في مواصلة معرفتك باللغة ، لذلك قمنا بتوفير هذه الوحدة لمساعدتك. هنا نقوم بتدريس نظرية وجوه وبناء الجملة بالتفصيل ، ثم ننظر في كيفية إنشاء الأشياء الخاصة بك.</p> + +<p>المتطلبات الأساسية<br> + قبل البدء في هذه الوحدة ، يجب أن يكون لديك بعض الإلمام بـ HTML و CSS. يُنصح بالعمل من خلال مقدمة HTML ومقدمة إلى وحدات CSS قبل البدء في JavaScript.</p> + +<p>يجب أيضًا أن يكون لديك بعض الإلمام بأساسيات JavaScript قبل النظر إلى كائنات JavaScript بالتفصيل. قبل محاولة هذه الوحدة ، اعمل من خلال الخطوات الأولى لجافا سكريبت وكتل JavaScript</p> + +<p> </p> + +<div class="note">ملاحظة: إذا كنت تعمل على جهاز كمبيوتر / جهاز لوحي / جهاز آخر لا تملك فيه القدرة على إنشاء ملفاتك الخاصة ، يمكنك تجربة (معظم) أمثلة التعليمات البرمجية في برنامج ترميز عبر الإنترنت مثل JSBin أو Thimble</div> + +<p> </p> + +<div class="note"> </div> + +<blockquote> +<p id="Guides">خطوط إرشاد<br> + أساسيات الكائن<br> + في المقالة الأولى التي تبحث في كائنات JavaScript ، سننظر في بنية كائن جافا سكريبت الأساسية ، ونعاود زيارة بعض ميزات جافا سكريبت التي رأيناها سابقًا في الدورة التدريبية ، مع التأكيد على حقيقة أن العديد من الميزات التي تعاملت معها بالفعل هي في الواقع الأشياء.<br> + جافا سكريبت وجوه المنحى للمبتدئين<br> + مع وضع الأساسيات ، سنركز الآن على JavaScript (Object-oriented JavaScript) (OOJS) - تقدم هذه المقالة عرضًا أساسيًا لنظرية البرمجة الشيئية (OOP) ، ثم تستكشف كيفية محاكاة جافا سكريبت لفئات الكائن عن طريق وظائف منشئ ، كيفية إنشاء مثيلات الكائن.<br> + نماذج الكائن<br> + النماذج الأولية هي الآلية التي ترث بها كائنات JavaScript عناصر من بعضها البعض ، وتعمل بشكل مختلف مع آليات الوراثة في لغات البرمجة الكلاسيكية الموجهة للكائنات. في هذه المقالة ، نستكشف هذا الاختلاف ، ونشرح كيفية عمل سلاسل النموذج الأولي ، وننظر في كيفية استخدام خاصية النموذج الأولي لإضافة أساليب إلى المنشئات الموجودة.<br> + وراثة في جافا سكريبت<br> + مع شرح معظم تفاصيل دموية OOJS الآن ، يوضح هذا المقال كيفية إنشاء فئات الكائن "التابعة" (المنشئات) التي ترث ميزات من الفئات "الأصل" الخاصة بهم. بالإضافة إلى ذلك ، نقدم بعض النصائح حول متى وأين قد تستخدم OOJS.<br> + التعامل مع بيانات JSON<br> + يعد ترميز كائن جافا سكريبت (JSON) تنسيقًا قياسيًا لتمثيل البيانات المنظمة مثل كائنات جافا سكريبت ، والتي تستخدم عادة لتمثيل ونقل البيانات على مواقع الويب (أي إرسال بعض البيانات من الخادم إلى العميل ، بحيث يمكن عرضها على الويب الصفحة). ستصادفه كثيرًا ، لذا في هذه المقالة نقدم لك كل ما تحتاجه للعمل مع JSON باستخدام JavaScript ، بما في ذلك الوصول إلى عناصر البيانات في كائن JSON وكتابة JSON الخاص بك.<br> + ممارسة بناء الكائن<br> + في المقالات السابقة ، نظرنا في جميع تفاصيل بنية وجوه جافا سكريبت الأساسية وتفاصيل التركيب ، مما يمنحك قاعدة صلبة للبدء منها. في هذا المقال ، نتعمق في تمرين عملي ، مما يمنحك المزيد من التدريب على بناء كائنات جافا سكريبت مخصصة ، والتي تنتج شيئًا ممتعًا وملونًا - بعض الكرات المرتدة الملونة.</p> +</blockquote> + +<p id="Assessments">تقييم<br> + إضافة ميزات إلى الكرات المرتدة التجريبية<br> + في هذا التقييم ، يتوقع منك استخدام الكرات المرتدة التجريبية من المقالة السابقة كنقطة بداية ، وإضافة بعض الميزات الجديدة والممتعة إليها.</p> diff --git a/files/ar/learn/javascript/objects/inheritance/index.html b/files/ar/learn/javascript/objects/inheritance/index.html new file mode 100644 index 0000000000..7dc1333c96 --- /dev/null +++ b/files/ar/learn/javascript/objects/inheritance/index.html @@ -0,0 +1,228 @@ +--- +title: الوراثة في جافاسكريبت +slug: Learn/JavaScript/Objects/Inheritance +translation_of: Learn/JavaScript/Objects/Inheritance +--- +<div dir="rtl">{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}</div> + +<p class="summary" dir="rtl">مع معظم التفاصيل المثيرة في OOJS التي درسناها حتى الآن،سنتطرق في هذا الدرس لكيفية إنشاء طفل (child" object classes (constructors" الذي يرث الميزات من أبيه parent" classes". بالإضافة إلى ذلك، سنقدم بعض النصائح، حول متى وأين يجب عليك استخدام ال OOJS.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th dir="rtl" scope="row">المتطلبات الأساسية :</th> + <td dir="rtl">دراية لا بأس بها بخصوص الحاسوب، الإلمام بمبادئ وأساسيات الـ HTML وCSS وجافاسكريبت (راجع <a href="/en-US/docs/Learn/JavaScript/First_steps">First steps</a> and <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Building blocks</a>) وأساسيات بناء الكائنات في الجافاسكريبت OOJS (راجع <a href="/en-US/docs/Learn/JavaScript/Object-oriented/Introduction">Introduction to objects</a>).</td> + </tr> + <tr> + <th dir="rtl" scope="row">الهدف :</th> + <td dir="rtl">فهم كيفية تنفيذ الوراثة في جافا سكريبت.</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="الوراثة_النمودجية_-_Prototypal_inheritance">الوراثة النمودجية - Prototypal inheritance</h2> + +<div style="font-size: 15; font-family: 'tahoma';"> +<p dir="rtl">لقد راينا حتى الآن بعض عمليات الوراثة — وراينا كيف تعمل الـ prototype chains، وكيف يتم توارث الاعضاء صعودا في السلسلة، ولكن معظمها اقتصر على الدوال المدمجة في المتصفح (built-in browser functions). الان، سنرى كيف يمكننا إنشاء كائن يرث من كائن آخر في جافا سكريبت؟</p> + +<p dir="rtl">كما ذكرنا في وقت سابق من هذه الدورة التدريبية، بعض الاشخاص يعتقدون أن جافاسكريبت ليست لغة كائنية حقيقية. في لغات "OO الكلاسيكية"، حيث يجب تعريف class objects من نوع ما، بعد ذلك يمكنك ببساطة تعريف الكلاس الذي سترث منه الكلاسات الأخرى (شاهد بعض الامثلة البسيطة بخصوص الوراثة في لغة <a href="http://www.tutorialspoint.com/cplusplus/cpp_inheritance.htm">C++ inheritance</a>). الجافا سكريبت تستخدم نظام مختلف — نظام <strong>الربط</strong> بين الكائنات — في الجافسكريبت لا يتم نسخ الوظائف الموروثة على الكائنات التي تقوم بالوراثة، بدلا من ذالك يتم عمل <strong>رابط</strong> بينها — الوظائف التي ترث <strong>مرتبطة</strong> عن طريق ال prototype chain (غالباً ما يشار لها بال <strong>prototypal inheritance</strong>).</p> + +<p dir="rtl">دعونا نستكشف كيفية القيام بذلك مع مثال ملموس.</p> + +<h2 dir="rtl" id="الشروع_في_العمل">الشروع في العمل</h2> + +<p dir="rtl">اولا وقبل كل شئ، قم بعمل نسخة من الملف الخاص بنا <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-start.html">oojs-class-inheritance-start.html</a> (او شاهد <a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-start.html">running live</a>). ستجد داخله نفس مثال <code>Person()</code> constructor الذي استخدمناه طوال هذه الدورة التدريبية مع اختلاف طفيف — لقد قمنا بتعريف الخصائص فقط، داخل ال constructor:</p> + +<pre class="brush: js">function Person(first, last, age, gender, interests) { + this.name = { + first, + last + }; + this.age = age; + this.gender = gender; + this.interests = interests; +};</pre> + +<p dir="rtl">وكافة ال method معرفة كـ constructor's prototype ، على سبيل المثال:</p> + +<pre class="brush: js">Person.prototype.greeting = function() { + alert('Hi! I\'m ' + this.name.first + '.'); +};</pre> + +<div class="note"> +<p dir="rtl"><strong>ملحوظة : </strong>في شفرة المصدر سترى ايضا الوظائف <code>()bio </code>و <code>()farewell</code> معرفة . في وقت لاحق سترى كيف يمكن أن تكون موروثة من قبل منشئات-constructors آخرى.</p> +</div> + +<p dir="rtl">سنقوم بإنشاء <code>Teacher</code> class، مثل الذي قمنا بتوصيفه في تعريف object-oriented definition الخاصة بنا —والذي سيرث كافة الأعضاء من ال <code>Person</code>، ولكن سيشتمل أيضا على:</p> + +<ol> + <li>خاصية جديدة، <code>subject</code> — والتي ستحتوي على المادة التي يدرسها المدرس.</li> + <li>وعلى الوظيفة <code>greeting()</code> محدثة، والتي تبدو أكثر رسمية من الوظيفة <code>greeting()</code> القياسية —<br> + وهي اكثر ملائمة مع المدرس الذي يقوم بتدريس بعض الطلاب في المدرسة.</li> +</ol> + +<h2 dir="rtl" id="تعريف_ال_Teacher()_constructor_function">تعريف ال Teacher() constructor function</h2> + +<p dir="rtl">أول شيء يتعين علينا القيام به هو إنشاء <code>Teacher() </code>constructor — اضف ما يلي أدناه في التعليمات البرمجية خاصتك:</p> + +<pre class="brush: js">function Teacher(first, last, age, gender, interests, subject) { + Person.call(this, first, last, age, gender, interests); + + this.subject = subject; +}</pre> + +<p dir="rtl">تبدو هذه مشابهة لل Person constructor في نواح كثيرة، ولكن هناك شيء غريب والذي لم نره من قبل — الدالة<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call"> ()</a></code><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call">call</a></code> . هذه الدالة تسمح لك باستدعاء دالة اخرى معرفة في مكان آخر، ولكن في السياق الحالي، البراميتر الاول لتحديد قيمة <code>this</code>، اي هذا الذي نريد استخدامه عند تشغيل الدالة، والبرامترات الاخرى لتحديد البرامترات التي يجب ان تمرر للدالة عند تشغيلها.</p> + +<div class="note" dir="rtl"> +<p><strong>ملاحظة</strong>: في هذه الحالة سنقوم بتحديد الخصائص الموروثة عندما سنقوم بانشاء object instance، لكن لاحظ أنك ستحتاج إلى تحديدها كباراميترات في ال constructor حتى لو كان ال instance لا يتطلب ان تكون محددة كبارامترات.</p> +</div> + +<p dir="rtl">في هذه الحالة، وعلى نحو فعال قمنا بتشغيل ال Person() constructor function داخل ال Teacher() constructor function (انظر اعلاه). ما نتج عنه نفس الخصائص المعرفة داخل ()Teacher ولكن باستخدام قيم البرامترات التي تم تمريرها إلى ()Teacher وليس الى ()Person (ببساطة قمنا بتمرير this الى ()call وهذا يعني أن this داخل ()cal ستشير الى Teacher() function).</p> + +<p dir="rtl">السطر الأخير داخل ال constructor يعرف الخاصية subject الجديدة وهي خاصة ب ()Teacher فقط.</p> + +<p dir="rtl">كملاحظة، بإمكاننا ببساطة القيام بذلك على هذا النحو :</p> + +<pre class="brush: js">function Teacher(first, last, age, gender, interests, subject) { + this.name = { + first, + last + }; + this.age = age; + this.gender = gender; + this.interests = interests; + this.subject = subject; +}</pre> + +<p dir="rtl">ولكن هذا مجرد إعادة تحديد الخصائص من جديد، و ()Teacher لا يرثها من ال ()Person، لذا لا فائدة لما نحاول القيام به. لانه سيأخذ المزيد من السطور في التعليمات البرمجية لا اكثر.</p> + +<h2 dir="rtl" id="إعداد_Teacher()_prototype_ومرجع_ال_constructor">إعداد Teacher() prototype ومرجع ال constructor</h2> + +<p dir="rtl">كل شيء جيد حتى الآن، ولكن لدينا مشكلة. قمنا بتعيين constructor جديد، وبشكل افتراضي يحتوي على الخاصية prototype فارغة. ونحن بحاجة لجعل ()Teacher يرث الوظائف المعرفة في ال Person() prototype. فكيف نفعل ذلك؟</p> + +<p dir="rtl">أضف السطر التالي اسفل التعليمة البرمجية الخاصة بك:</p> + +<pre class="brush: js">Teacher.prototype = Object.create(Person.prototype);</pre> + +<p dir="rtl">وهنا يأتي دور الوظيفة<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create"> ()</a></code><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create">create</a></code> للإنقاذ مرة أخرى — في هذه الحالة استخدمناها لإنشاء قيمة جديدة للخاصية prototype (وهي في حد ذاتها كائن يحتوي على خصائص ووظائف) مع prototype يساوي Person.prototype، وتعيينها كقيمة ل Teacher.prototype، وهذا يعني أن Teacher.prototype الآن سوف يرث كل الوظائف الموجودة في ال Person.prototype.</p> + +<p dir="rtl">نحن بحاجة إلى فعل شيئا آخر قبل أن نكمل — constructor الخاصية prototype ل ()Teacher<br> + هو الان على شكل ()Person، بسبب الطريقة التي ورثناها منه (لمزيد من المعلومات حول هذا <a href="https://stackoverflow.com/questions/8453887/why-is-it-necessary-to-set-the-prototype-constructor">Stack Overflow post</a>) — حاول حفظ التعليمات البرمجية الخاصة بك، واعد تحميل الصفحة من المتصفح، وادخل هذا في console الجافاسكريبت للتحقق:</p> + +<pre class="brush: js">Teacher.prototype.constructor</pre> + +<p dir="rtl">وهذا يمكن أن يسبب مشكلة، لذلك نحن بحاجة لتصحيح هذا الوضع، يمكنك القيام بذلك بالرجوع إلى التعليمات البرمجية الخاصة بك وإضافة السطر التالي في الجزء السفلي:</p> + +<pre class="brush: js">Teacher.prototype.constructor = Teacher;</pre> + +<p dir="rtl">الآن إذا قمت بحفظ وتحديث، وإدخال Teacher.prototype.constructor سيتم إرجاع ()Teacher، كما هو مطلوب.</p> + +<h2 dir="rtl" id="منح_()Teacher_الوظيفة_()greeting_الجديدة">منح ()Teacher الوظيفة ()greeting الجديدة</h2> + +<p dir="rtl">لانهاء الكود الخاص بنا، سنحتاج إلى تعريف الوظيفة الجديدة ()greeting في Teacher() constructor.</p> + +<p dir="rtl">أسهل طريقة للقيام بذلك، هو تعريفها على Teacher() prototype — اضف ما يلي في الجزء السفلي من التعليمات البرمجية الخاصة بك:</p> + +<pre class="brush: js">Teacher.prototype.greeting = function() { + var prefix; + + if(this.gender === 'male' || this.gender === 'Male' || this.gender === 'm' || this.gender === 'M') { + prefix = 'Mr.'; + } else if(this.gender === 'female' || this.gender === 'Female' || this.gender === 'f' || this.gender === 'F') { + prefix = 'Mrs.'; + } else { + prefix = 'Mx.'; + } + + alert('Hello. My name is ' + prefix + ' ' + this.name.last + ', and I teach ' + this.subject + '.'); +};</pre> + +<p dir="rtl">تحية المدرس هذه (alert)، يستخدم فيها أيضا الاسم prefix المناسب لجنسهم، بناءا على عبارة شرطية.</p> + +<h2 dir="rtl" id="تجربة_المثال">تجربة المثال</h2> + +<p dir="rtl">لقد ادخلت الآن كافة التعليمات البرمجية، حاول انشاء object instance من ()Teacher، عن طريق وضع ما يلي في الجزء السفلي لجافا سكريبت الخاصة بك :</p> + +<pre class="brush: js">var teacher1 = new Teacher('Dave', 'Griffiths', 31, 'male', ['football', 'cookery'], 'mathematics');</pre> + +<p dir="rtl">الآن حفظ وتحديث، وحاول الوصول إلى خصائص ووظائف الكائن teacher1 الجديد الخاص بك، على سبيل المثال:</p> + +<pre class="brush: js">teacher1.name.first; +teacher1.interests[0]; +teacher1.bio(); +teacher1.subject; +teacher1.greeting();</pre> + +<p dir="rtl">ستعمل جميعها بشكل جيد، الثلاثة الأولى ستصل إلى الأعضاء التي تم وراثتها من Person() constructor (class العام فيما الاثنان المتبقيان سيصلان إلى الأعضاء الموجودة في (Teacher() constructor (class.</p> + +<div class="note" dir="rtl"> +<p><strong>ملاحظة</strong> : إذا واجهتك مشكلة في الحصول على هذا العمل، قارن التعليمات البرمجية الخاصة بك مع خاصتنا <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-finished.html">finished version</a> (شاهد <a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-finished.html">running live</a> ).</p> +</div> + +<p dir="rtl">التقنية التي قمنا بتغطيتها هنا ليست الطريقة الوحيدة لإنشاء كلاسات موروثة في جافا سكريبت، ولكنها تعمل بشكل جيد، وتعطيك فكرة جيدة عن كيفية تنفيذ الوراثة في جافا سكريبت.</p> + +<p dir="rtl">قد يهمك ايضا الاطلاع على بعض المستجدات {{glossary("ECMAScript")}} بخصوص المميزات الجديدة التي تسمح لنا بالقيام بوراثة أكثر نظافة في جافا سكريبت (شاهد <a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a>). ونحن لم نقم بتغطيتها هنا، كما لم يتم حتى الآن اعتمادها على نطاق واسع جداً عبر المتصفحات. كل التعليمات البرمجية الأخرى التي ناقشناها في هذه المجموعة من المقالات مدعومة بقدر ما، باستثناء IE9 وإلاصدارات السابقة، هناك طرق لتحقيق الدعم لما سبق.</p> + +<p dir="rtl">الطريقة الشائعة هي استخدام مكتبة جافا سكريبت — معظم الخيارات الشائعة تحتوي على مجموعة سهلة من الوظائف المتاحة لتنفيذ الوراثة بسهولة وسرعة. <a href="http://coffeescript.org/#classes">CoffeeScript</a> على سبيل المثال، توفر class ،extends،... الخ.</p> + +<h2 dir="rtl" id="اختبر_قدراتك">اختبر قدراتك</h2> + +<p dir="rtl">في القسم النظري الخاص بال <a href="/ar/docs/Learn/JavaScript/Objects/Object-oriented_JS#البرمجة_الكائنية_(أو_البرمجة_غرضية_التوجه)">OOP theory section</a>، أدرجنا أيضا Student class كمفهوم، والذي يرث كافة ميزات ال Person، ويحتوي على الوظيفة ()greeting بتحية مختلفة للشخص، وتحيته أكثر رسمية بكثير من تحية المدرس. الق نظرة على ما يشبه تحية الطالب في هذا القسم، وحاول تنفيذ Student() constructor خاص بك، على أن يرث كل ميزات ال ()Person، وقم بتنفيذ وظيفة ()greeting مختلفة.</p> + +<div class="note" dir="rtl"> +<p><strong>ملاحظة</strong> : إذا واجهتك مشكلة في الحصول على هذا العمل، قارن التعليمات البرمجية الخاصة بك مع خاصتنا <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-student.html">finished version</a> (شاهد ايضا <a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-student.html">running live</a>).</p> +</div> + +<h2 id="Object_member_summary">Object member summary</h2> + +<p dir="rtl">تلخيص، لديك ثلاثة أنواع من property/method لتهتم بشانهم.</p> + +<ol> + <li>تلك المعرفة داخل ال constructor function والتي تمرر لل object instances. هذه سهلة إلى حد ما، في التعليمات البرمجية الخاصة بك، هناك أعضاء معرفة داخل ال constructor تستخدم نوع السطر this.x = x في built in browser code وهي متاحة فقط للأعضاء في object instances (عادة ما يتم إنشاؤها من خلال استدعاء ال constructor باستخدام الكلمة المحجوزة new مثل var myInstance = new <span dir="ltr">myConstructor()<span>)</span></span></li> + <li>تلك التي تم تحديدها مباشرة على constructor نفسها، وهي متاحة فقط في ال constructor.<br> + وهذه عادة متوفرة فقط في ال built-in browser objects,<br> + المعترف بها حاليا بالسلاسل مباشرة على ال constructor،<br> + لا على ال instance. على سبيل المثال <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object.keys()</a></code>.</li> + <li> + <p>تلك المحددة في constructor ال prototype، والموروثة من جميع ال instances<br> + ووراثة فئات الكائن. وتشمل اي عضو معرف على الخاصية Constructor's prototype property<br> + (مثلا ()myConstructor.prototype.x).</p> + </li> +</ol> + +<p dir="rtl">إذا لم تتمكن من استعاب هذا، فلا تقلق فانت حتى الآن لا تزال تتعلم، وسوف تستوعبها اكثر مع الممارسة.</p> + +<h2 dir="rtl" id="متى_تستخدم_الوراثة_في_جافا_سكريبت؟">متى تستخدم الوراثة في جافا سكريبت؟</h2> + +<p dir="rtl">على الارجح بعد هذه المادة الأخيرة، ستقول "يا الهي، هذا معقد"، حسنا، انت على حق، ال prototypes والوراثة تمثل بعض اهم الجوانب الأكثر تعقيداً في جافا سكريبت، لكن قوة ومرونة الجافا سكريبت تاتي من تركيبة الكائن والوراثة ومن المفيد فهم كيف تعمل.</p> + +<p dir="rtl">بطريقة ما، فانت تستخدم الوراثة طوال الوقت، كلما استخدمت الميزات المختلفة ل Web API (واجهة برمجة تطبيقات الويب) او الخصائص والوظائف المعرفة في كائنات المتصفح المدمجة (built-in browser) التي تقوم باستدعائها على السلاسل النصية الخاصة بك، او على المصفوفات...الخ، بشكل فعلي، فانت تستخدم الوراثة.</p> + +<p dir="rtl">بالنسبة لاستخدام الوراثة في التعليمات البرمجية الخاصة بك، ربما لن تحتاج لاستخدامها في كثير من الأحيان، لا سيما وانت مبتدئ فيها، او لديك مشاريع صغيرة. استخدام الكائنات والوراثة في هذه الحالة، سيكون مضيعة للوقت، وانت لست في حاجة إليها. ولكن كان تكون التعليمات البرمجية الخاصة بك اكبر وقابلة للتمدد، فأنت على الأرجح ستحتاجها بشكل كبير، إذا بدأت في إنشاء عدد من الكائنات، ووجدت ان لها خصائص مماثلة، عندها، قم بإنشاء نوع الكائن عام يحتوي على كافة الوظائف المشتركة ووراثة تلك المشتركة في نوع الكائنات الاكثر تخصصا، ما سيجعل هذ العمل مفيد ومريح.</p> + +<div class="note" dir="rtl"> +<p>ملاحظة: بسبب طريقة عمل الجافاسكريبت مع ال prototype chain ...الخ، غالباً ما تسمى مشاركة الوظائف بين الكائنات ب delegation (التفويض)، الكائنات المتخصصة تفوض هذه الوظائف إلى نوع الكائن العام. وربما هذا هو الوصف الاكثر دقة لوصف الوراثة، كما لا يتم نسخ الوظائف "الموروثة" على الكائنات التي تقوم "بالوراثة". بدلا من ذلك يتم عمل رابط بينها، لذا فالوظائف الموروثة لاتزال في الكائن العام.</p> +</div> + +<p dir="rtl">عند استخدام الوراثة، ينصح ان لا يكون لديك عدة مستويات من الوراثة، وتقوم بتتبع دقيق حيث يمكنك تحديد الخصائص والوظائف الخاصة بك. من الممكن البدء بكتابة التعليمات البرمجية والقيام بتعديل prototypes الكائنات المدمجة في المتصفح مؤقتاً، ولكن يجب أن لا تفعل ذلك إلا إذا كان لديك سبب وجيه حقا. والكثير من الوراثة يمكن أن يؤدي إلى ارتباكات لا نهاية لها، وآلام لا نهاية لها عند محاولة تصحيح هذه التعليمات البرمجية.</p> + +<p dir="rtl">في نهاية المطاف، الكائنات ليست سوى شكل آخر من أشكال إعادة استخدام التعليمات البرمجية، مثل الدوال والحلقات...الخ، مع أدوار محددة ومزايا خاصة بها. إذا كنت تقوم بإنشاء مجموعة من المتغيرات والمهام ذات الصلة، وتريد أن تجعلها جميعا معا محزمة بدقة وبعيدة عن مخاطر الاشتباك، فالكائن هو الحل. الكائنات أيضا مفيدة جداً عندما تريد تمرير مجموعة من البيانات من مكان إلى آخر. كل هذه الأمور لا يمكن تحقيقها بدون استخدام ال constructors أو الوراثة. إذا كنت بحاجة إلى instance واحد فقط من الكائن، فمن الافضل استخدام object literal، وبالتأكيد فلن تحتاج للوراثة.</p> + +<h2 dir="rtl" id="خلاصة">خلاصة</h2> + +<p dir="rtl"> غطت هذه المادة ما تبقى من نظرية ال OOJS الأساسية، وتركيبة الكائن الاساسية، من خلال هذه المعطيات فعلى الارجح انك اصبحت اكثر قدرة على فهم كائن الجافاسكريبت وأساسيات ال OOP، وايضا ال prototypes والميراث النمودجي (prototypal inheritance)، وكيفية إنشاء كلاسات (اي ما يعادل ال constructors في جافاسكريبت) وال object instances، واضافة ميزات الى الكلاسات، وانشاء كلاسات فرعية (subclasses)، التي ترث من الكلاسات الأخرى.</p> + +<p dir="rtl">في الدرس القادم سنلقي نظرة على كيفية التعامل مع ال (JavaScript Object Notation (JSON، وتبادل البيانات المشتركة باستخدام كائنات جافا سكريبت.</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="http://www.objectplayground.com/">ObjectPlayground.com</a> — A really useful interactive learning site for learning about objects.</li> + <li><a href="https://www.amazon.com/gp/product/193398869X/">Secrets of the JavaScript Ninja</a>, Chapter 6 — A good book on advanced JavaScript concepts and techniques, by John Resig and Bear Bibeault. Chapter 6 covers aspects of prototypes and inheritance really well; you can probably track down a print or online copy fairly easily.</li> + <li><a href="https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&%20object%20prototypes/README.md#you-dont-know-js-this--object-prototypes">You Don't Know JS: this & Object Prototypes</a> — Part of Kyle Simpson's excellent series of JavaScript manuals, Chapter 5 in particular looks at prototypes in much more detail than we do here. We've presented a simplified view in this series of articles aimed at beginners, whereas Kyle goes into great depth and provides a more complex but more accurate picture.</li> +</ul> + +<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}</p> diff --git a/files/ar/learn/javascript/objects/object-oriented_js/index.html b/files/ar/learn/javascript/objects/object-oriented_js/index.html new file mode 100644 index 0000000000..c57bbb13d5 --- /dev/null +++ b/files/ar/learn/javascript/objects/object-oriented_js/index.html @@ -0,0 +1,296 @@ +--- +title: جافاسكريبت - البرمجة غرضية التوجه للمبتدئين +slug: Learn/JavaScript/Objects/Object-oriented_JS +translation_of: Learn/JavaScript/Objects/Object-oriented_JS +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}</div> + +<p class="summary" dir="rtl">مع ما تعلمناه من أساسيات، سنركز الآن على جافاسكريبت غرضية التوجه (object oriented programming). او ما يعرف ب (OOP)، سنستعرض في هذه المقالة أساسيات البرمجة غرضية التوجه نظريا، ثم سنستكشف كيف أن الجافا سكريبت تظاهي الـ object classes المستخدمة في لغات البرمجة الأخرى (php مثلا) عن طريق الـ constructor functions، وأيضا كيفية إنشاء instances من الكائن (أو مثيل الكائن).</p> + +<table class="learn-box standard-table" style="height: 217px; width: 584px;"> + <tbody> + <tr> + <th dir="rtl" scope="row">المتطلبات الأساسية :</th> + <td> + <p dir="rtl">دراية لا باس بها بخصوص الحاسوب، الإلمام بمبادئ وأساسيات الـ HTML وCSS وjavascript (شاهد <a href="/en-US/docs/Learn/JavaScript/First_steps">First steps</a> و <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Building blocks</a>) وأساسيات بناء الـكائنات OOJS. (شاهد <a href="/en-US/docs/Learn/JavaScript/Object-oriented/Introduction">Introduction to objects</a>).</p> + </td> + </tr> + <tr> + <th dir="rtl" scope="row">الهدف :</th> + <td dir="rtl">فهم نظريا الـبرمجة غرضية التوجه (object-oriented programming)، وكيف أن كل شيء في الجافاسكريبت عبارة عن كائن (object) !.<br> + وأيضا كيفية إنشاء الـ constructors وobject instances.</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="البرمجة_الكائنية_(أو_البرمجة_غرضية_التوجه)">البرمجة الكائنية (أو البرمجة غرضية التوجه) </h2> + +<div style="font-size: 14px; font-family: 'tahoma';"> +<p dir="rtl">لنبدأ، دعونا نقوم بعرض نبذة بسيطة عن ماهي البرمجة غرضية التوجه ( Object-oriented programming ( OOP على مهل. نقول على مهل، لأن فهم واستيعاب البرمجة غرضية التوجه (OOP) على عجل سيكون امر غاية في التعقيد، كأن نعطيك العلاج الكامل الآن على الأرجح سيسبب لك خلطا أكثر مما سيساعدك. <br> + الفكرة الأساسية من البرمجة غرضية التوجه OOP هي أن نستخدم أشياءً من عالمنا الحقيقي ونحولها إلى كائنات ونقوم بتمثيلها داخل برامجنا، ونوفر وسائل سهلة للوصول إلى وظائفها، حتى نستفيد منها.</p> + +<p dir="rtl">يتكون الكائن من مجموعة من البيانات والتعليمات البرمجية المتصلة فيما بينها. والتي تمثل معلومات عن الشيء الذي نتعامل معه، والوظيفة أو السلوك الذي نريد منه أن يقوم به. بيانات الكائن في كثير من الأحيان تكون عبارة عن وظائف كثيرة يمكن تخزينها بدقة (أو تغليفها) داخل حزمة الكائن (object package). حزمة الكائن يمكن أن تمتلك اسما يشير إليها، وهو ما يسمى في بعض الأحيان ب namespace. ما يجعل من السهل إعادة هيكلتها أو الوصول إليها، كما يمكن أيضا استخدام الكائنات كمخازن للبيانات حتى يمكن إرسالها بسهولة عبر شبكة الاتصال.<br> + </p> + +<h3 dir="rtl" id="تعريف_الـ_object_template">تعريف الـ object template</h3> + +<p dir="rtl">دعونا ننظر في برنامج سهل يستعرض معلومات عن الطلاب والمعلمين في المدرسة.<br> + هنا سوف نبحث في نظرية البرمجة الغرضية التوجه OOP بشكل عام، وليس في سياق أي لغة برمجة معينة.</p> + +<p dir="rtl">اولا، دعونا نعود إلى الكائن Person الذي عملنا عليه في الدرس السابق <a href="/ar/docs/Learn/JavaScript/Objects/Basics">قسم اساسيات الكائن في جافاسكريبت</a>، والذي يحدد البيانات العامة والأداء الوظيفي للشخص. هناك الكثير من المواصفات التي يمكن أن يتصف بها اي شخص (عنوانه، الطول، حجم الحذاء، الحمض النووي للشخصية DNA، ورقم جواز السفر، مواصفات شخصية كثيرة...)، في المثال الذي عملنا عليه في الدرس السابق، ركزنا اهتمامنا فقط على عرض الاسم، والسن والجنس، والاهتمامات، نريد أيضا أن نكون قادرين على كتابة مقدمة قصيرة حول هؤلاء الاشخاص، على أساس هذه البيانات، وجعلهم يقولون مرحبا، وهذا ما يعرف بالتجريد abstraction.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13889/person-diagram.png" style="display: block; height: 219px; margin: 0px auto; width: 610px;"></p> + +<p dir="rtl">في بعض لغات البرمجة غرضية التوجه OOP الأخرى (PHP مثلا)، يعرف الكائن عامة بال class (جافا سكريبت تستخدم مصطلحات وآلية مختلفة، كما سنرى أدناه) - في الواقع هو ليس كائنا، بل هو القالب الذي يعرف خصائص الكائن وكيف ينبغي له أن يكون.</p> + +<h3 dir="rtl" id="إنشاء_كائنات_فعلية_-_Creating_actual_objects">إنشاء كائنات فعلية - Creating actual objects </h3> + +<p dir="rtl">من خلال الـ class، يمكنك إنشاء object instances — وهي الكائنات التي تحتوي على البيانات والوظائف المحددة في الـ class (وبالتالي هي مثيلة له). من خلال الـ class Person الخاص بنا، يمكننا الآن إنشاء بعض الأشخاص الفعليين :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13883/MDN-Graphics-instantiation-2.png" style="display: block; height: 743px; margin: 0px auto; width: 700px;"></p> + +<p dir="rtl">عندما يتم إنشاء object instance من الـ class، ستبدأ الـ constructor function الخاصة بال class بإنشائه، تسمى عملية إنشاء الـ object instance من الـ class بال instantiation (إنشاء مثيل).<br> + أي أنَّ الـ object instance هو instantiated (مثيل) من الـ class.</p> + +<h3 dir="rtl" id="كلاسات_متخصصة_-_Specialist_classes">كلاسات متخصصة - Specialist classes</h3> + +<p dir="rtl">في هذه الحالة لسنا بحاجة للأشخاص بصفة عامة، سنستخدم الأساتذة والطلاب بصفة <strong>خاصة</strong>. في البرمجة غرضية التوجه OOP، يمكنك إنشاء كلاسات بناءً على كلاسات أخرى. مثلا كلاسات الأبناء child الجديدة يمكنها أن ترث البيانات والتعليمات البرمجية من الكلاس الأب parent.<br> + يمكنك إعادة استخدام وظيفة مشتركة بين جميع أنواع الكائنات بدلاً من الاضطرار إلى تكرار العملية عدة مرات، حيث يختلف الأداء الوظيفي من كلاس لآخر، يمكنك <strong>تخصيص</strong> ميزات معينة لكل منها حسب الحاجة.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13881/MDN-Graphics-inherited-3.png" style="display: block; height: 743px; margin: 0px auto; width: 700px;"></p> + +<p dir="rtl">وهذا مفيد حقاً – حيث يتشارك المعلمين والطلاب في الكثير من الخصوصيات المشتركة مثل الاسم ونوع الجنس، والعمر، سيكون من المفيد جدا تعريف تلك الخصوصيات المشتركة مرة واحدة فقط. يمكنك أيضا تعريف نفس تلك الخصوصيات كل على حدة في الكلاسات المختلفة، كما سيتم تعريف كل من هذه الخصوصيات في namespace مختلفة. على سبيل المثال، قد تكون تحية الطالب على هذا الشكل <code>( Yo, I'm [firstName]" ( <em>Hi, I'm Sam</em>"</code>، بينما قد يستخدم المعلم شيئا أكثر رسمية،<br> + مثل<code>Hello, my name is [Prefix] [lastName] and I teach [Subject]. " ) <em>Hello, My name is Mr Griffiths, and I teach Chemistry</em>)</code>.</p> + +<div class="note" dir="rtl"> +<p>ملاحظة : قدرة الكائنات المتعددة على تنفيذ نفس الوظائف تسمى <strong>polymorphism</strong> (تعدد الأشكال).</p> +</div> + +<p dir="rtl">يمكنك الآن إنشاء object instances من child classes. على سبيل المثال :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13885/MDN-Graphics-instantiation-teacher-3.png" style="display: block; height: 743px; margin: 0px auto; width: 700px;"></p> + +<p dir="rtl">في باقي المقالة سنبدأ بإلقاء نظرة عملية على البرمجة غرضية التوجه OOP في جافا سكريبت.</p> + +<h2 dir="rtl" id="الـ_Constructors_والـ_object_instances">الـ Constructors والـ object instances</h2> + +<p dir="rtl">بعض الناس يقولون أن جافاسكريبت ليست لغة كائنية حقيقية، لأنها لا تستخدم الكلمة المحجوزة class لإنشاء الكلاسات مثل العديد من لغات البرمجة الغرضية التوجه OOP. بدلاً من ذلك، الجافاسكريبت تستخدم وظائف خاصة تسمى constructor functions لتعريف الكائنات وميزاتها. هذه الوظائف مفيدة جدا لأنك غالبا ما ستواجه حالات، حيث لا يمكنك معرفة عدد الكائنات التي ستقوم بإنشائها. وبالتالي ستوفر لك الـ constructors الوسائل اللاَّزمة لإنشاء العديد من الكائنات التي تحتاج إليها بطريقة فعالة، وربط البيانات والوظائف كما هو مطلوب.</p> + +<p dir="rtl">عندما يتم إنشاء object instance جديد من الـ constructor function، لا يتم نسخ كل الوظائف الى الكائن الجديد مثل الـ «classic OO languages». بدلاً من ذلك يتم تكوين رابط وظيفي بواسطة reference chain تسمى prototype chain (شاهد <a href="/ar/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a>). حتى هذا ليس تجسيدًا حقيقـيًّا، إذا توخينا الدقة، فجافاسكريبت تستخدم آلية مختلفة لتبادل الوظائف بين الكائنات.</p> + +<div class="note" dir="rtl"> +<p><strong>ملاحظة</strong> : عدم وجود الـ "classic OOP" ليس بالضرورة أمرا سيئاً، كما ذكر أعلاه، البرمجة الغرضية التوجه OOP معقدة للغاية، لكن للجافاسكريبت بعض الطرق اللطيفة للاستفادة من ميزات الـ OO دون الحاجة للتعمق كثيرا فيها.</p> +</div> + +<p dir="rtl">لنبدأ بإنشاء كلاسات عن طريق الـ constructors، وإنشاء object instances منها في جافاسكريبت.<br> + أولاً وقبل كل شيء، نود منك عمل نسخة من الملف التالي <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs.html">oojs.html</a> الذي سبق وأن عملنا عليه في الدرس السابق.</p> + +<h3 dir="rtl" id="مثال_سهل">مثال سهل</h3> + +<p dir="rtl">دعونا نبدأ بالنظر في كيفية تعريف شخص من خلال دالة عادية. أضف هذه الدالة أدناه إلى التعليمات البرمجية الموجودة لديك:</p> + +<pre class="brush: js" dir="rtl">function createNewPerson(name) +{ + var obj = {}; + obj.name = name; + obj.greeting = function () { + alert('Hi! I\'m ' + this.name + '.'); + } + return obj; +}</pre> + +<p dir="rtl">يمكنك الآن إنشاء Person جديد بواسطة استدعاء هذه الدالة، حاول إدخال الأسطر التالية في console الجافاسكريبت في المتصفح الخاص بك:</p> + +<pre class="brush: js" dir="rtl">var salva = createNewPerson('salva'); +salva.name; +salva.greeting();</pre> + +<p dir="rtl">يعمل بشكل جيد، ولكنه عمل متعب قليلا. إذا كنا نعرف أننا سننشئ كائنًـا، لماذا نحتاج إلى إنشاء كائن جديد فارغ ونعود إليه (عبر return)؟ من حسن الحظ، جافاسكريبت تزودنا باختصار مفيد على شكل constructor functions، دعونا الآن ننشئ واحدا !</p> + +<p dir="rtl">قم باستبدال الدالة السابقة بهذه :</p> + +<pre class="brush: js">function Person(name) +{ + this.name = name; + this.greeting = function() { + alert('Hi! I\'m ' + this.name + '.'); + }; +}</pre> + +<p dir="rtl">الـ constructor function هو نسخة الجافاسكريبت فيما يتعلق بال class.<br> + ستلاحظ أن لديها كافة الميزات التي تتوقعها في الدالة، على الرغم من أنها لا تقوم بإرجاع أي شيء، ولا تقوم بإنشاء كائن، لحد الآن هي مجرد تعريف للـخصائص <code>(properties)</code> والوظائف <code>(methods)</code>، سترى أيضا هذه الكلمة <code>this</code> المستخدمة هنا، فكرتها أنه كلما تم إنشاء أحد الـ object instances، فإن الـ object's name property سيساوي قيمة الـ name الممررة إلى الـ constructor call، والوظيفة () greeting ستستخدم قيمة name الممررة إلى الـ constructor call أيضا.</p> + +<p dir="rtl"><strong>الـ constructor call هو الذي يكون على هذا الشكل new Object(parameters) كما سنرى بعد قليل.</strong></p> + +<div class="note"> +<p dir="rtl"><strong>ملاحظة </strong>: عادة ما يبدأ اسم الـ constructor function بحرف كبير - يتم استخدام هذا التقليد حتى يسهل التعرف على الـ constructor functions في التعليمات البرمجية بسهولة.</p> +</div> + +<p dir="rtl">كيف يمكننا استدعاء الـ constructor لإنشاء بعض الكائنات؟</p> + +<p dir="rtl">أضف الأسطر التالية أدناه الى اسفل التعليمات البرمجية الخاص بك:</p> + +<pre class="brush: js">var person1 = new Person('Bob'); +var person2 = new Person('Sarah');</pre> + +<p dir="rtl">احفظ التعليمات البرمجية الخاصة بك واعد تحميل الصفحة، وحاول إدخال الأسطر التالية في حقل المدخلات الخاص بك (كل على حدة) :</p> + +<pre class="brush: js" dir="rtl">person1.name +person1.greeting() +person2.name +person2.greeting()</pre> + +<p dir="rtl">جميل! اصبح لدينا كائنان جديدان في الصفحة، تم تخزين كل منهما ضمن namespace مختلفين، للوصول إلى الخصائص والوظائف الخاصة بهما، عليك أن تبدأ بالاتصال اما مع person1 أو person2، هما الان مغلفين بدقة، وبالتالي سنضمن عدم تشابك الوظائف مع بعضها، لاحظ ان لديهم نفس الخاصية name ونفس الوظيفة () greeting، الا أن كل واحد منهما سيحصل على القيمة name التي تم تعيينها له. هذا واحد من الاسباب التي تعرفنا على اهمية <code>this</code>، حيث انها ستشير الى الكائن الخاص بها وليس لشئ اخر.</p> + +<p dir="rtl">دعونا ننظر في ال constructor calls مرة أخرى :</p> + +<pre class="brush: js">var person1 = new Person('Bob'); +var person2 = new Person('Sarah');</pre> + +<p dir="rtl">في كل حالة من الحالتين، يتم استخدام الكلمة المحجوزة <code>new</code> لاخبار المتصفح بأننا نريد إنشاء object instance جديد، متبوعة باسم الدالة و ال parameters المطلوبة بين الأقواس، ويتم تخزين النتيجة في متغير، وهي شبيهة جدا بكيفية استدعاء standard function، ويتم إنشاء كل instance وفقا لهذا التعريف:</p> + +<pre class="brush: js">function Person(name) { + this.name = name; + this.greeting = function() { + alert('Hi! I\'m ' + this.name + '.'); + }; +}</pre> + +<p dir="rtl">بعد أن يتم إنشاء الكائنات الجديدة، فعليا، ستحتوي المتغيرات person1 و person2 على الكائنات التالية على هذا النحو :</p> + +<pre class="brush: js">{ + name : 'Bob', + greeting : function() { + alert('Hi! I\'m ' + this.name + '.'); + } +} + +{ + name : 'Sarah', + greeting : function() { + alert('Hi! I\'m ' + this.name + '.'); + } +}</pre> + +<p dir="rtl">قلنا فعليا لأنه في الواقع الفعلي لا يزال يتم تعريف الوظائف في ال class، وليس في object instances، على عكس ال object literal كما راينا سابقا.</p> + +<h3 dir="rtl" id="انشاء_constructor">انشاء constructor</h3> + +<p dir="rtl">المثال الذي راينا اعلاه، كان مجرد مقدمة، دعونا الان ننشئ Person() constructor function. فعلي.</p> + +<p dir="rtl">قم بحذف التعليمات البرمجية التي قمت بإدراجها حتى الآن، واضف هذا ال constructor بدلا منه – هو بالضبط نفس المثال البسيط اعلاه من حيث المبدأ، مع القليل من التعقيد :</p> + +<pre class="brush: js">function Person(first, last, age, gender, interests) { + this.name = { + first, + last + }; + this.age = age; + this.gender = gender; + this.interests = interests; + this.bio = function() { + alert(this.name.first + ' ' + this.name.last + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.'); + }; + this.greeting = function() { + alert('Hi! I\'m ' + this.name.first + '.'); + }; +};</pre> + +<p dir="rtl">الآن أضف ال constructor call التالي، لإنشاء object instance من ال constructor خاصتنا :</p> + +<pre class="brush: js">var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);</pre> + +<p dir="rtl">يمكنك الآن الوصول إلى الخصائص والوظائف مثلما فعلنا مع الكائن اعلاه :</p> + +<pre class="brush: js">person1['age'] +person1.interests[1] +person1.bio() +// etc.</pre> + +<div class="note" dir="rtl"> +<p><strong>ملاحظة</strong>: إذا كنت تواجه صعوبة في الحصول على هذا العمل، حاول مقارنة التعليمات البرمجية الخاصة بك مع التعليمات الخاصة بنا — see <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-finished.html">oojs-class-finished.html</a> (also <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-finished.html">see it running live</a>).</p> +</div> + +<h3 dir="rtl" id="امتحان_بسيط">امتحان بسيط</h3> + +<p dir="rtl">في هذا الامتحان البسيط وجب عليك إضافة بضعة أسطر اضافية الى الكائن Person خاصتك، ومحاولة جلب وإعداد الاعضاء من ناتج ال object instances.</p> + +<p dir="rtl">هناك مشكلتين بخصوص الوظيفة ()bio :<br> + أ- مخرجاتها ستكون دائما عبارة عن الضمير هو "He"، حتى وان كان الشخص انثى.<br> + ب- الوظيفة bio سترجع اثنين من الاهتمامات (interests) فقط، حتى وان تم تعيين أكثر من ذالك في مصفوفة الاهتمامات interests.<br> + يمكن العمل على حل هذه المشكلة داخل ال ?( class definition ( constructor.<br> + يمكنك وضع أي كود تريده داخل ال constructor (على الأرجح سوف تحتاج لبضع جمل شرطية "if..else if...else" وحلقة "for").<br> + مطلوب منك حل هذه المشكلة آخدا بعين الاعتبار نوع الجنس (ذكر/انثى). وايضا عدد الاهتمامات interests كان تكون 1 أو 2 أو أكثر من 2. </p> + +<div class="note" dir="rtl"> +<p><strong>ملاحظة </strong>: إذا واجهتك مشكلة، فقد قمنا بتوفير الاجابة، <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html">answer inside our GitHub repo</a> (<a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html">see it live</a>) — ننصح بالاعتماد على نفسك اولا !.</p> +</div> + +<h2 dir="rtl" id="طريقة_اخرى_لانشاء_ال_object_instances">طريقة اخرى لانشاء ال object instances</h2> + +<p dir="rtl">حتى الآن رأينا طريقتان مختلفتان لإنشاء ال object instance :</p> + +<ol dir="rtl"> + <li>باستخدام <a href="/ar/docs/Learn/JavaScript/Objects/Basics#أساسيات_الكائن"> الاعلان عن ال object literal</a> (الدرس السابق).</li> + <li>باستخدام constructor function (انظر أعلاه).</li> +</ol> + +<p dir="rtl">هذا منطقي, ولكن هناك طرق أخرى، نريد ان نجعلها مالوفة لديك في حالة مصادفتها في مكان ما على شبكة الويب.</p> + +<h3 dir="rtl" id="The_Object()_constructor">The Object() constructor</h3> + +<p dir="rtl">يمكنك استخدام ال <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object()</a></code> constructor لانشاء كائن جديد، نعم، حتى الكائنات العامة تحتوي على constructor والذي بدوره يولد كائنا فارغا.</p> + +<p dir="rtl">حاول ادخال السطر التالي في console المتصفح الخاص بك :</p> + +<pre class="brush: js" dir="rtl">var person1 = new Object();</pre> + +<p dir="rtl">سيقوم هذا بتخزين كائن فارغ في المتغير person1. يمكنك بعد ذالك اضافة الخصائص والوظائف لهدا الكائن،<br> + باستخدام نقطة الترميز او باستخدام اقواس الترميز، حسب الطلب. جرب هذا المثال :</p> + +<pre class="brush: js">person1.name = 'Chris'; +person1['age'] = 38; +person1.greeting = function() { + alert('Hi! I\'m ' + this.name + '.'); +}</pre> + +<p dir="rtl">يمكنك ايضا تمرير object literal الى ال Object() constructor ك parameter معبأة على شكل properties/methods. جربه بنفسك :</p> + +<pre class="brush: js">var person1 = new Object({ + name : 'Chris', + age : 38, + greeting : function() { + alert('Hi! I\'m ' + this.name + '.'); + } +});</pre> + +<h3 dir="rtl" id="باستخدام_الوظيفة_()create">باستخدام الوظيفة ()create</h3> + +<p dir="rtl">الجافاسكريبت لديها وظيفة مبنية مسبقا (built-in method) تسمى <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create">()</a></code><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create">create</a></code>, والتي تسمح لك بإنشاء object instance جديد استناداً إلى كائن موجود.</p> + +<p dir="rtl">جرب ادخال هذا السطر في console المتصفح الخاص بك :</p> + +<pre class="brush: js">var person2 = Object.create(person1);</pre> + +<p dir="rtl">والان جرب هذه :</p> + +<pre class="brush: js">person2.name +person2.greeting()</pre> + +<p dir="rtl">سترى أن person2 قد تم إنشاؤه استناداً إلى person1 — فاصبح يمتلك نفس الخصائص والوظائف المتاحة لل person1 وهذا مفيد جداً، حيث أنه سيسمح لك بإنشاء object instances جديد، دون الحاجة إلى تعريف ال constructor.<br> + الجانب السلبي هو أن ال <code>()create</code> غير مدعومة من قبل بعض المتصفحات، فيما يتعلق بالعودة ك constructors ( <span class="short_text" id="result_box" lang="ar"><span>IE8</span> وما قبله</span> لا يدعم هذه الوظيفة ) ، بالإضافة إلى ذلك يعتقد البعض أن ال constructors تمنح التعليمات البرمجية الخاصة بك مميزات اكثر. يمكنك إنشاء constructors خاصة بك في مكان واحد، ومن ثم إنشاء instances حسب الحاجة،</p> + +<p dir="rtl">ومع ذلك، إذا لم تكن قلقا جداً بشأن دعم المتصفحات القديمة حقاً، وتحتاج فقط لبضع نسخ من الكائن، فان انشاء constructor قد يكون مبالغة بالنسبة للتعليمات البرمجية الخاصة بك. الأمر متروك لك ولما تفضله. ببساطة بعض الناس يجدون ال <code>()create</code>. سهلة في الفهم والاستخدام.</p> + +<p dir="rtl">سوف نستكشف ال <code>()create</code> بمزيد من التفصيل في وقت لاحق.</p> + +<h2 dir="rtl" id="ملخص">ملخص</h2> + +<p dir="rtl">قدمت هذه المقالة طريقة مفصلة حول ال object-oriented نظريا، هذه ليست القصة بأكملها، ولكنها تعطيك فكرة عن ما نتعامل معه هنا. باﻹضافة إلى ذلك، فقد راينا الكيفية التي ترتبط بها جافا سكريبت، وكيف انها تختلف عن مفهوم ال "classic OOP"، راينا كذالك، كيفية تنفيذ ال الكلاسات classes في الجافاسكريبت باستخدام ال constructor functions، وطرق مختلفة لتوليد ال object instances.</p> +</div> + +<p dir="rtl"><strong>ان شاء الله في الدرس القادم سوف نستكشف prototypes الجافا سكريبت.</strong></p> + +<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}</p> diff --git a/files/ar/learn/javascript/objects/object_prototypes/index.html b/files/ar/learn/javascript/objects/object_prototypes/index.html new file mode 100644 index 0000000000..1e91d18013 --- /dev/null +++ b/files/ar/learn/javascript/objects/object_prototypes/index.html @@ -0,0 +1,248 @@ +--- +title: ال Object prototypes +slug: Learn/JavaScript/Objects/Object_prototypes +translation_of: Learn/JavaScript/Objects/Object_prototypes +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}</div> + +<p class="summary" dir="rtl">ال Prototypes هي الآلية التي تعتمدها الجافاسكريبت للوراثة، بمعنى آخر، يمكننا من خلال ال Prototypes جعل كائن يرث مميزات كائن آخر. وهي تعمل بشكل مختلف عن مفهوم آلية الوراثة في اللغات الغرضية التوجة الكلاسيكية. في هذا الدرس سنكتشف هذا الاختلاف، وسنرى كيف تعمل ال prototype chains، وسنلقي نظرة حول كيفية إضافة وظيفة معينة لـ constructors موجودة عن طريق الخاصية prototype. </p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th dir="rtl" scope="row">المتطلبات الأساسية :</th> + <td dir="rtl">دراية لا بأس بها بخصوص الحاسوب، الإلمام بمبادئ وأساسيات الـ HTML وCSS وجافاسكريبت (راجع <a href="/en-US/docs/Learn/JavaScript/First_steps">First steps</a> and <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Building blocks</a>) وأساسيات بناء الكائنات في الجافاسكريبت OOJS (راجع <a href="/en-US/docs/Learn/JavaScript/Object-oriented/Introduction">Introduction to objects</a>).</td> + </tr> + <tr> + <th dir="rtl" scope="row">الهدف :</th> + <td dir="rtl">فهم جافاسكريبت object prototypes، وكيف تعمل ال prototype<strong> </strong> chains، وكيفية إضافة وظائف جديدة على الخاصية prototype.</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="الجافا_سكريبت_لغة_تعتمد_على_ال_prototype_؟">الجافا سكريبت لغة تعتمد على ال prototype ؟</h2> + +<div style="font-size: 15px; font-family: 'tahoma';"> +<p dir="rtl">غالبا ما توصف جافاسكريبت، على أنها لغة تعتمد على البروتوتايب (prototype-based language)، بمعنى، ان كل <strong><code>كائن</code></strong> في الجافاسكريبت يحتوي على <strong><code>الكائن</code></strong> <strong><code>prototype</code></strong>، الذي يرث خصائص ووظائف <strong><code>ال </code></strong> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code>. الكائن <strong><code>prototype</code></strong> يمكنه أيضا أن يحتوي على <strong><code>كائن prototype</code></strong> خاص به، ويرث خصائصه ووظائفه ايضا، وهكذا ودواليك. يعرف هذا السلوك بال prototype chain (سلسلة النمودج). وهذا يشرح، كيف انه بإمكان كائن معين ان يصل لخصائص ووظائف مُعَرَّفة في كائن اخر.</p> + +<p dir="rtl">حسنا، حتى نكون أكثر دقة، الخصائص والوظائف مُعَرَّفة في الـ Objects' constructor functions وليس في الـ object instances (مثيلات الكائن).</p> + +<p dir="rtl">بالنسبة للبرمجة الكلاسيكية غرضية التوجه classic OOP، يتم تعريف الكلاسات، بعد أن يتم إنشاء object instances، ويتم نسخ كافة الخصائص والوظائف المعرفة في الكلاس فوق ال instance.<br> + في الجافاسكريبت، الأمر مختلف، حيث يتم تكوين رابط بين الـ object instance والـ constructor الخاص به. يمكن تشبيه الأمر بتكوين (حلقة في سلسلة ال <code>prototype</code>)، ويتم الوصول إلى الخصائص والوظائف من الـ constructor، من خلال التنقل صعودا في السلسلة. بمعنى اخر، سيبدأ مُفسِّر الجافاسكريبت بالبحث داخل النمادج <strong><code>prototypes،</code></strong> عن الخاصّية او الوظيفة المطلوبة، من اسفل سلسلة الوراثة، ويكمل بالبحث حتى يصل الى اعلاها.</p> + +<p dir="rtl">دعونا نلقي نظرة على هذا المثال ليصبح الأمر أكثر وضوحا.</p> + +<h2 dir="rtl" id="فهم_ال_prototype_objects">فهم ال prototype objects</h2> + +<p dir="rtl">لنَـعُد إلى المثال الذي انتهينا من كتابتة Person() constructor، قم بتحميل المثال التالي في المتصفح الخاص بك، إذا لم يكن لديك المثال الذي عملنا عليه في الدرس السابق استخدم المثال الخاص بنا <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html">oojs-class-further-exercises.html</a> او (قم بنسخ <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html">source code</a>).</p> + +<p dir="rtl">في هذا المثال قمنا بتعريف constructor function، كالتالي :</p> + +<pre class="brush: js">function Person(first, last, age, gender, interests) { + + // property and method definitions + this.frist = frist; + //etc.. +};</pre> + +<p dir="rtl">ثم قمنا بإنشاء object instance منه هكذا :</p> + +<pre class="brush: js">var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);</pre> + +<p dir="rtl">إذا قمت بكتابة "<strong>.</strong><code>person1</code>" في console الجافاسكريبت، ستلاحظ ان المتصفح يقوم بالاكمال التلقائي ويظهر اسماء الاعضاء الموجودة في هذا الكائن. </p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13853/object-available-members.png" style="display: block; margin: 0 auto;"></p> + +<p dir="rtl">في هذه القائمة، نرى الاعضاء المعرفة في ال Person() constructor، الذي يمثله ال <strong><code>person1</code></strong> وهذه الاعضاء هي <code>name, age, gender, interests, bio</code> و <code>greeting</code>. كما نرى ايضا بعض الأعضاء الآخرين مثل <code>watch ،valueOf</code>،...الخ. وهي معرفة في <code>prototype</code> ال Person() constructor، ال <code>prototype</code> الخاص بال Person() constructor هو ال <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code> نفسه.</p> + +<p dir="rtl">والرسم التبياني التالي يوضح لنا، كيفة عمل ال prototype chain.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13891/MDN-Graphics-person-person-object-2.png" style="display: block; height: 150px; margin: 0px auto; width: 700px;"></p> + +<p dir="rtl">فماذا سيحدث إذا قمنا باستدعاء وظيفة على ال <strong><code>person1</code></strong>، وهي احدى الوظائف المعرفة في ال Object؟. على سبيل المثال:</p> + +<pre class="brush: js">person1.valueOf()</pre> + +<p dir="rtl">ببساطة فهذه الوظيفة <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf">()</a></code><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf">valueOf</a></code> مملوكة لل <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code> وبما ان بروتوتايب ال <code>()Person</code> هو ال <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code> وال <strong><code>person1</code></strong> هو من يمثله فسيرث ال <strong><code>person1</code></strong> هذه الخاصية من <code>Object</code>. مهمة ال <code>valueOf</code> هي العودة بقيمة الكائن الذي تم استدعاؤها عليه، حاول تجربتها وسترى ما الذي سيحدث.</p> + +<p dir="rtl">في هذه الحالة ستسير عملية البحث على الشكل التالي:</p> + +<ul dir="rtl"> + <li>في البداية سيقوم المتصفح بالتحقق ما اذا كان الكائن <strong><code>person1</code></strong> يحتوي على الوظيفة <code>()valueOf</code>. (لاحظ هنا، بدا البحث من اسفل السلسلة كما ذكرنا اعلاه).</li> + <li>اذا لم يتم ذالك، سيقوم المتصفح بالتحقق ما اذا كان ال Person() constructor يحتوي على الوظيفة <code>()valueOf</code></li> + <li>اذا لم يتم ذالك، سيقوم المتصفح بالتحقق ما اذا كان <code>prototype</code> ال Person() constructor يحتوي على الوظيفة <code>()valueOf</code></li> + <li>اذا لم يتم ذالك ايضا، سيقوم المتصفح بالتحقق ما اذا كان <code>__proto__</code> ال Person() constructor الذي هو (Object) يحتوي على الوظيفة <code>()valueOf</code><br> + اذا تم، ستستدعى الوظيفة المطلوبة للعمل عليها، وكل شئ على ما يرام. اذا لم يجد ما يبحث عنه من ادنى السلسلة الى اعلاها، سيعود ب <strong><code>null</code></strong> (و <code>null</code> هي اعلى السلسلة).</li> +</ul> + +<div class="note" dir="rtl"> +<p>تذكير: الخصائص والوظائف لا يتم نسخها من كائن إلى آخر في ال ptototype chain —<br> + بل يتم الوصول إليها من خلال التنقل صعودا في السلسلة كما هو موضح أعلاه.</p> +</div> + +<div class="note" dir="rtl"> +<p><strong>ملاحظة:</strong> رسميا لا توجد طريقة للوصول مباشرة الى الكائن prototype داخل كائن. "الروابط" بين العناصر موجودة في السلسلة ويتم تعريفها في خاصية داخلية، يشار إليها ب [[prototype]] في مواصفات لغة جافا سكريبت (see {{glossary("ECMAScript")}}). ومع ذلك فمعظم المتصفحات الحديثة تحتوي على خاصية متاحة لها تسمى <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto">__proto__</a></code> (لديها 2 underscores في كلا جوانبها), والتي تحتوي على الكائن prototype. على سبيل المثال جرب:<br> + <code> __</code><strong><code>person1.__proto</code> او <code> __eprson1.__proto__.__proto</code></strong><br> + لمشاهدة ما يشبه السلسلة في التعليمات البرمجية!</p> +</div> + +<h2 dir="rtl" id="الخاصية_prototype_اين_يتم_تعريف_الأعضاء_الموروثة">الخاصية prototype : اين يتم تعريف الأعضاء الموروثة</h2> + +<p dir="rtl">اذاً، أين يتم تعريف الخصائص والوظائف الموروثة؟<br> + إذا نظرتم إلى صفحة مرجع ال <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code> سترون هناك في الجانب الأيسر عددا كبيرا من الخصائص والوظائف المدرجة، البعض منها موروثة، واخرى غير موروثة، لم هذا؟</p> + +<p dir="rtl">الجواب، هو أن الاعضاء الموروثة هي تلك المعرفة في الخاصية prototype (يمكن استدعاؤها تحت ال namespace)، اي تلك التي تبدأ ب <strong>.<code>Object.prototype</code></strong> وليست تلك التي تبدأ بمجرد <strong>.<code>Object</code></strong>، قيمة الخاصية prototype هي كائن، والتي هي في الاساس حزمة او وعاء لتخزين الخصائص والوظائف التي نريدها أن تكون موروثة من قبل الكائنات السفلية في ال prototype chain.</p> + +<p dir="rtl">حتى ال <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf">()</a></code><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/watch">Object.prototype.watch</a></code> او <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/watch">()</a></code><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf">Object.prototype.valueOf</a></code>، متاحة لأي نوع من أنواع الكائنات التي ترث من ال <strong><code>Object.prototype</code></strong> بما في ذلك ال object instances الجديدة التي يتم إنشاؤها من ال constructor، (ك <code>person1</code> مثلا).</p> + +<p dir="rtl"><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">()</a><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is">Object.is()</a></code> ،<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object.keys</a></code>، والأعضاء الاخرى غير معرفة داخل حزمة ال prototype وهي غير موروثة بواسطة ال object instances أو أنواع الكائنات التي ترث من ال ()Object. هي خصائص ووظائف متاحة فقط لل Object() constructor نفسه.</p> + +<div class="note" dir="rtl"> +<p><strong>ملاحظة:</strong> يبدو هذا غريبا - كيف يمكن أن يكون لديك وظيفة معرفة في ال constructor، الذي هو في حد ذاته function؟ حسنا، هي ايضا function من النوع object - راجع مرجع ال <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function">Function()</a></code> constructor حتى تتاكد بنفسك.</p> +</div> + +<p dir="rtl">يمكنك التحقق من خصائص البروتوتايب الموجودة بنفسك، ارجع الى مثالنا السابق وحاول ادخال السطر التالي في الجافاسكريبت console:</p> + +<pre class="brush: js">Person.prototype</pre> + +<p dir="rtl">المخرجات لن تظهر لك الكثير، لاننا حتى الان، لم نقم باضافة أي شيء في بروتوتايب ال constructor الخاص بنا، بشكل افتراضي، دائماً يبدأ بروتوتايب ال constructor فارغا. الآن جرب ما يلي:</p> + +<pre class="brush: js">Object.prototype</pre> + +<p dir="rtl">سترى عددا كبيرا من الوظائف المعرفة في الخاصية <code>prototype</code> الخاصة بال <code>Object</code>، ثم التي تتوفر على الكائنات التي ترث من ال <code>Object</code>، كما وضحنا في وقت سابق.</p> + +<p dir="rtl">سنرى أمثلة أخرى للوراثة عن طريق سلسلة البروتوتايب <strong><code>prototype chain</code></strong> في جميع أنحاء جافا سكريبت، حاول البحث في الوظائف والخصائص المعرفة في بروتوتايب الكائنات العامة ك <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code> <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">،Date</a></code> <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">،Number</a></code>، و <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code> على سبيل المثال. كلها تحتوي على عدد من الأعضاء المعرفة في البروتوتايب الخاص بها، على سبيل المثال عندما نقوم بإنشاء سلسلة نصية (string)، مثل هذه:</p> + +<pre class="brush: js">var myString = 'This is my string.';</pre> + +<p dir="rtl"><code>myString</code>، فور انشائها سيتاح لها العديد من الوظائف المفيدة، مثل <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split">()</a></code><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split">split</a></code> و <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split">()</a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf">indexOf</a></code> و <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf">()</a></code><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace">replace</a></code> ... الخ.</p> + +<div class="warning" dir="rtl"> +<p><strong>هام</strong>: الخاصية prototype هي واحدة من أكثر الاجزاء ارباكا لجافا سكريبت، قد تعتقد أن <code>this</code> تشير الى الكائن prototype للكائن الحالي، لكن ليس هذا ما يحدث (تذكر ان هذا كائن داخلي يمكن الوصول إليه بواسطة ال __proto__ ). ال prototype هي خاصية تحتوي على الكائن الذي ستعرف فيه الاعضاء التي تريدها أن تكون موروثة.</p> +</div> + +<h2 dir="rtl" id="إعادة_النظر_في_الوظيفة_()create">إعادة النظر في الوظيفة ()create</h2> + +<p dir="rtl">راينا سابقا كيف يمكن استخدام الوظيفة <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create">()</a></code><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create">Object.create</a></code> لانشاء object instance.</p> + +<p dir="rtl">على سبيل المثال، حاول تجربة هذا في console الجافا سكريبت في المثال الخاص بك:</p> + +<pre class="brush: js">var person2 = Object.create(person1);</pre> + +<p dir="rtl">ماتفعله الوظيفة <code>()create</code> في الواقع هو انشاء كائن جديد، من الكائن <code>prototype</code> المحدد، في هذه الحالة، سيتم إنشاء <code>person2</code> باستخدام <code>person1</code> على شكل كائن <code>prototype</code>، يمكنك التحقق من ذلك عن طريق إدخال ما يلي في ال console :</p> + +<pre class="brush: js">person2.__proto__</pre> + +<p dir="rtl">النتيجة: إرجاع الكائن <code>person1</code>.</p> + +<h2 dir="rtl" id="الخاصية_constructor">الخاصية constructor</h2> + +<p dir="rtl">كل object instance يحتوي على الخاصية <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor">constructor</a></code> والتي تشير إلى ال constructor function الأصلي الذي أنشأ ال instance.</p> + +<p dir="rtl">على سبيل المثال، حاول ادخال هذه الأوامر في ال console:</p> + +<pre class="brush: js">person1.constructor +person2.constructor</pre> + +<p dir="rtl">المفروض على كل منهما العودة لل Person() constructor، كما سيحتوي كل منهما على التعريف الأصلي لهذه ال instances.</p> + +<p dir="rtl">خدعة ذكية، يمكنك وضع الاقواس في نهاية الخاصية constructor (مع البرامترات المطلوبة) لانشاء object instance اخر من هذا ال constructor، ال constructor هو في النهاية function، لذالك يمكنك استدعاؤها باستخدام الأقواس، ستحتاج فقط إلى تضمين الكلمة المحجوزة new لتحديد أنك تريد استخدام هذه ال function ك constructor.</p> + +<p dir="rtl">حاول ادخال هذا في ال console:</p> + +<pre class="brush: js">var person3 = new person1.constructor('Karen', 'Stephenson', 26, 'female', ['playing drums', 'mountain climbing']);</pre> + +<p dir="rtl"><span id="result_box" lang="ar"><span>الآن</span> <span>حاول الوصول إلى</span> <span>خصائص الكائن</span> <span>الجديد الخاص بك</span><span>، على سبيل المثال</span><span>:</span></span></p> + +<pre class="brush: js" dir="rtl">person3.name.first +person3.age +person3.bio()</pre> + +<p dir="rtl">هذا سيعمل بشكل جيد. وعلى الارجح لن تحتاج لاستخدامه في كثير من الأحيان، ولكن يمكن أن يكون مفيدا حقا، عندما تريد إنشاء instance جديد لا يشير إلى ال constructor الأصلي <span id="result_box" lang="ar"><span>المتاح</span></span>.</p> + +<p dir="rtl">الخاصية constructor لها استخدامات أخرى كذالك. على سبيل المثال، إذا كان لديك<br> + object instance وترغب في إرجاع اسم ال contructor وهو instance، يمكنك استخدام ما يلي:</p> + +<pre class="brush: js">instanceName.constructor.name</pre> + +<p dir="rtl">جرب هذا، على سبيل المثال:</p> + +<pre class="brush: js">person1.constructor.name</pre> + +<h3 dir="rtl" id="التعديل_على_ال_prototypes">التعديل على ال prototypes</h3> + +<p dir="rtl"><span id="result_box" lang="ar"><span>دعونا نلقي</span> <span>نظرة على مثال</span> يقوم <span>بتعديل</span><span> الخاصية</span> </span> <code>prototype</code> <span lang="ar"><span>الخاصة بال</span> </span>constructor<span lang="ar"><span>.</span></span></p> + +<p dir="rtl">نعود إلى مثالنا <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html">oojs-class-further-exercises.html</a> قم بعمل نسخة من الكود التالي <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html">source code</a>. اسفل كود الجافاسكريبت، اضف التعليمة البرمجية التالية، وهي خاصة باظافة وظيفة جديدة على بروتوتايب ال constructor : </p> + +<pre class="brush: js">Person.prototype.farewell = function() { + alert(this.name.first + ' has left the building. Bye for now!'); +}</pre> + +<p dir="rtl">احفظ التعليمات البرمجية وقم بتحميل الصفحة في المتصفح، وحاول إدخال ما يلي في حقل المدخلات الخاص بك:</p> + +<pre class="brush: js">person1.farewell();</pre> + +<p dir="rtl">ستحصل على رسالة تنبيه معروضة (alert)، تضم اسم الشخص كما هو محدد داخل ال constructor. وهذا مفيد حقاً، ولكن الاكثر افائدة هو أنه سيتم تحديث سلسلة الوراثة باكملها بشكل حيوي، و بشكل تلقائي يتم جعل الوظيفة الجديدة متاحة لجميع ال object instances المشتقة من ال constructor.</p> + +<p dir="rtl">لنفكر في هذا للحظة. في التعليمة البرمجية خاصتنا، قمنا بتعريف ال Person constructor<br> + ثم قمنا بانشاء instance object من هذا ال Person constructor وهو ال person1 ثم قمنا باظافة الوظيفة الجديدة على بروتوتايب ال Person constructor.</p> + +<pre class="brush: js">function Person(first, last, age, gender, interests) { + + // property and method definitions + +}; + +var person1 = new Person('Tammi', 'Smith', 32, 'neutral', ['music', 'skiing', 'kickboxing']); + +Person.prototype.farewell = function() { + alert(this.name.first + ' has left the building. Bye for now!'); +}</pre> + +<p dir="rtl">ولكن الوظيفة <code>()farewell</code> لا تزال متاحة في ال <code>person1</code> object instance —<span id="result_box" lang="ar"><span> تم</span> تحديث <span>الوظائف</span> <span>المتاحة لها</span> <span>تلقائيا</span></span>، هذا يثبت ما قلناه سابقا عن ال <code>prototype chain</code>. والمتصفح سيبحث صعودا في السلسلة لإيجاد الوظائف التي لم يتم تعريفها في ال object instance نفسها، بدلا من تلك الوظائف التي يتم نسخها إلى ال instance. وهذا يجعلها قوية جداً، و نظامها الوظيفي قابل للتوسع/للتمدد.</p> + +<div class="note" dir="rtl"> +<p><strong>Note</strong>: إذا كنت تواجه صعوبة في الحصول على هذا العمل, الق نظرة على المثال الخاص بنا <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-prototype.html">oojs-class-prototype.html</a> (شاهد ايضا <a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-prototype.html">running live</a> ).</p> +</div> + +<p dir="rtl">نادرا ما ستشاهد خصائص معرفة في الخاصية prototype، على سبيل المثال يمكن إضافة خاصية جديدة كالتالي:</p> + +<pre class="brush: js">Person.prototype.fullName = 'Bob Smith';</pre> + +<p dir="rtl">ولكن هذه ليست مرنة جداً، حيث ان ال person لا يمكنه استدعاءها، من الافضل القيام بذلك من خلال بناء <code>fullName</code> خارج <code>name.first</code> و <code>name.last</code>:</p> + +<pre class="brush: js">Person.prototype.fullName = this.name.first + ' ' + this.name.last;</pre> + +<p dir="rtl">ومع ذالك فهي لن تعمل، في هذه الحالة <code><strong>this</strong></code> ستشير الى النطاق العام (global scope). وليس الى نطاق الدالة (function scope). استدعاء هذه الخاصية سيعود ب undefined undefined. سيعمل هذا بشكل جيد في الوظائف التي عرفناها سابقا في ال prototype لانها توجد داخل ال function scope، والتي ستنقل بنجاح إلى نطاق مثيل الكائن (object instance scope). لذا قد تقوم بتعريف خصائص ثابتة (constant properties — أي تلك التي لا تحتاج للتغيير) في ال prototype، ولكن عموما فهي تعمل بشكل أفضل لتعريف خصائص داخل ال constructor.</p> + +<p dir="rtl">في الواقع، النمط الشائع إلى حد كبير بخصوص تعريف الكائن، هو ان يتم تحديد الخصائص داخل ال constructor، والوظائف على ال prototype. وهذا يجعل الكود اسهل في القراءة، كما سيحتوي ال constructor على الخصائص المعرفة فقط، ويتم تقسيم الوظائف في بلوكات منفصلة، مثلا:</p> + +<pre class="brush: js">// Constructor with property definitions + +function Test(a,b,c,d) { + // property definitions +}; + +// First method definition + +Test.prototype.x = function () { ... } + +// Second method definition + +Test.prototype.y = function () { ... } + +// etc.</pre> + +<p dir="rtl">هذا النمط من العمل يمكن ان نراه في Piotr Zalewa's <a href="https://github.com/zalun/school-plan-app/blob/master/stage9/js/index.js">school plan app</a>.</p> + +<h3 id="Summary">Summary</h3> + +<p dir="rtl">غطت هذه المادة، جافاسكريبت <strong><code>object prototypes</code></strong>، وكيف يسمح ال prototype object chains للكائنات أن ترث الميزات من بعضها البعض، وكيف يمكن استخدام الخاصية prototype لإضافة وظائف جديدة على ال constructors، وغيرها من الموضوعات ذات الصلة.</p> + +<p><strong>في المقال القادم سنرى كيفية تنفيذ الوراثة بين اثنين من الكائنات الخاصة بك.</strong></p> +</div> + +<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}</p> diff --git a/files/ar/learn/server-side/django/index.html b/files/ar/learn/server-side/django/index.html new file mode 100644 index 0000000000..27acf45d5e --- /dev/null +++ b/files/ar/learn/server-side/django/index.html @@ -0,0 +1,70 @@ +--- +title: Django Web Framework (Python) +slug: Learn/Server-side/Django +tags: + - Beginner + - CodingScripting + - Intro + - Learn + - NeedsTranslation + - Python + - Server-side programming + - TopicStub + - django +translation_of: Learn/Server-side/Django +--- +<div>{{LearnSidebar}}</div> + +<p><font>Django هو إطار ويب بشعبية كبيرة ومميز بالكامل ، مكتوب بلغة Python. </font><font>توضح لك هذه الوحدة سبب كون Django أحد أكثر أطر خادم الويب شيوعًا ، وكيفية إعداد بيئة تطوير ، وكيفية البدء في استخدامه لإنشاء تطبيقات الويب الخاصة بك.</font></p> + +<h2 id="المتطلبات_الأساسية"><font><font>المتطلبات الأساسية</font></font></h2> + +<p><font><font>قبل البدء في هذه الوحدة ، لا تحتاج إلى أي معرفة بجانغو. </font><font>من الناحية المثالية ، ستحتاج إلى فهم برمجة الويب من جانب الخادم وأطر الويب من خلال قراءة الموضوعات في </font><font>وحدة </font></font><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps"><font><font>الخطوات الأولى لبرمجة موقع الويب من جانب الخادم</font></font></a><font><font> .</font></font></p> + +<p><font><font>يوصى </font><font>بمعرفة عامة بمفاهيم البرمجة </font></font><a href="https://developer.mozilla.org/en-US/docs/Glossary/Python"><font><font>Python</font></font></a><font><font> ، ولكنها ليست ضرورية لفهم المفاهيم الأساسية.</font></font></p> + +<div class="note"> +<p><strong>Note</strong>: Python is one of the easiest programming languages for novices to read and understand. That said, if you want to understand this module better, there are numerous free books and tutorials available on the Internet to help you out (new programmers might want to check out the <a href="https://wiki.python.org/moin/BeginnersGuide/NonProgrammers">Python for Non Programmers</a> page on the python.org wiki).</p> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></dt> + <dd>In this first Django article we answer the question "What is Django?" and give you an overview of what makes this web framework special. We'll outline the main features, including some advanced functionality that we won't have time to cover in detail in this module. We'll also show you some of the main building blocks of a Django application, to give you an idea of what it can do before you set it up and start playing.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></dt> + <dd>Now that you know what Django is for, we'll show you how to set up and test a Django development environment on Windows, Linux (Ubuntu), and macOS — whatever common operating system you are using, this article should give you what you need to be able to start developing Django apps.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></dt> + <dd>The first article in our practical tutorial series explains what you'll learn, and provides an overview of the "local library" — an example website we'll be working through and evolving in subsequent articles.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></dt> + <dd>This article shows how you can create a "skeleton" website project as a basis, which you can then go on to populate with site-specific settings, urls, models, views, and templates.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></dt> + <dd>This article shows how to define models for the <em>LocalLibrary</em> website — models represent the data structures we want to store our app's data in, and also allow Django to store data in a database for us (and modify it later on). It explains what a model is, how it is declared, and some of the main field types. It also briefly shows a few of the main ways you can access model data.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></dt> + <dd>Now that we've created models for the <em>LocalLibrary </em>website, we'll use the Django Admin site to add some "real" book data. First we'll show you how to register the models with the admin site, then we'll show you how to login and create some data. At the end we show some ways in which you can further improve the presentation of the admin site.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></dt> + <dd>We're now ready to add the code to display our first full page — a home page for the <em>LocalLibrary</em> that shows how many records we have of each model type and provides sidebar navigation links to our other pages. Along the way we'll gain practical experience in writing basic URL maps and views, getting records from the database, and using templates.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></dt> + <dd>This tutorial extends our <em>LocalLibrary</em> website, adding list and detail pages for books and authors. Here we'll learn about generic class-based views, and show how they can reduce the amount of code you have to write for common use cases. We'll also go into URL handling in greater detail, showing how to perform basic pattern matching.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></dt> + <dd>This tutorial extends our <em>LocalLibrary</em> website, adding a session-based visit-counter to the home page. This is a relatively simple example, but it does show how you can use the session framework to provide persistent behaviour for anonymous users in your own sites.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></dt> + <dd>In this tutorial we'll show you how to allow users to login to your site with their own accounts, and how to control what they can do and see based on whether or not they are logged in and their <em>permissions</em>. As part of this demonstration we'll extend the <em>LocalLibrary</em> website, adding login and logout pages, and user- and staff-specific pages for viewing books that have been borrowed.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></dt> + <dd>In this tutorial we'll show you how to work with <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML Forms</a> in Django, and in particular the easiest way to write forms to create, update, and delete model instances. As part of this demonstration we'll extend the <em>LocalLibrary</em> website so that librarians can renew books, and create, update, and delete authors using our own forms (rather than using the admin application).</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></dt> + <dd>As websites grow they become harder to test manually — not only is there more to test, but, as the interactions between components become more complex, a small change in one area can require many additional tests to verify its impact on other areas. One way to mitigate these problems is to write automated tests, which can easily and reliably be run every time you make a change. This tutorial shows how to automate <em>unit testing</em> of your website using Django's test framework.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></dt> + <dd>Now you've created (and tested) an awesome <em>LocalLibrary</em> website, you're going to want to install it on a public web server so that it can be accessed by library staff and members over the Internet. This article provides an overview of how you might go about finding a host to deploy your website, and what you need to do in order to get your site ready for production.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></dt> + <dd>Protecting user data is an essential part of any website design. We previously explained some of the more common security threats in the article <a href="https://developer.mozilla.org/en-US/docs/Web/Security">Web security</a> — this article provides a practical demonstration of how Django's built-in protections handle such threats.</dd> +</dl> + +<h2 id="Assessments">Assessments</h2> + +<p>The following assessment will test your understanding of how to create a website using Django, as described in the guides listed above.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></dt> + <dd>In this assessment you'll use some of the knowledge you've learned from this module to create your own blog.</dd> +</dl> diff --git a/files/ar/learn/server-side/express_nodejs/index.html b/files/ar/learn/server-side/express_nodejs/index.html new file mode 100644 index 0000000000..4a5dc0699f --- /dev/null +++ b/files/ar/learn/server-side/express_nodejs/index.html @@ -0,0 +1,77 @@ +--- +title: Express web framework (Node.js/JavaScript) +slug: Learn/Server-side/Express_Nodejs +tags: + - Beginner + - CodingScripting + - Express + - Express.js + - Intro + - JavaScript + - Learn + - NeedsTranslation + - Node + - Server-side programming + - TopicStub + - node.js +translation_of: Learn/Server-side/Express_Nodejs +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Express is a popular unopinionated web framework, written in JavaScript and hosted within the Node.js runtime environment. This module explains some of the key benefits of the framework, how to set up your development environment and how to perform common web development and deployment tasks.</p> + +<h2 id="Prerequisites">Prerequisites</h2> + +<p>Before starting this module you will need to understand what server-side web programming and web frameworks are, ideally by reading the topics in our <a href="/en-US/docs/Learn/Server-side/First_steps">Server-side website programming first steps</a> module. A general knowledge of programming concepts and <a href="/en-US/docs/Web/JavaScript">JavaScript</a> is highly recommended, but not essential to understanding the core concepts.</p> + +<div class="note"> +<p><strong>Note</strong>: This website has many useful resources for learning JavaScript<em> in the context of client-side development</em>: <a href="/en-US/docs/Web/JavaScript">JavaScript</a>, <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript Guide</a>, <a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript Basics</a>, <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> (learning). The core JavaScript language and concepts are the same for server-side development on Node.js and this material will be relevant. Node.js offers <a href="https://nodejs.org/dist/latest-v10.x/docs/api/">additional APIs</a> for supporting functionality that is useful in browserless environments (e.g., to create HTTP servers and access the file system), but does not support JavaScript APIs for working with the browser and DOM.</p> + +<p>This guide will provide some information about working with Node.js and Express, and there are numerous other excellent resources on the Internet and in books — some of these linked from <a href="http://stackoverflow.com/a/5511507/894359">How do I get started with Node.js</a> (StackOverflow) and <a href="https://www.quora.com/What-are-the-best-resources-for-learning-Node-js?">What are the best resources for learning Node.js?</a> (Quora).</p> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node introduction</a></dt> + <dd>In this first Express article we answer the questions "What is Node?" and "What is Express?" and give you an overview of what makes the Express web framework special. We'll outline the main features and show you some of the main building blocks of an Express application (although at this point you won't yet have a development environment in which to test it).</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">Setting up a Node (Express) development environment</a></dt> + <dd>Now that you know what Express is for, we'll show you how to set up and test a Node/Express development environment on Windows, Linux (Ubuntu), and Mac OS X. Whatever common operating system you are using, this article should give you what you need to be able to start developing Express apps.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express Tutorial: The Local Library website</a></dt> + <dd>The first article in our practical tutorial series explains what you'll learn and provides an overview of the "local library" example website we'll be working through and evolving in subsequent articles.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express Tutorial Part 2: Creating a skeleton website</a></dt> + <dd>This article shows how you can create a "skeleton" website project, which you can then go on to populate with site-specific routes, templates/views, and databases.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Express Tutorial Part 3: Using a Database (with Mongoose)</a></dt> + <dd>This article briefly introduces databases for Node/Express. It then goes on to show how we can use <a href="http://mongoosejs.com/">Mongoose</a> to provide database access for the <em>LocalLibrary</em> website. It explains how object schema and models are declared, the main field types, and basic validation. It also briefly shows a few of the main ways you can access model data.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes">Express Tutorial Part 4: Routes and controllers</a></dt> + <dd>In this tutorial we'll set up routes (URL handling code) with "dummy" handler functions for all the resource endpoints that we'll eventually need in the <em>LocalLibrary</em> website. On completion, we'll have a modular structure for our route handling code, that we can extend with real handler functions in the following articles. We'll also have a really good understanding of how to create modular routes using Express.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a></dt> + <dd>We're now ready to add the pages that display the <em>LocalLibrary</em> website books and other data. The pages will include a home page that shows how many records we have of each model type and list and detail pages for all of our models. Along the way, we'll gain practical experience in getting records from the database and using templates.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms">Express Tutorial Part 6: Working with forms</a></dt> + <dd>In this tutorial we'll show you how to work with <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML Forms</a> in Express, using Pug, and in particular how to write forms to create, update, and delete documents from the database.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Express Tutorial Part 7: Deploying to production</a></dt> + <dd>Now you've created an awesome <em>LocalLibrary</em> website, you're going to want to install it on a public web server so that it can be accessed by library staff and members over the Internet. This article provides an overview of how you might go about finding a host to deploy your website, and what you need to do in order to get your site ready for production.</dd> +</dl> + +<h2 id="See_also">See also</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry">Installing LocalLibrary on PWS/Cloud Foundry</a></dt> + <dd>This article provides a practical demonstration of how to install <em>LocalLibrary</em> on the <a href="http://run.pivotal.io">Pivotal Web Services PaaS cloud</a> — this is a full-featured, open source alternative to Heroku, the PaaS cloud service used in Part 7 of the tutorial, listed above. PWS/Cloud Foundry is definitely worth checking out if you are looking for an alternative to Heroku (or another PaaS cloud service), or simply feel like trying something different. </dd> +</dl> + +<h2 id="Adding_more_tutorials">Adding more tutorials</h2> + +<div> +<p>All existing tutorials are listed above, but if you would like to extend this module, some other interesting topics to cover include:</p> + +<ul> + <li>Using sessions.</li> + <li>User authentication.</li> + <li>User authorization and permissions.</li> + <li>Testing an Express web application.</li> + <li>Web security for Express web applications.</li> +</ul> + +<p>An assessment for the module would also make a wonderful addition!</p> +</div> diff --git a/files/ar/learn/server-side/index.html b/files/ar/learn/server-side/index.html new file mode 100644 index 0000000000..520715f1a2 --- /dev/null +++ b/files/ar/learn/server-side/index.html @@ -0,0 +1,58 @@ +--- +title: برمجة موقع الويب من ناحية الخادم +slug: Learn/Server-side +translation_of: Learn/Server-side +--- +<div dir="rtl">{{LearnSidebar}}</div> + +<p class="summary" dir="rtl"> </p> + +<p dir="rtl"><strong>المواقع الديناميكية - البرمجة من جانب الخادم </strong>عبارة عن سلسلة من الوحدات التي تُظهر كيفية إنشاء مواقع ويب ديناميكية ؛ مواقع الويب التي تقدم معلومات مخصصة استجابة لطلبات HTTP. توفر الوحدات مدخلاً عامًا للبرمجة من جانب الخادم ، إلى جانب توجيهات للمبتدئين حول كيفية استخدام الأطر الشبكية ل Django (Python) و Express (Node.js / JavaScript) لإنشاء التطبيقات الأساسية.</p> + +<p dir="rtl">تستخدم معظم مواقع الويب الرئيسية نوعًا من تقنية جانب الخادم لعرض البيانات المختلفة ديناميكيًا كما هو مطلوب. على سبيل المثال ، تخيل كم عدد المنتجات المتوفرة على Amazon ، وتخيل عدد الرسائل التي تمت كتابتها على Facebook؟ إن عرض كل هذه الصفحات باستخدام صفحات ثابتة مختلفة تمامًا سيكون غير فعال تمامًا ، لذلك تعرض هذه المواقع بدلاً من ذلك قوالب ثابتة (تم إنشاؤها باستخدام <a href="https://developer.mozilla.org/ar/docs/Learn/HTML">HTML </a>و <a href="https://developer.mozilla.org/ar/docs/Learn/CSS">CSS</a> و <a href="https://developer.mozilla.org/ar/docs/Learn/JavaScript">JavaScript</a> ) ، ثم تقوم بتحديث البيانات المعروضة داخل تلك النماذج ديناميكيًا عند الحاجة ، على سبيل المثال ، عندما تريد عرض منتج مختلف على Amazon.</p> + +<p dir="rtl">في عالم تطوير الويب الحديث ، ينصح بالتعلم عن التطوير من جانب الخادم.</p> + +<p class="summary" dir="rtl"> </p> + +<p dir="rtl"> </p> + +<h2 dir="rtl" id="مسار_التعلم"><span class="tlid-translation translation"><span title="">مسار التعلم</span></span></h2> + +<p dir="rtl"> </p> + +<p dir="rtl">عادة ما تكون عملية البدء بالبرمجة من جانب الخادم أسهل من عملية التطوير من جانب العميل ، لأن مواقع الويب الديناميكية تميل إلى تنفيذ الكثير من العمليات المتشابهة (استرداد البيانات من قاعدة بيانات وعرضها في صفحة ، والتحقق من صحة البيانات المدخلة من قبل المستخدم وحفظها في قاعدة بيانات ، وفحص أذونات المستخدم ومستخدمي تسجيل الدخول ، وما إلى ذلك) ، ويتم بناؤها باستخدام أطر الويب التي تجعل هذه العمليات وغيرها من عمليات خادم الويب الشائعة سهلة.</p> + +<p dir="rtl">تعتبر المعرفة الأساسية لمفاهيم البرمجة (أو لغة برمجة معينة) مفيدة ، ولكنها ليست ضرورية. وبالمثل ، ليست هناك حاجة إلى خبرة في كتابة التعليمات البرمجية من جانب العميل ، ولكن المعرفة الأساسية ستساعدك على العمل بشكل أفضل مع المطورين الذين ينشئون "واجهة المستخدم" على جانب العميل.</p> + +<p dir="rtl">ستحتاج إلى فهم "كيفية عمل الويب". نوصيك أولاً بقراءة المواضيع التالية:</p> + +<p> </p> + +<ul dir="rtl"> + <li><a href="https://developer.mozilla.org/ar/docs/Learn/Common_questions/What_is_a_web_server">ما هو خادم الويب؟</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_software_do_I_need">ما هي البرامج التي أحتاجها لإنشاء موقع ويب؟</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">كيف تقوم بتحميل الملفات إلى خادم الويب؟</a></li> +</ul> + +<p dir="rtl"><span class="tlid-translation translation"><span title="">مع هذا الفهم الأساسي ، ستكون مستعدًا للعمل في طريقك من خلال الوحدات في هذا القسم.</span></span></p> + +<h2 dir="rtl" id="الوحدات">الوحدات</h2> + +<p dir="rtl">هذا الموضوع يحتوي على الوحدات التالية. يجب أن تبدأ بالوحدة الأولى ، ثم انتقل إلى احدى الوحدات التالية ، والتي توضح كيفية العمل مع اثنين من اللغات الشائعة جدًا من جانب الخادم باستخدام إطارات ويب مناسبة.</p> + +<dl> + <dt dir="rtl"><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps">برمجة موقع الويب من ناحية الخادم الخطوات الأولى<span style="display: none;"> </span><span style="display: none;"> </span></a></dt> + <dd dir="rtl">توفر هذه الوحدة معلومات عن تكنولوجيا الخادم و برمجة مواقع الويب من جانب الخادم ، بما في ذلك إجابات على الأسئلة الأساسية حول البرمجة من جانب الخادم - "ما هو" ، "كيف تختلف عن برمجة العميل" ، و "لماذا هي كذلك مفيدة "- ونظرة عامة على بعض الأطر الأكثر شعبية على شبكة الإنترنت من جانب الخادم والإرشادات حول كيفية اختيار الأنسب لموقعك. وأخيرًا ، نقدم قسمًا تقديميًا حول أمان خادم الويب.<span style="display: none;"> </span><span style="display: none;"> </span></dd> + <dt dir="rtl"><a href="/en-US/docs/Learn/Server-side/Django">Django Web Framework (Python)</a></dt> + <dd dir="rtl"><span class="tlid-translation translation"><span title="">Django هو إطار عمل شائع للغاية ومميز للغاية من جانب الخادم ، مكتوب بلغة بايثون.</span> <span title="">تشرح الوحدة النمطية لماذا يعتبر Django إطارًا جيدًا لخادم الويب ، وكيفية إعداد بيئة تطوير وكيفية تنفيذ المهام الشائعة معها.</span></span></dd> + <dt dir="rtl"><a href="/en-US/docs/Learn/Server-side/Express_Nodejs">Express Web Framework (Node.js/JavaScript)</a></dt> + <dd dir="rtl"><span class="tlid-translation translation"><span title="">Express هو إطار ويب شائع ، مكتوب بلغة JavaScript ومُستضاف في بيئة تشغيل node.js.</span> <span title="">تشرح الوحدة بعض الفوائد الأساسية لهذا الإطار ، وكيفية إعداد بيئة التطوير الخاصة بك وكيفية تنفيذ مهام مشتركة لتطوير الويب ونشره.</span></span></dd> +</dl> + +<h2 dir="rtl" id="أنظر_أيضا"><span class="tlid-translation translation"><span title="">أنظر أيضا</span></span></h2> + +<dl> + <dt dir="rtl"><a href="/en-US/docs/Learn/Server-side/Node_server_without_framework">Node server without framework</a></dt> + <dd dir="rtl"><span class="tlid-translation translation"><span title="">توفر هذه المقالة ملقم ملفات ثابت بسيطًا تم إنشاؤه باستخدام Node.js خالصًا ، وذلك لمن لا يريد استخدام إطار عمل.</span></span></dd> +</dl> diff --git a/files/ar/localization_and_plurals/index.html b/files/ar/localization_and_plurals/index.html new file mode 100644 index 0000000000..c1c154d3db --- /dev/null +++ b/files/ar/localization_and_plurals/index.html @@ -0,0 +1,269 @@ +--- +title: Localization and Plurals +slug: Localization_and_Plurals +translation_of: Mozilla/Localization/Localization_and_Plurals +--- +<p><span style="line-height: 1.572;">You're likely here because you're localizing a .properties file and it had a link to this page. This page is to help explain how to localize these strings so that the correct plural form is shown to the user. E.g., "1 page" vs "2 pages".</span></p> +<p>If you're here to make your code (e.g., extensions) localizable for plural forms, you can jump straight to <a href="#Developing_with_PluralForm">Developing with PluralForm</a>, but you'll likely need to localize the initial strings for your code, so it would be good to read through at least the Usage section as well.</p> +<p> </p> +<h2 id="Usage" name="Usage">Usage</h2> +<p>Here are a couple terms used in this page to help keep things clear:</p> +<ul> + <li><strong>plural rule</strong>: For a given language, there is a grammatical rule on how to change words depending on the number qualifying the word. Different languages can have different rules.</li> + <li><strong>plural form</strong>: For a particular plural rule, there can be multiple forms of a word such as "page" and "pages". In this case, there are 2 forms, but other languages can have 1 or many more.</li> +</ul> +<p>If you're here for <code>pluralRule</code> in the <code>chrome/global/intl.properties</code> file, you'll need to figure out what <em>plural rule</em> to choose for your localization. This plural rule is used to determine how many <em>plural forms</em> are needed for each word that needs to be localized with plurals in mind.</p> +<p>For all other properties files that link to this page, you'll need to provide enough plural forms of the desired word and separate them with semi-colons (;). If you don't know how many plural forms you need, check the <code>pluralRule</code> number in <code>chrome/global/intl.properties</code> and look up the corresponding entry in the following list of plural rules.</p> +<h2 id="List_of_Plural_Rules" name="List_of_Plural_Rules">List of Plural Rules</h2> +<p>This section contains a list of plural rules ordered by their plural rule number. Each entry indicates how many plural forms are needed when localizing a word. For each entry, there is a list of families and languages in those families to help you figure out if it's the rule you should pick for <code>pluralRule</code>. Additionally, there is a brief description of each plural form followed by some sample numbers that fall into that particular form.</p> +<p>For a given plural rule, the order in which the plural forms are listed is the same order you need to localize a word, separated by semi-colons. For example, English uses plural rule 1, and localizing <code>plurals</code> would require a string of "plural;plurals" where the first word is the singular form and the second is the general plural form.</p> +<h3 id="Plural_rule_.230_.281_form.29" name="Plural_rule_.230_.281_form.29">Plural rule #<em><strong>0</strong></em> (1 form)</h3> +<p><strong>Families</strong>: Asian (Chinese, Japanese, Korean, Vietnamese), Persian, Turkic/Altaic (Turkish), Thai, Lao<br> + <strong>everything</strong>: <small>0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, …</small></p> +<h3 id="Plural_rule_.231_.282_forms.29" name="Plural_rule_.231_.282_forms.29">Plural rule #<em><strong>1</strong></em> (2 forms)</h3> +<p><strong>Families</strong>: Germanic (Danish, Dutch, English, Faroese, Frisian, German, Norwegian, Swedish), Finno-Ugric (Estonian, Finnish, Hungarian), Language isolate (Basque), Latin/Greek (Greek), Semitic (Hebrew), Romanic (Italian, Portuguese, Spanish, Catalan)<br> + <strong>is 1</strong>: <small>1</small><br> + <strong>everything else</strong>: <small>0, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, …</small></p> +<h3 id="Plural_rule_.232_.282_forms.29" name="Plural_rule_.232_.282_forms.29">Plural rule #<em><strong>2</strong></em> (2 forms)</h3> +<p><strong>Families</strong>: Romanic (French, Brazilian Portuguese)<br> + <strong>is 0 or 1</strong>: <small>0, 1</small><br> + <strong>everything else</strong>: <small>2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, …</small></p> +<h3 id="Plural_rule_.233_.283_forms.29" name="Plural_rule_.233_.283_forms.29">Plural rule #<em><strong>3</strong></em> (3 forms)</h3> +<p><strong>Families</strong>: Baltic (Latvian)<br> + <strong>is 0</strong>: <small>0</small><br> + <strong>ends in 1, excluding 11</strong>: <small>1, 21, 31, 41, 51, 61, 71, 81, 91, 101, 121, 131, 141, 151, 161, 171, 181, 191, 201, 221, 231, 241, 251, 261, 271, 281, 291, …</small><br> + <strong>everything else</strong>: <small>2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 23, 24, 25, 26, 27, 28, 29, 30, 32, 33, 34, 35, 36, 37, 38, 39, 40, 42, 43, 44, 45, 46, 47, 48, 49, 50, 52, 53, 54, 55, …</small></p> +<h3 id="Plural_rule_.234_.283_forms.29" name="Plural_rule_.234_.283_forms.29">Plural rule #<em><strong>4</strong></em> (4 forms)</h3> +<p><strong>Families</strong>: Celtic (Scottish Gaelic)<br> + <strong>is 1 or 11</strong>: <small>1, 11</small><br> + <strong>is 2 or 12</strong>: <small>2, 12</small><br> + <strong>is 3-10 or 13-19</strong>: <small>3, 4, 5, 6, 7, 8, 9, 10, 13, 14, 15, 16, 17, 18, 19</small><br> + <strong>everything else</strong>: <small>0, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, …</small></p> +<h3 id="Plural_rule_.235_.283_forms.29" name="Plural_rule_.235_.283_forms.29">Plural rule #<em><strong>5</strong></em> (3 forms)</h3> +<p><strong>Families</strong>: Romanic (Romanian)<br> + <strong>is 1</strong>: <small>1</small><br> + <strong>is 0 or ends in 01-19, excluding 1</strong>: <small>0, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 201, 202, 203, 204, 205, 206, 207, 208, 209, 210, 211, 212, …</small><br> + <strong>everything else</strong>: <small>20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, …</small></p> +<h3 id="Plural_rule_.236_.283_forms.29" name="Plural_rule_.236_.283_forms.29">Plural rule #<em><strong>6</strong></em> (3 forms)</h3> +<p><strong>Families</strong>: Baltic (Lithuanian)<br> + <strong>ends in 1, excluding 11</strong>: <small>1, 21, 31, 41, 51, 61, 71, 81, 91, 101, 121, 131, 141, 151, 161, 171, 181, 191, 201, 221, 231, 241, 251, 261, 271, 281, 291, …</small><br> + <strong>ends in 0 or ends in 11-19</strong>: <small>0, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 211, 212, 213, 214, 215, 216, 217, 218, 219, 220, …</small><br> + <strong>everything else</strong>: <small>2, 3, 4, 5, 6, 7, 8, 9, 22, 23, 24, 25, 26, 27, 28, 29, 32, 33, 34, 35, 36, 37, 38, 39, 42, 43, 44, 45, 46, 47, 48, 49, 52, 53, 54, 55, 56, 57, 58, 59, 62, 63, 64, 65, 66, 67, 68, 69, 72, 73, …</small></p> +<h3 id="Plural_rule_.237_.283_forms.29" name="Plural_rule_.237_.283_forms.29">Plural rule #<em><strong>7</strong></em> (3 forms)</h3> +<p><strong>Families</strong>: Slavic (Belarusian, Bosnian, Croatian, Serbian, Russian, Ukrainian)<br> + <strong>ends in 1, excluding 11</strong>: <small>1, 21, 31, 41, 51, 61, 71, 81, 91, 101, 121, 131, 141, 151, 161, 171, 181, 191, 201, 221, 231, 241, 251, 261, 271, 281, 291, …</small><br> + <strong>ends in 2-4, excluding 12-14</strong>: <small>2, 3, 4, 22, 23, 24, 32, 33, 34, 42, 43, 44, 52, 53, 54, 62, 63, 64, 72, 73, 74, 82, 83, 84, 92, 93, 94, 102, 103, 104, 122, 123, 124, 132, 133, 134, 142, 143, 144, 152, 153, 154, 162, 163, 164, 172, 173, 174, 182, 183, …</small><br> + <strong>everything else</strong>: <small>0, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 25, 26, 27, 28, 29, 30, 35, 36, 37, 38, 39, 40, 45, 46, 47, 48, 49, 50, 55, 56, 57, 58, 59, 60, 65, 66, 67, 68, 69, 70, 75, 76, 77, …</small></p> +<h3 id="Plural_rule_.238_.283_forms.29" name="Plural_rule_.238_.283_forms.29">Plural rule #<em><strong>8</strong></em> (3 forms)</h3> +<p><strong>Families</strong>: Slavic (Slovak, Czech)<br> + <strong>is 1</strong>: <small>1</small><br> + <strong>is 2-4</strong>: <small>2, 3, 4</small><br> + <strong>everything else</strong>: <small>0, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, …</small></p> +<h3 id="Plural_rule_.239_.283_forms.29" name="Plural_rule_.239_.283_forms.29">Plural rule #<em><strong>9</strong></em> (3 forms)</h3> +<p><strong>Families</strong>: Slavic (Polish)<br> + <strong>is 1</strong>: <small>1</small><br> + <strong>ends in 2-4, excluding 12-14</strong>: <small>2, 3, 4, 22, 23, 24, 32, 33, 34, 42, 43, 44, 52, 53, 54, 62, 63, 64, 72, 73, 74, 82, 83, 84, 92, 93, 94, 102, 103, 104, 122, 123, 124, 132, 133, 134, 142, 143, 144, 152, 153, 154, 162, 163, 164, 172, 173, 174, 182, 183, …</small><br> + <strong>everything else</strong>: <small>0, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 25, 26, 27, 28, 29, 30, 31, 35, 36, 37, 38, 39, 40, 41, 45, 46, 47, 48, 49, 50, 51, 55, 56, 57, 58, 59, 60, 61, 65, 66, 67, 68, …</small></p> +<h3 id="Plural_rule_.2310_.284_forms.29" name="Plural_rule_.2310_.284_forms.29">Plural rule #<em><strong>10</strong></em> (4 forms)</h3> +<p><strong>Families</strong>: Slavic (Slovenian, Sorbian)<br> + <strong>ends in 01</strong>: <small>1, 101, 201, …</small><br> + <strong>ends in 02</strong>: <small>2, 102, 202, …</small><br> + <strong>ends in 03-04</strong>: <small>3, 4, 103, 104, 203, 204, …</small><br> + <strong>everything else</strong>: <small>0, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, …</small></p> +<h3 id="Plural_rule_.2311_.285_forms.29" name="Plural_rule_.2311_.285_forms.29">Plural rule #<em><strong>11</strong></em> (5 forms)</h3> +<p><strong>Families</strong>: Celtic (Irish Gaelic)<br> + <strong>is 1</strong>: <small>1</small><br> + <strong>is 2</strong>: <small>2</small><br> + <strong>is 3-6</strong>: <small>3, 4, 5, 6</small><br> + <strong>is 7-10</strong>: <small>7, 8, 9, 10</small><br> + <strong>everything else</strong>: <small>0, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, …</small></p> +<h3 id="Plural_rule_.2312_.284_forms.29" name="Plural_rule_.2312_.284_forms.29">Plural rule #<em><strong>12</strong></em> (6 forms)</h3> +<p><strong>Families</strong>: Semitic (Arabic)<br> + <strong>is 1</strong>: <small>1</small><br> + <strong>is 2</strong>: <small>2</small><br> + <strong>ends in 03-10</strong>: <small>3, 4, 5, 6, 7, 8, 9, 10, 103, 104, 105, 106, 107, 108, 109, 110, 2</small><small>03, 204, 205, 206, 207, 208, 209, 210, </small><small>…</small><br> + <strong>everything else but is 0 and ends in 00-02, excluding 0-2</strong>: <small>11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, … </small><br> + <strong>ends in 00-02, excluding 0-2</strong>: <small>100, 101, 102, 200, 201, 202, …</small><br> + <strong>is 0</strong>: <small>0</small></p> +<h3 id="Plural_rule_.2313_.284_forms.29" name="Plural_rule_.2313_.284_forms.29">Plural rule #<em><strong>13</strong></em> (4 forms)</h3> +<p><strong>Families</strong>: Semitic (Maltese)<br> + <strong>is 1</strong>: <small>1</small><br> + <strong>is 0 or ends in 01-10, excluding 1</strong>: <small>0, 2, 3, 4, 5, 6, 7, 8, 9, 10, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 201, 202, 203, 204, 205, 206, 207, 208, 209, 210, …</small><br> + <strong>ends in 11-19</strong>: <small>11, 12, 13, 14, 15, 16, 17, 18, 19, 111, 112, 113, 114, 115, 116, 117, 118, 119, 211, 212, 213, 214, 215, 216, 217, 218, 219, …</small><br> + <strong>everything else</strong>: <small>20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, …</small></p> +<h3 id="Plural_rule_.2314_.283_forms.29" name="Plural_rule_.2314_.283_forms.29">Plural rule #<em><strong>14</strong></em> (3 forms)</h3> +<p><strong>Families</strong>: Slavic (Macedonian)<br> + <strong>ends in 1</strong>: <small>1, 11, 21, 31, 41, 51, 61, 71, 81, 91, 101, 111, 121, 131, 141, 151, 161, 171, 181, 191, 201, 211, 221, 231, 241, 251, 261, 271, 281, 291, …</small><br> + <strong>ends in 2</strong>: <small>2, 12, 22, 32, 42, 52, 62, 72, 82, 92, 102, 112, 122, 132, 142, 152, 162, 172, 182, 192, 202, 212, 222, 232, 242, 252, 262, 272, 282, 292, …</small><br> + <strong>everything else</strong>: <small>0, 3, 4, 5, 6, 7, 8, 9, 10, 13, 14, 15, 16, 17, 18, 19, 20, 23, 24, 25, 26, 27, 28, 29, 30, 33, 34, 35, 36, 37, 38, 39, 40, 43, 44, 45, 46, 47, 48, 49, 50, 53, 54, 55, 56, 57, 58, 59, 60, 63, …</small></p> +<h3 id="Plural_rule_.2315_.283_forms.29" name="Plural_rule_.2315_.283_forms.29">Plural rule #<em><strong>15</strong></em> (2 forms)</h3> +<p><strong>Families</strong>: Icelandic<br> + <strong>ends in 1, excluding 11</strong>: <small>1, 21, 31, 41, 51, 61, 71, 81, 91, 101, 121, 131, 141, 151, 161, 171, 181, 191, 201, 221, 231, 241, 251, 261, 271, 281, 291, …</small><br> + <strong>everything else</strong>: <small>0, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 23, 24, 25, 26, 27, 28, 29, 30, 32, 33, 34, 35, 36, 37, 38, 39, 40, 42, 43, 44, 45, 46, 47, 48, 49, 50, 52, 53, 54, …</small></p> +<h3 id="Plural_rule_.2316_.283_forms.29" name="Plural_rule_.2316_.283_forms.29">Plural rule #<em><strong>16</strong></em> (6 forms)</h3> +<p><strong>Families</strong>: Celtic (Breton)<br> + <strong>is 1</strong>: <small>1</small><br> + <strong>ends in 1, excluding 1, 11, 71, 91</strong>: <small>21, 31, 41, 51, 61, 81, 101, 121, 131, 141, 151, 161, 181, 201, 221, 231, 241, 251, 261, 281, ...</small><br> + <strong>ends in 2, excluding 12, 72, 92</strong>: <small>2, 22, 32, 42, 52, 62, 82, 102, 122, 132, 142, 152, 162, 182, 202, 222, 232, 242, 252, 262, 282, ...</small><br> + <strong>ends in 3, 4 or 9 excluding 13, 14, 19, 73, 74, 79, 93, 94, 99</strong>: <small>3, 4, 9, 23, 24, 29, 33, 34, 39, 43, 44, 49, 53, 54, 59, ...</small><br> + <strong>ends in 1000000</strong>: <small>1000000: 1000000, 2000000, 3000000, 4000000, 5000000, 6000000, 7000000, 8000000, 9000000, 10000000, ...</small><br> + <strong>everything else</strong>: <small>0, 5, 6, 7, 8, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 25, 26, 27, 28, 30, 35, 36, 37, 38, 40, ...</small></p> +<h2 id="Examples" name="Examples">Examples</h2> +<p>The following are some examples for various languages and a brief thought processes.</p> +<h3 id="French" name="French">French</h3> +<p>Some French speaking places treat 0 as plural while others treat it as singular. The only other singular is 1 while everything else is plural. So pick either plural rule #1 or #2.</p> +<p><code>pluralRule=2<br> + seconds=seconde;secondes<br> + minutes=minute;minutes<br> + hours=heure;heures<br> + days=jour;jours </code></p> +<p>Like many other times when localizing words, gender agreement might force you to rearrange words in a way that the gender is always the same. (seconde vs jour)</p> +<h3 id="Chinese" name="Chinese">Chinese</h3> +<p>A word doesn't change if there is a different number in front of it, so all numbers use the same plural form. With just one plural form, it has to be plural rule #0. For each word to localize, it's just like localizing a single word with no semi-colons needed.</p> +<p><code>pluralRule=0<br> + seconds=秒<br> + minutes=分<br> + hours=時<br> + days=日 </code></p> +<h3 id="Polish" name="Polish">Polish</h3> +<p>There's a singular form for 1, a plural form for 2-4, and another for 5-21 at which point 22 is the same as 2. Plural rule #7 has a "ends in 2-4, not 12-14" but the singular form includes everything ending in 1 except 11. Plural rule #9 has the correct singular form for only 1.</p> +<p><code>pluralRule=9<br> + seconds=sekunda;sekundy;sekund<br> + minutes=minuta;minuty;minut<br> + hours=godzina;godziny;godzin<br> + days=dzień;dni;dni </code></p> +<p>Even though the last 2 plural forms of "day" are the same, both are still needed because there needs to be 3 plural forms for each word.</p> +<h3 id="Sorbian" name="Sorbian">Sorbian</h3> +<p>There are 4 plural forms: nominative singular, nominative dual, nominative plural, genitive plural. These match up with plural rule #10.</p> +<p><code>pluralRule=10<br> + seconds=sekunda;sekundźe;sekundy;sekundow<br> + minutes=mjeńšina;mjeńšinje;mjeńšiny;mjeńšin<br> + hours=hodźina;hodźinje;hodźiny;hodźin<br> + days=dźeń;dnjej;dny;dnjow </code></p> +<h2 id="Testing_Extension" name="Testing_Extension">Testing Extension</h2> +<p>To help make sure you pick the right plural rule and provide enough plural forms for strings, you should use the pluralForm Checker extension. After installing the extension, it should be available from the Tools menu.</p> +<p>To use it, list off the property files and properties that you want to check and click the button. The extension will load each property and display the plural forms in a table. Selecting a table entry will populate the bottom box with sample uses of the word for some numbers.</p> +<p><img alt="Image:pluralForm-checker.0.3.png" class="internal" src="/@api/deki/files/804/=PluralForm-checker.0.3.png"></p> +<p><a class="external" href="http://ed.agadak.net/firefox/pluralForm-checker.xpi">Install pluralForm Checker v0.3 extension</a></p> +<h3 id="Extension_input" name="Extension_input">Extension input</h3> +<p>It would be good to keep this list updated with all the words that need plural forms. People using the extension can then copy/paste this input.</p> +<p><code><small><a class="external" rel="freelink">chrome://mozapps/locale/downloads/do...tes,hours,days</a><br> + <a class="external" rel="freelink">chrome://mozapps/locale/downloads/do...dsTitlePercent</a><br> + <a class="external" rel="freelink">chrome://browser/locale/browser.prop...ausedDownloads</a> </small></code></p> +<h3 id="Version_history" name="Version_history">Version history</h3> +<p>0.1: Initial version with pluralRule check, properties input loading, table generation, sample output display<br> + 0.2: Use PluralForm.numForms() to get the number of forms instead of figuring out locally to better support future rules - <strong>Requires build from 2007/01/27 or later</strong><br> + 0.3: Generate a list of what numbers fall into which plural form to minimize the sample output to at most 3 of each form</p> +<h2 id="Developing_with_PluralForm" name="Developing_with_PluralForm">Developing with PluralForm</h2> +<p>The functionality for getting the correct plural forms is provided by a JavaScript Module, <code>PluralForm.jsm</code>. This module provides a couple methods for localizing to the browser's current locale as well as getting methods to localize to a desired plural rule. The latter ability of specifying a plural rule is useful for extensions because the extension doesn't necessarily have to be localized to the browser's locale.</p> +<h3 id="Loading_PluralForm.jsm" name="Loading_PluralForm.jsm">Loading <code>PluralForm.jsm</code></h3> +<p>Loading the PluralForm module from JavaScript is simple with <a href="/en/Components.utils.import" title="en/Components.utils.import">Components.utils.import</a>. Just put the following line somewhere that will be evaluated before you want to use PluralForm. At the top of your JavaScript file is fine.</p> +<pre>Components.utils.import("resource://gre/modules/PluralForm.jsm");</pre> +<h3 id="Methods:_get" name="Methods:_get">Methods: <code>get</code></h3> +<p>These methods make use of the browser's current locale specified by <code><a class="external" rel="freelink">chrome://global/locale/intl.properties</a></code>'s <code>pluralRule</code> value.</p> +<pre>/** + * Get the correct plural form of a word based on the number + * + * @param aNum + * The number to decide which plural form to use + * @param aWords + * A semi-colon (;) separated string of words to pick the plural form + * @return The appropriate plural form of the word + */ +string pluralForm +get(int aNum, string aWords)</pre> +<p>Here is an example of using this method:</p> +<pre>// Load PluralForm and for this example, assume English +Components.utils.import("resource://gre/modules/PluralForm.jsm"); + +// PluralForm.get expects a semi-colon separated list of words +let downloads = "download;downloads"; +// Pretend this number came from somewhere else +let num = 10; + +// Display the correct plural form for 10 downloads: "You have 10 downloads.") +print("You have " + num + " " + PluralForm.get(num, downloads) + "."); + +// Try again with a different value: "You have 1 download." +num = 1; +print("You have " + num + " " + PluralForm.get(num, downloads) + ".")</pre> +<p>The above example works, but is still difficult to localize because we're concatenating strings assuming a particular grammatical structure. The following would be better:</p> +<pre>Components.utils.import("resource://gre/modules/PluralForm.jsm"); + +let downloads = "You have one download.;You have #1 downloads."; +let num = 10; + +// For English, this would display "You have 10 downloads." +print(PluralForm.get(num, downloads).replace("#1", num);</pre> +<p>Notice in the above example that the code can be written to support placeholders or not use placeholders in some forms of the string. Additionally, the localizer has control over where the placeholder is in relation to the rest of the text.</p> +<p>Of course, the strings to be localized will be placed in a separate file such as yourextension.properties instead of being hardcoded in the JavaScript code file.</p> +<p>The following 3 file snippets show how to use PluralForm with your <code>.xul</code>, <code>.properties</code>, <code>.js</code> files.</p> +<p><code>downloads.xul</code>:</p> +<pre><stringbundleset> + <stringbundle id="strings" src="chrome://downloads.properties"/> +</stringbundleset></pre> +<p><code>downloads.properties</code>:</p> +<pre># LOCALIZATION NOTE (downloadsTitleFiles): Semi-colon list of plural forms. +# See: http://developer.mozilla.org/en/docs/Localization_and_Plurals +# #1 number of files +# example: 111 files - Downloads +downloadsTitleFiles=#1 file - Downloads;#1 files - Downloads + +# LOCALIZATION NOTE (timePair): #1 time number; #2 time unit +# example: 1 second; 11 seconds +timePair=#1 #2 +seconds=second;seconds +minutes=minute;minutes +hours=hour;hours +</pre> +<p><code>downloads.js</code>:</p> +<pre>Components.utils.import("resource://gre/modules/PluralForm.jsm"); +let getStr = function(string) document.getElementById("strings").getString(string); + +// Get the correct plural form for the title +let numDownloads = 3; +let title = PluralForm.get(numDownloads, getStr("downloadsTitleFiles")); +// Put in the correct number of downloads +print(title.replace("#1", numDownloads)); + +// Get the correct plural form of seconds +let timeLeft = 55; +let seconds = PluralForm.get(timeLeft, getStr("seconds")); +// Print the localized string for "55 seconds" +print(getStr("timePair").replace("#1", timeLeft).replace("#2", seconds));</pre> +<h3 id="Method:_makeGetter" name="Method:_makeGetter">Method: <code>makeGetter</code></h3> +<p>If you're writing an extension, you'll want to use <code>makeGetter</code> instead of <code>PluralForm.get()</code> or <code>PluralForm.numForms()</code> because someone installing the extension on a different locale will be using the strings provided by your default extension locale. For example, your extension localized for English with plural rule #1, which expects 2 plural forms, is installed on a localized version of Firefox with plural rule #4, which expects 3 forms.</p> +<pre>/** + * Create a pair of plural form functions for the given plural rule number. + * + * @param aRuleNum + * The plural rule number to create functions + * @return A pair: [function that gets the right plural form, + * function that returns the number of plural forms] + */ +[string pluralForm get(int aNum, string aWords), int numForms numForms()] +makeGetter(int aRuleNum)</pre> +<p>Here is an example usage of <code>makeGetter</code>:</p> +<pre>Components.utils.import("resource://gre/modules/PluralForm.jsm"); + +// Let's get Irish (plural rule #11) +let [get, numForms] = PluralForm.makeGetter(11); + +// Make up some values to use with "get" +let dummyText = "form 1;form 2;form 3;form 4;form 5"; +let dummyNum = 10; + +// In the case of Irish, the value 10 uses plural form #4, so "form 4" is printed +print(get(dummyNum, dummyText));</pre> +<p>In this example, the Irish plural rule was hardcoded, but this could be a value specified in the .properties file. So for your extension, specify a pluralRule value in the .properties and call <code>PluralForm.makeGetter(pluralRuleFromProperties)</code> making sure to save the 2 returned functions. (You can use <a href="/en/JavaScript/New_in_JavaScript/1.7#Destructuring_assignment" title="en/New_in_JavaScript_1.7#Destructuring_assignment">destructured assignment</a> in JavaScript 1.7 to keep things clean.) The returned functions act just like <code>PluralForm.get()</code> and <code>PluralForm.numForms()</code> except for the specified plural rule instead of the default plural rule.</p> +<h2 id="Credits" name="Credits">Credits</h2> +<p>Plural Form code first implemented for {{ Bug(394516) }} - <em>Figure out a remaining-time rounding scheme for minutes -> hours/days</em><br> + Plural rules and families derived from <a class="external" href="http://www.gnu.org/software/gettext/manual/html_node/gettext_150.html#Plural-forms">GNU <code>gettext</code> documentation</a>.</p> +<p> </p> +<p> </p> +<div class="warning"> + <div class="summary"> + <p style="text-align: center;">{{ languages( { "es": "es/Localización_y_Plurales", "fr": "fr/Localisation_et_pluriels", "ja": "ja/Localization_and_Plurals", "pl": "pl/Lokalizacja_i_liczba_mnoga" } ) }}</p> + </div> +</div> +<p> </p> diff --git a/files/ar/mdn/about/index.html b/files/ar/mdn/about/index.html new file mode 100644 index 0000000000..8c6962b5c4 --- /dev/null +++ b/files/ar/mdn/about/index.html @@ -0,0 +1,110 @@ +--- +title: حول شبكة مطوري موزيلا +slug: MDN/About +tags: + - التوثيق + - الرخص + - المساهمة + - حقوق الملكية + - حول الشبكة + - دليل +translation_of: MDN/About +--- +<div>{{MDNSidebar}}</div> + +<div>{{IncludeSubNav("/ar/docs/MDN")}}</div> + +<p dir="rtl">توثيقات شبكة مطوري موزيلا هي منصة تعليمية متطورة لتقنيات الويب والبرمجيات التي يقوم عليها الويب، متضمنةً:</p> + +<ul dir="rtl"> + <li>لغات الويب القياسية مثل <a href="/ar/docs/Web/CSS">صفحات الأنماط الانسيابية</a>، و<a href="/ar/docs/Web/HTML">لغة ترميز النص الفائق</a>، و<a href="/ar/docs/Web/JavaScript">الجافاسكربت</a>.</li> + <li><a href="/ar/docs/Web/تطبيقات">تطوير تطبيقات الويب المفتوح</a>.</li> + <li><a href="/ar/Add-ons">تطوير إضافات الفايرفوكس</a>.</li> +</ul> + +<h2 dir="rtl" id="هدفنا">هدفنا</h2> + +<p dir="rtl">هدف شبكة مطوري موزيلا بسيط، فهي تهدف لتزويد المطورين بالمعلومات التي يحتاجونها ليتمكنوا من بناء مشاريع بسهولة على <a href="/ar/docs/Web">الويب المفتوح</a>. فإذا كانت تقنية مفتوحة متعلقة بالويب، فنحن نريد توثيقها.</p> + +<p dir="rtl">بالإضافة لذلك، نقوم بتوفير توثيقات حول <a href="/ar/docs/Mozilla">منتجات موزيلا</a> وكيف يمكنك <a href="/ar/docs/Mozilla/">بناء والمساهمة في مشاريع موزيلا</a>.</p> + +<p dir="rtl">إذا كنت لست متأكداَ إن كان موضوع معين يجب أن يوجد في شبكة مطوري موزيلا، أقرأ مقالة: <a href="/en-US/docs/Project:MDN/Contributing/Does_this_belong">هل ينتمي هذا إلى شبكة مطوري موزيلا؟</a></p> + +<h2 dir="rtl" id="كيف_يمكنك_المساعدة">كيف يمكنك المساعدة</h2> + +<p dir="rtl">أنت لست بحاجة لأن تكون قادراً على البرمجة - أو الكتابة جيداً - لتكون قادراً على مساعدة شبكة مطوري موزيلا! فنملك العديد من الطرق التي يمكنك المساعدة فيها، من إعادة كتابة المقالات لتجعلها منطقية، إلى إضافة العينات البرمجية. في الحقيقة، يوجد العديد من الطرق التي يمكنك المساعدة فيها ولذلك قمنا بكتابة مقالة <a href="/ar/docs/MDN/Getting_started">خطواتك الأولى</a> التي ستساعدك على انتقاء المهمات التي يمكنك القيام بها، اعتماداً على اهتماماتك وعلى وقتك. </p> + +<p dir="rtl">يمكنك المساعدة أيضاً عن طريق <a href="/en-US/docs/MDN/About/Promote">نشر شبكة مطوري موزيلا </a>على مدونتك أو موقعك.</p> + +<h2 dir="rtl" id="مجتمع_شبكة_مطوري_موزيلا">مجتمع شبكة مطوري موزيلا</h2> + +<p dir="rtl">مجتمعنا مجتمع عالمي! فنملك مساهمين رائعين من جميع أنحاء العالم، بأعداد مختلفة من اللغات. إذا أحببت معرفة المزيد حولنا، أو إذا أردت مساعدة شبكة مطوري موزيلا بأي طريقة، تحقق من <a href="https://discourse.mozilla-community.org/c/mdn">منتدى المناقشة</a> خاصتنا أو من <a href="irc://irc.mozilla.org#mdn">قناة IRC</a>. يمكنك أيضاً مواكبة أخبارنا عن طريق متابعة حسابنا على التويتر <a href="http://twitter.com/MozDevNet">@MozDevNet</a>. تستطيع أيضاً إرسال تغريدة لنا إن كنت ترى شيئاً خاطئاً أو إذا أردت تقديم تعليق لكتابِنا ومساهمينا.</p> + + + +<h2 dir="rtl" id="استخدام_محتوى_توثيقات_شبكة_مطوري_موزيلا">استخدام محتوى توثيقات شبكة مطوري موزيلا</h2> + +<h3 dir="rtl" id="حقوق_الطباعة_والنشر_والرخص">حقوق الطباعة والنشر والرخص</h3> + +<p dir="rtl">تم إنشاء <strong>توثيقات شبكة مطوري موزيلا </strong> من مساهمات للعديد من الأشخاص، البعض منهم من مؤسسة موزيلا والبعض الآخر من خارجها. <span class="short_text" id="result_box" lang="ar"><span>ما لم يذكر خلاف ذلك</span></span>، يتوفر المحتوى تحت بنود <a href="https://creativecommons.org/licenses/by-sa/2.5/deed.ar">رخصة المشاع الإبداعي نَسب المُصنَّف - الترخيص بالمثل</a>، الإصدار 2.5 فما فوق. يرجى إدراج "Mozilla Contributors" ("المساهمين في موزيلا") وإضافة رابط تشعيبي (على الأنترنت) أو عنوان URL (في المحتوى المطبوع) لتحديد الصفحة التي ينتمي إليها المحتوى المستشهد به. فعلى سبيل المثال، لتوفير إسناد لهذه المقالة، يمكنك كتابة:</p> + +<blockquote>مقالة <a href="https://developer.mozilla.org/ar/docs/MDN/About">حول شبكة مطوري موزيلا</a> من قبل <a href="https://developer.mozilla.org/en-US/docs/MDN/About$history">المساهمين في موزيلا</a> مرخصة تحت <a href="https://creativecommons.org/licenses/by-sa/2.5/deed.ar">رخصة المشاع الإبداعي نَسب المُصنَّف - الترخيص بالمثل</a>.</blockquote> + +<p dir="rtl">لاحظ في المثال أنَّ "المساهمين في موزيلا" تشير برابط إلى الصفحة المذكورة. اقرأ مقالة <a href="http://wiki.creativecommons.org/Marking/Users">أفضل الطرق للإسناد</a> للمزيد من التوضيح.</p> + +<div class="note"> +<p dir="rtl">اقرأ مقالة <a href="/en-US/docs/MDN_content_on_WebPlatform.org">محتوى شبكة مطوري موزيلا على موقع WebPlatform.org</a> للمزيد من المعلومات حول كيفيّة إعادة استخدام وإسناد محتوى شبكة مطوري موزيلا على ذاك الموقع.</p> +</div> + +<p dir="rtl">العينات البرمجية المضافة إلى الموسوعة قبل آب في 2010/20 متوفرة تحت <a href="https://opensource.org/licenses/mit-license.php">رخصة MIT</a>؛ يجب عليك إضافة معلومات الإسناد التالية إلى الرخصة: "© <تاريخ آخر مراجعة للصفحة> <اسم الشخص الذي أنشأ الصفحة>".</p> + +<p dir="rtl">العينات البرمجية المضافة إلى الموسوعة في أو بعد آب في 2010/20 متوفرة تحت رخصة <a href="https://creativecommons.org/publicdomain/zero/1.0/deed.ar">المشاع الإبداعي التخصيص للملك العام</a>. لا يلزم إشعار الترخيص، ولكن إذا أردت واحداً، يمكنك استخدام: "<span id="result_box" lang="ar"><span>أي حق للمؤلف مخصص للملك العام.</span> <span>http://creativecommons.org/publicdomain/zero/1.0/</span></span>".</p> + +<p dir="rtl">إذا أردت المساهمة في هذه الموسوعة، يجب عليك وضع مساهمتك تحت رخصة المشاع الإبداعي نَسب المُصنَّف - الترخيص بالمثل (أو أحياناً تحت رخصة بديلة مذكورة في الصفحة التي تحررها)، وعيناتك البرمجية يجب أن تكون متوفرة تحت رخصة <a href="https://creativecommons.org/publicdomain/zero/1.0/deed.ar">المشاع الإبداعي التخصيص للملك العام</a>. فبإضافة صفحة لهذه الموسوعة أنت توافق على وضع مساهماتك تحت تلك الرخص المذكورة.</p> + +<p dir="rtl">بعض المحتوى الأقدم مُرخص تحت رخصة أخرى غير مذكورة أعلاه؛ تلك رخصة مذكورة أسفل كل صفحة كما في الطريقة المذكورة في مقالة <a href="/Archive/Meta_docs/Examples/Alternate_License_Block">الترخيص البديل</a>.</p> + +<div class="warning"> +<div id="gt-res-content"> +<div class="trans-verified-button-small" dir="rtl" id="gt-res-dir-ctr"> +<div id="tts_button"><span id="result_box" lang="ar"><span>لا يمكن إنشاء صفحات جديدة باستخدام تراخيص بديلة</span></span></div> +</div> +</div> +</div> + +<p dir="rtl"><strong>تُعزا حقول الطبع والنشر للمواد الملحقة بالمساهمة للمؤلف ما لم يَعزُها لشخصٍ آخر.</strong></p> + +<p dir="rtl">إذا كان لديك أي سؤال أو أهتمام حول أي شيء تم مناقشته هنا، رجاءً تواصل مع <a href="mailto:eshepherd@mozilla.com">اريك شيبيرد</a>.</p> + +<hr> +<p dir="rtl"><span id="result_box" lang="ar"><span>الحقوق في العلامات التجارية والشعارات وعلامات الخدمة لمؤسسة موزيلا، فضلاً عن الشكل والمظهر في هذا الموقع، ليست مرخصة بموجب رخصة المشاع الإبداعي، وإلى الحد الذي هي أعمال التأليف (مثل الشعارات والتصميمات</span><span>)، فهي ليست مدرجة في العمل المرخص بموجب هذه الشروط.</span> <span>إذا كنت تستخدم نص المستندات، وترغب أيضا في استخدام أي من هذه الحقوق، أو إذا كان لديك أي أسئلة أخرى حول الامتثال لشروط الترخيص لهذه المجموعة، يجب عليك الاتصال بمؤسسة موزيلا: <a href="mailto:licensing@mozilla.org">license@mozilla.org</a>.</span></span></p> + +<h3 dir="rtl" id="الإشارة_إلى_شبكة_مطوري_موزيلا">الإشارة إلى شبكة مطوري موزيلا</h3> + +<p dir="rtl">اقرأ هذه المقالة للحصول على دليل إرشادي حول <a href="/en-US/docs/MDN/About/Linking_to_MDN">الإشارة إلى شبكة مطوري موزيلا</a> لمعرفة الطرق الأفضل عندما تقوم بالإشارة إلى شبكتنا.</p> + +<h2 dir="rtl" id="تحميل_المحتوى">تحميل المحتوى</h2> + +<p dir="rtl">يمكنك تحميل <a href="https://mdn-downloads.s3-us-west-2.amazonaws.com/developer.mozilla.org.tar.gz">النسخة الكاملة من شبكة مطوري موزيلا</a> (بحجم 2.1GB الذي رصد<span class="short_text" id="result_box" lang="ar"><span> في شباط 2017</span></span>).</p> + +<h4 dir="rtl" id="الصفحات_الفردية">الصفحات الفردية</h4> + +<p dir="rtl">يمكنك الحصول على محتوى صفحة فردية في شبكة مطوري موزيلا بإضافة <a href="/en-US/docs/MDN/Kuma/API#Document_parameters">معاملات الوثيقة</a> للرابط لتحديد الصيغة التي تريدها.</p> + +<h4 dir="rtl" id="أدوات_طرف_ثالث">أدوات طرف ثالث</h4> + +<p dir="rtl">يمكنك رؤية محتوى شبكة مطوري موزيلا باستخدام أدوات طرف ثالث مثل <a href="http://kapeli.com/dash">Dash</a> (لنظام ماك) و <a href="http://zealdocs.org/">Zeal</a> (لنظام لينُكس وويندوز).</p> + +<h2 dir="rtl" id="الإبلاغ_عن_مشاكل_في_توثيقات_شبكة_مطوري_موزيلا">الإبلاغ عن مشاكل في توثيقات شبكة مطوري موزيلا</h2> + +<p dir="rtl">اقرأ <a href="/en-US/docs/MDN/Contribute/Howto/Report_a_problem">كيف تُبلِّغ عن مشكلة في شبكة مطورين موزيلا</a>.</p> + +<h2 dir="rtl" id="تاريخ_توثيقات_شبكة_مطوري_موزيلا">تاريخ توثيقات شبكة مطوري موزيلا</h2> + +<p dir="rtl">بدأ مشروع وثائق شبكة مطوري موزيلا (مركز مطوري موزيلا سابقاً) في نهاية 2005، عندما حصلت مؤسسة موزيلا على ترخيص من AOL لاستخدام محتوى نيتسكيب <a href="https://web.archive.org/web/*/devedge.netscape.com" title="Project:en/DevEdge">DevEdge</a>. حيث تم استخراج المحتوى المفيد من DevEdge، وبعدها قام المتطوعون بالانتقال لهذه الموسوعة.</p> + +<p dir="rtl">يمكنك إيجاد المزيد عن تاريخ شبكة مطوري موزيلا على صفحة <a href="/en-US/docs/MDN_at_ten">احتفال الذكرة العاشرة</a>، حيث تحتوي على تاريخ الشفهي من قبل بعض الأشخاص الذين ساهموا في المشروع.</p> + +<h2 dir="rtl" id="حول_موزيلا">حول موزيلا</h2> + +<p dir="rtl">سواءً كنت تريد معرفة المزيد حول من نحن، أو كيف يمكنك أن تكون جزءً من <em>موزيلا</em> أو فقط تريد أن تعرف أين يمكنك إيجادنا، فأنت في المكان المناسب. <span id="result_box" lang="ar"><span>لمعرفة ما يدفعنا ويجعلنا مختلفين، يرجى زيارة صفحة <a href="http://www.mozilla.org/en-US/mission/">هدفنا</a>.</span></span></p> diff --git a/files/ar/mdn/community/index.html b/files/ar/mdn/community/index.html new file mode 100644 index 0000000000..5870ddd218 --- /dev/null +++ b/files/ar/mdn/community/index.html @@ -0,0 +1,46 @@ +--- +title: انضم إلى مجتمع شبكة مطوري موزيلا +slug: MDN/Community +tags: + - حول الشبكة +translation_of: MDN/Community +--- +<div>{{MDNSidebar}}</div><div>{{IncludeSubNav("/ar/docs/MDN")}}</div> + +<div class="summary"> +<p dir="rtl">تعد شبكة مطوري موزيلا أكثر من موسوعة: فهي مجتمع للمطورين الذين يعملون معاً لجعل هذه الشبكة مصدر بارز للمطورين الذين يرغبون باستخدام تقنيات الويب المفتوح.</p> +</div> + +<p dir="rtl">سنود أن تساهم في المشروع، ولكننا نود أكثر أن تشارك في مجمتع شبكة مطوري موزيلا. في الأسفل سنشرح كيف يمكنك المشاركة بثلاثة خطوات سهلة:</p> + +<ol dir="rtl"> + <li> <a href="/ar/docs/MDN/Contribute/Howto/Create_an_MDN_account">أنشئ حساب في شبكة مطوري موزيلا</a>.</li> + <li><a href="/ar/docs/MDN/Community/Conversations">انضم إلى المحادثات</a>.</li> + <li><a href="/ar/docs/MDN/Community/Whats_happening">تابع ما يحدث</a>.</li> +</ol> + +<h2 dir="rtl" id="كيف_يعمل_المجتمع">كيف يعمل المجتمع</h2> + +<p dir="rtl">يوجد أدناه مقالات أكثر تصف مجتمع شبكة مطوري موزيلا.</p> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt class="landingPageList" dir="rtl"><a href="/ar/docs/MDN/Community/Roles">رُتب المجتمع</a></dt> + <dd class="landingPageList" dir="rtl">يوجد عدد من الرُتب في مجتمع شبكة مطوري موزيلا والتي تملك صلاحيات ومسؤوليات معينة.</dd> + <dt class="landingPageList" dir="rtl"><a href="https://developer.mozilla.org/en-US/docs/MDN/Community/Doc_sprints">سباقات التوثيق</a></dt> + <dd class="landingPageList" dir="rtl">تعد هذه المقالة دليل لتنظيم سباق توثيق. فهي تحتوي على نصائح من أناس قاموا بتنظيم سباقات توثيق، ليساعدوك على تنظيم واحد أيضاً.</dd> + <dt class="landingPageList" dir="rtl"><a href="/ar/docs/MDN/Community/Whats_happening">تابع ما يحدث</a></dt> + <dd class="landingPageList" dir="rtl">يعمل <a href="https://wiki.mozilla.org/MDN">مجتمع شبكة مطوري موزيلا </a> على تقديم هذه الموسوعة لك. يوجد في هذه المقالة بعض الطرق لتبادل المعلومات حول ما نقوم به. </dd> +</dl> +</div> + +<div class="section"> +<dl> + <dt class="landingPageList" dir="rtl"><a href="/ar/docs/MDN/Community/Conversations">محادثات مجتمع شبكة مطورين موزيلا</a></dt> + <dd class="landingPageList" dir="rtl">تُقام علمية التوثيق على موقع شبكة مطوري موزيلا أما المجتمع فيعمل من خلال مناقشات ومحادثات ولقاءات على الإنترنت.</dd> + <dt class="landingPageList" dir="rtl"><a href="/ar/docs/MDN/Community/Working_in_community">العمل في المجتمع</a></dt> + <dd class="landingPageList" dir="rtl">الجزء الرئيسي من المساهمة في وثائق شبكة مطوري موزيلا هو معرفة كيفية العمل كجزء من المجتمع. تقدم هذه المقالة نصائح لتساعدك على<span id="result_box" lang="ar"><span> تحقيق أقصى استفادة من تفاعلك مع كل من الكتاب الآخرين وفرق التطوير.</span></span></dd> +</dl> +</div> +</div> diff --git a/files/ar/mdn/community/whats_happening/index.html b/files/ar/mdn/community/whats_happening/index.html new file mode 100644 index 0000000000..818472e420 --- /dev/null +++ b/files/ar/mdn/community/whats_happening/index.html @@ -0,0 +1,41 @@ +--- +title: اتبع ما يحدث +slug: MDN/Community/Whats_happening +translation_of: MDN/Community/Whats_happening +--- +<div>{{MDNSidebar}}</div> + +<p>MDN is brought to you by the <a href="https://wiki.mozilla.org/MDN">MDN community</a>. Here are some ways to that we share information about what we're doing.</p> + +<h2 id="المدونات">المدونات</h2> + +<dl> + <dt><a href="https://hacks.mozilla.org/" title="https://hacks.mozilla.org/">Mozilla Hacks</a></dt> + <dd> + <p>أخبار حول وتغطية متعمقة لتقنيات وميزات الويب و Mozilla.</p> + </dd> + <dt><a href="https://blog.mozilla.org/community/category/developer-engagement/">إشراك المطورين</a></dt> + <dd>تعزيز النشاط والمناقشة بين المجتمع المشترك في MDN في موزيلا.</dd> +</dl> + +<h2 id="Streams_of_ephemera">Streams of ephemera</h2> + +<ul> + <li><a href="http://twitter.com/MozDevNet">@MozDevNet</a>: صفحات مثيرة للاهتمام ، ودروس تعليمية ، وأدلة ، وطلبات التقديم ، وتحديثات هامة ، وغيرها من الأخبار حول شبكة مطور Mozilla.</li> + <li><a href="https://twitter.com/mozhacks" title="https://twitter.com/mozhacks">@MozHacks</a>: تغريدات حول تقنيات الويب الجديدة وتطبيقات HTML5 الرائعة وميزات Firefox.</li> + <li><a href="http://www.youtube.com/user/mozhacks" title="http://www.youtube.com/user/mozhacks">Mozilla Hacks (YouTube)</a></li> +</ul> + +<h2 id="لوحات_الحالة_ولوحات_المعلومات">لوحات الحالة ولوحات المعلومات</h2> + +<p>ألقِ نظرة على صفحات <a href="/ar/docs/MDN/Doc_status">حالة "الوثائق"</a> لمعرفة ما يجري عبر النطاق الكامل لمحتوى MDN. ستكون قادرًا على رؤية المقالات التي تحتاج إلى كتابتها أو تحديثها ، وما الموضوعات التي تحتاج إلى مزيد من المساعدة ، وأكثر من ذلك بكثير</p> + +<h2 id="اجتماعات_MDN">اجتماعات MDN</h2> + +<p>There are a number of regular meetings for tracking and sharing progress on various MDN-related projects and processes. These are described on the <a href="https://wiki.mozilla.org/MDN/Meetings">MDN meetings wiki page</a>.</p> + +<p>To get a general sense of what's happening, the best meeting to attend is the MDN Community meeting, which occurs every two weeks on Wednesdays, 10:00 US Pacific time (UTC-0800 October-March, UTC-0700 in March-October), in the <a href="irc://irc.mozilla.org/mdn" title="irc://irc.mozilla.org/devmo">#mdn</a> <a href="http://wiki.mozilla.org/IRC" title="http://wiki.mozilla.org/IRC">IRC</a> channel. See the <a href="https://wiki.mozilla.org/MDN/Meetings/Community" title="https://wiki.mozilla.org/MDN/Community_meetings">MDN community meetings</a> wiki page for agendas and notes from past meetings.</p> + +<p>The <a class="external text" href="https://www.google.com/calendar/embed?src=mozilla.com_2d35383434313235392d323530%40resource.calendar.google.com" rel="nofollow">Public MDN Events</a> calendar contains MDN community meetings, doc sprints, and other MDN-related events. If you see a meeting which takes place in the "mdn" channel on our Vidyo videoconferencing system, you can <a href="https://v.mozilla.com/flex.html?roomdirect.html&key=gMM1xZxpQgqiQFNkUR3eBuHgxg">join the conversation on the web</a>.</p> + +<div id="eJOY__extension_root"> </div> diff --git a/files/ar/mdn/contribute/feedback/index.html b/files/ar/mdn/contribute/feedback/index.html new file mode 100644 index 0000000000..9bd5d9e5d5 --- /dev/null +++ b/files/ar/mdn/contribute/feedback/index.html @@ -0,0 +1,74 @@ +--- +title: ارسل تعليقاتك حول الشبكة +slug: MDN/Contribute/Feedback +tags: + - التوثيق + - حول + - حول الشبكة + - دليل +translation_of: MDN/Contribute/Feedback +--- +<div>{{MDNSidebar}}</div> + +<div>{{IncludeSubnav("/ar/docs/MDN")}}</div> + +<p dir="rtl">مرحباً بك في شبكة مطوري موزيلا! <span class="seoSummary">إن كنت تملك أية إقتراحات، أو تواجه مشكلة في استخدام الشبكة، فهذه الصفحة مناسبة لك. في الحقيقة، مجرد اهتمامك بالتفاعل معنا يجعلك جزءً من مجتمع موزيلا، فشكراً مقدماً على هذا الاهتمام.</span></p> + +<p dir="rtl"><span class="seoSummary">يوجد عدة طرق لتقدم اقتراحك؛ وهذه المقالة ستساعدك على ذلك.</span></p> + +<h2 dir="rtl" id="حدِّث_التوثيقات">حدِّث التوثيقات</h2> + +<p dir="rtl">قبل كل شيء، إذا رأيت أي مشكلة بالتوثيقات، فعليك ألا تتردد أبدا بتصحيحها بنفسك.</p> + +<ol dir="rtl"> + <li>قم <a href="/ar/docs/MDN/Contribute/Howto/إنشاء_حساب_على_شبكة_مطوري_موزيلا">بتسجيل الدخول</a> باستخدام <a href="https://github.com/">GitHub</a>.</li> + <li>انقر على الزر الأزرق المسمى <strong>عدِّل</strong> (Edit)، الموجود بأي صفحة، لتفتح <a href="/ar/docs/MDN/Contribute/Editor">المُحرِر</a>.</li> + <li>انقر على الزر <strong>انشر</strong> (Publish) لتحتفظ بالتغييرات بعد انتهائك.</li> +</ol> + +<p dir="rtl">تعمل التوثيقات هنا بنظام الموسوعة، والتي يتم إدارتها من قبل مجموعة من المتطوعين والموظفين، لذلك لا تشعر بالخجل، فلا يجب أن تكون كتابتك القواعديّة مثالية. سنصحح لك إن أخطأت؛ لا ضرر في ذلك!</p> + +<p dir="rtl">للمزيد من المعلومات حول المساهمة في وثائق شبكة مطوري موزيلا، اقرأ:</p> + +<ul dir="rtl"> + <li>مقالة <a href="/ar/docs/MDN/Getting_started">خطواتك الأولى في شبكة مطوري موزيلا</a>، لتحصل على أفكار حول أشياء يمكنك القيام بها</li> + <li>مقالة <a href="/ar/docs/MDN/Contribute">ساهم في الشبكة</a></li> + <li>دليل <a href="/ar/docs/MDN/Contribute/Editor">مُحرر شبكة مطوري موزيلا</a>.</li> +</ul> + +<h2 dir="rtl" id="انضم_إلى_المحادثات">انضم إلى المحادثات</h2> + +<p dir="rtl">تحدث معنا! يوجد بضعة طرق للتواصل مع الآخرين الذين يعملون على محتوى الشبكة.</p> + +<h3 dir="rtl" id="الدردشة_المتزامنة">الدردشة (المتزامنة)</h3> + +<p dir="rtl">نستخدم <a href="https://wiki.mozilla.org/IRC">IRC</a> للتحدث عن الشبكة ومحتواها. يمكنك أنت أيضاً الانضمام إلى المحادثة! لدينا عدة قنوات لتختار منها بناءً على اهتمامك:</p> + +<dl> + <dt dir="rtl"><a href="irc://irc.mozilla.org/mdn" title="irc://irc.mozilla.org/mdn">محتوى موقع الشبكة (mdn#)</a></dt> + <dd dir="rtl">هذه القناة مخصصة للنقاش العام حول الشبكة، متضمنةً: استخدام الموقع، وقراءة المحتوى على الموقع، والمساهمة في محتوى الموقع. إذا كنت تملك سؤالاً أو تعليقاً حول محتوى مقالة، أو كنت ترغب في رؤية أو إنشاء مقالة جديدة، أو لمجرد أنك تريد التحدث مع فريق الكتابة، فهذه القناة مناسبة لك بالتأكيد.</dd> + <dt dir="rtl"><a href="irc://irc.mozilla.org/mdndev" title="irc://irc.mozilla.org/mdndev">تطوير موقع التوثيق (mdndev#)</a></dt> + <dd dir="rtl">تعد هذه القناة المكان الذي نتكلم فيه عن أعمال تطوير المنصة التي تعمل عليها الشبكة. فإذا كنت تواجه مشكلة مع إحدى وظائف الموقع، أو تملك فكرة لميزة جديدة، يمكنك الإنضمام إلينا.</dd> +</dl> + +<h3 dir="rtl" id="المناقشات_الغير_متزامنة">المناقشات (الغير متزامنة)</h3> + +<p dir="rtl">تَحدُث المناقشات الطويلة في <a href="https://discourse.mozilla-community.org/c/mdn">منتدى النقاش الخاص بالشبكة</a>. يمكنك النشر في المنتدى باستخدام البريد <a href="mailto://mdn@mozilla-community.org">mdn@mozilla-community.org</a>. إذا انضممت للمنتدى، يمكنك الحصول على إشعارات حول المناقشات عبر البريد الإلكتروني أيضاً.</p> + +<h2 dir="rtl" id="بلِّغ_عن_الأخطاء">بلِّغ عن الأخطاء</h2> + +<h3 dir="rtl" id="أخطاء_في_التوثيق">أخطاء في التوثيق</h3> + +<p dir="rtl">إذا وجدت مشكلة في التوثيق ولم تستطع إصلاحها لسببٍ ما، فيمكنك <a href="https://github.com/mdn/sprints/issues/new?template=issue-template.md&projects=mdn/sprints/2&labels=user-report">الإبلاغ عنها</a>! يمكنك استخدام هذه الاستمارة للتبليغ عن أي مشكلة متعلقة بالتوثيق، على سبيل المثال:</p> + +<ul dir="rtl"> + <li>تصحيح بسيط</li> + <li>طلب فقرة جديدة ليتم إضافتها للمحتوى</li> + <li>الإبلاغ عن محتوى غير لائق (مثل محتوى غير مرغوب أو ترجمة ليست في مكانها الصحيح)</li> +</ul> + +<p dir="rtl">كما ذكرنا سابقاً، ندعوك للمساهمة في تلك التغييرات بنفسك، ولكن هذا الخيار متوفر أيضاً.</p> + +<h3 dir="rtl" id="أخطاء_في_الموقع">أخطاء في الموقع</h3> + +<p dir="rtl">إذا واجهت مشكلة في موقع الشبكة، أو كنت تملك فكرة لميزة جديدة، فيمكنك <a href="https://bugzilla.mozilla.org/form.mdn">فتح تذكرة لفريق التطوير</a>.</p> diff --git a/files/ar/mdn/contribute/getting_started/index.html b/files/ar/mdn/contribute/getting_started/index.html new file mode 100644 index 0000000000..6721236823 --- /dev/null +++ b/files/ar/mdn/contribute/getting_started/index.html @@ -0,0 +1,107 @@ +--- +title: خطواتك الأولى في الشبكة +slug: MDN/Contribute/Getting_started +tags: + - الإرشادات + - البداية + - الدليل + - المبتدئين + - المقدمة + - حول الشبكة + - دليل +translation_of: MDN/Contribute/Getting_started +--- +<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/ar/docs/MDN")}}</div> + +<p dir="rtl"><span id="result_box" lang="ar"><span>نحن مجتمع مفتوح من المطورين والكتاب نبني موارد لتحسين شبكة الإنترنت</span></span>، <span id="result_box" lang="ar"><span>بغض النظر عن العلامة التجارية، أو المتصفح، أو النظام الأساسي.</span> <span>يمكن لأي شخص المساهمة وكل شخص يجعلنا أقوى.</span> <span>معاً يمكننا الاستمرار في دفع الابتكار على شبكة الإنترنت لخدمة الخير.</span> كل شيء <span>يبدأ هنا، وبمساعدتك.</span></span></p> + +<p dir="rtl"><span id="result_box" lang="ar"><span>يتم بناء كل جزء من الشبكة </span></span><span id="result_box" lang="ar"><span>(من التعليمات البرمجية التي تجعل الموقع يعمل إلى العينات البرمجية والعروض التوضيحية) </span></span><span lang="ar"><span>من قبل مجتمع من المطورين والكُتّاب.</span> <span>كلٌ منا يمكنه ان يقدم شيء، ونأمل أن تفعل ذلك أيضاً!</span></span></p> + +<h2 dir="rtl" id="ثلاث_خطوات_سهلة_للبدء">ثلاث خطوات سهلة للبدء</h2> + +<p dir="rtl"><span class="seoSummary">شبكة مطوري موزيلا هي عبارة عن موسوعة، حيث يمكن <strong>للجميع </strong>أن يضيف أو يعدل المحتوى. لست ملزمًا أن تكون مبرمجاً أو أن تكون مُلِمَّاً بقدر كبير من التقنية، هناك الكثير من الأشياء التي يجب فعلها، بدءاً من المهام السهلة مثل التدقيق اللغوي أو تصحيح الأخطاء المطبعيّة، إلى تلك المهام الصعبة مثل كتابة وثائق للواجهات البرمجيّة. هذا الدليل سيساعدك على إيجاد أفضل طريقة للمساعدة في تحسين محتوى الشبكة.</span></p> + +<p dir="rtl">المساهمة هنا سهلة وآمنة. حتى لو قمت بخطأٍ ما، فيمكن إصلاحه بسهولة؛ إذا كنت لا تعلم كيف يفترض أن تبدو الصفحات، أو أن مهاراتك اللغويّة ليست ممتازة، فلا تقلق حيال ذلك! لدينا فريق من الأشخاص الذين أوكلنا إليهم الحرص على جودة محتوى الشبكة وظهوره بأفضل شكل ممكن. سيتأكد شخص ما من أنّ ما قمت بكتابته يظهر بشكل أنيق ومكتوب بشكل صحيح. شارك معرفتك وابذل كل جهدك، وكن على ثقة بأنَّ بقيّة أفراد المجتمع سيجعلون عملك يظهر بشكل أفضل مما تتصور.</p> + +<h3 dir="rtl" id="الخطوة_الأولى_أنشئ_حساباً_على_الشبكة">الخطوة الأولى: أنشئ حساباً على الشبكة</h3> + +<p dir="rtl">لتبدأ المساهمة يجب عليك امتلاك حساب في الشبكة. للمزيد من التفاصيل، رجاءً اقرأ <a href="/ar/docs/MDN/Contribute/Howto/Create_an_MDN_account">كيف تقوم بإنشاء حساب</a>. لاحظ أنّك<a href="https://github.com/join"> ستحتاج إلى حساب جيتهاب</a> قبل أن تنشئ واحداً على الشبكة، حيث أننا نقوم باستخدام الجيتهاب كوسيلة للمصادقة في الوقت الراهن.</p> + +<h3 dir="rtl" id="الخطوة_الثانية_اختر_مهمة">الخطوة الثانية: اختر مهمة</h3> + +<p dir="rtl">الآن وقد سجلت الدخول، اقرأ معلومات حول أنواع المهمات المختلفة في {{anch("أنواع المهام المتاحة", "القائمة أدناه")}}، واختر أيهم أنسب لك. يمكنك اختيار أي مهمة تريدها والبدء بالمساهمة.</p> + +<p dir="rtl">تفضل وطالع مقالة <a href="/ar/docs/MDN/Contribute/Howto/Create_and_edit_pages">كيفَ تحصل على صلاحيّة إنشاء الصفحات</a> في حال احتجت لإنشاء صفحة جديدة أثناء أداء مهماتك. لاحظ أنَّ الحسابات الجديدة لا تمتلك القدرة على إنشاء صفحات جديدة، افتراضياً، لأسباب أمنيّة.</p> + +<h3 dir="rtl" id="الخطوة_الثالثة_أنجز_المهمة">الخطوة الثالثة: أنجز المهمة</h3> + +<p dir="rtl">عندما تختار نوع المهمة التي تريدها، ابحث عن صفحة أو شيفرة أو أمثلة ...إلخ لكي تبدأ به، وقم بها فقط!</p> + +<p dir="rtl">لا تقلق حول جودة عملك؛ المساهمون الآخرون في الشبكة موجودون هنا لإصلاح الأخطاء التي تسقط منك سهوًا. إذا كانت لديك أسئلة لتطرحها، اذهب لصفحة <a href="/ar/docs/MDN/Community">المجتمع</a> لمعلومات حول القوائم البريدية وقنوات الدردشة حيث يمكنك إيجاد إجابات لأسئلتك.</p> + +<div class="note" dir="rtl"> +<p>إذا كنت تريد تعديل بعض الصفحات على الشبكة بغرض التجربة فقط قبل القيام بذلك على الصفحات الرئيسية، فنحن قد وفرنا لك <strong><a href="/ar/docs/Sandbox">صفحة تجريبيّة</a></strong> حيث يمكنك تجربة ما تشاء فيها. ومن فضلك قم بكل تجاربك في تلك الصفحة فقط. ولا تقم بتعديلات غير ضروريّة للصفحات الأخرى لكي ترى ما الذي قد يحدث؛ فهذا قد يتسبب بمشاكل للآخرين فلا يمكنهم إصلاحها أو أسوأ من ذلك، فقد تتسبب بتضليل القراء الذين يبحثون عن معلومة.</p> +</div> + +<p dir="rtl">عندما تنتهي من القيام بمهمتك، يمكنك البدء بواحدة أخرى، أو اقرأ حول {{anch("أشياء أُخرى يمكنك فعلها على الشبكة", "أشياء أُخرى يمكنك فعلها على الشبكة")}}.</p> + +<h2 dir="rtl" id="أنواع_المهام_المتاحة">أنواع المهام المتاحة</h2> + +<p dir="rtl">هناك العديد من السبل التي يمكنك اتباعها للمساهمة في الشبكة، اعتماداً على مهاراتك واهتماماتك. على الرغم من وجود العديد من المهام الشاقة، إلاّ أنه توجد الكثير من المهام السهلة المتوفر أيضاً. الكثير منها لا يتطلب سوى خمسة دقائق من وقتك (أو أقل!). أدناه، إلى جانب المهمة ووصف قصير لها، ستجد الوقت التقريبي الذي تأخذه كل مهمة للقيام بها.</p> + +<h3 dir="rtl" id="الخيار_الأول_أحب_الكتابة!">الخيار الأول: أحب الكتابة!</h3> + +<p dir="rtl">يمكنك مساعدتنا بمراجعة أو تحرير الوثائق، وإضافة الوسوم المناسبة لها.</p> + +<ul dir="rtl"> + <li><a href="/ar/docs/MDN/Contribute/Howto/Set_the_summary_for_a_page">إضافة ملخص للصفحة</a> (من خمس دقائق إلى خمس عشرة دقيقة)</li> + <li><a href="/ar/docs/MDN/Contribute/Howto/Do_an_editorial_review">القيام بمراجعات تعديلية</a> (من خمسة دقائق إلى ثلاثين دقيقة)</li> + <li><a href="/ar/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">كتابة مصطلح جديد في الفهرس</a> (من خمس عشرة دقيقة إلى ساعة)</li> + <li><a href="/ar/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">كتابة مقالة لمساعدة الناس على تعلم الويب</a> (من ساعة إلى ساعتين)</li> +</ul> + +<div class="note" dir="rtl">إن كنت تكتب أو تراجع المقالات، فيرجى أن تقرأ <a href="/ar/docs/MDN/Contribute/Guidelines/Style_guide">دليل التنسيق</a>. هذا سيساعدك على التأكد أن المقالة متسقة ومُنسَّقة.</div> + +<h3 dir="rtl" id="الخيار_الثاني_أحب_البرمجة!">الخيار الثاني: أحب البرمجة!</h3> + +<p dir="rtl">نحتاج المزيد من العينات البرمجية! يمكنك أيضاً المساعدة ببناء المنصة التي يعمل عليها الموقع (منصة <a href="/ar/docs/MDN/Kuma">Kuma</a>).</p> + +<ul dir="rtl"> + <li><a href="/ar/docs/MDN/Contribute/Howto/Convert_code_samples_to_be_live">قم بتشغيل العينات البرمجية بشكل "حي"</a> (ثلاثين دقيقة)</li> + <li><a href="https://wiki.mozilla.org/Webdev/GetInvolved/developer.mozilla.org">اقرأ دليل البدء في التطوَّع</a> (ثلاثين دقيقة)</li> + <li><a href="http://kuma.readthedocs.org/en/latest/installation.html">قم بتثبيت بيئة بناء برمجية Kuma</a> (ساعة واحدة)</li> + <li><a href="https://github.com/mozilla/kuma#readme">ارسل الترقيعات البرمجية إلى قاعدة شيفرات برمجية Kuma</a> (ساعة واحدة)</li> +</ul> + +<h3 dir="rtl" id="الخيار_الثالث_أحب_الكتابة_والبرمجة!">الخيار الثالث: أحب الكتابة والبرمجة!</h3> + +<p dir="rtl">لدينا مهام تتطلب المهارتين التقنية واللغوية معاً، ككتابة مقالات جديدة، أو المراجعة للدقة التقنية، أو تكييف الوثائق.</p> + +<ul dir="rtl"> + <li><a href="/ar/docs/MDN/About/Promote">انشر الشبكة على موقعك</a> (خمسة دقائق)</li> + <li><a href="/ar/docs/MDN/Contribute/Howto/Do_a_technical_review">قم بمراجعات تقنية</a> (ثلاثين دقيقة)</li> + <li><a href="/ar/docs/Contribute_to_docs_that_are_currently_needed">اكتب مقالة جديدة حول موضوع مطلوب حالياً</a> (ساعة أو أكثر)</li> + <li><a href="/ar/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">أنشئ تمرين تفاعلي لتساعد الناس على تعلم الويب</a> (ساعة أو أكثر)</li> + <li><a href="/ar/docs/MDN/Contribute/Howto/Resolve_a_mentored_developer_doc_request">أصلح علّة في الوثائق</a> في <a href="http://www.joshmatthews.net/bugsahoy/?mdn=1">تصنيفات الشبكة في جامع العلل</a> (ساعة أو أكثر)</li> +</ul> + +<h3 dir="rtl" id="الخيار_الرابع_أريد_الشبكة_بلغتي!">الخيار الرابع: أريد الشبكة بلغتي!</h3> + +<p dir="rtl">جميع الترجمات التي تتم في الشبكة تكون بفضل مجتمعنا الرائع من المتطوعين.</p> + +<ul dir="rtl"> + <li><a href="/ar/docs/MDN/Contribute/Localize/Translating_pages">ترجمة الصفحات</a> (ساعتين)</li> + <li>التواصل مع مترجمين آخرين المسرودين في صفحة <a href="/ar/docs/MDN/Contribute/Localize/Localization_projects">مشاريع الترجمة</a> (ثلاثين دقيقة)</li> +</ul> + +<h3 dir="rtl" id="الخيار_الخامس_وجدت_بعض_المعلومات_الخاطئة_ولكن_لا_أعلم_كيفية_إصلاحها!">الخيار الخامس: وجدت بعض المعلومات الخاطئة ولكن لا أعلم كيفية إصلاحها!</h3> + +<p dir="rtl">يمكنك الإبلاغ عنها عبر <a href="https://bugzilla.mozilla.org/form.doc">ملء استمارة الإبلاغ</a> (خمسة دقائق)</p> + +<h2 dir="rtl" id="أشياء_أُخرى_يمكنك_فعلها_على_الشبكة">أشياء أُخرى يمكنك فعلها على الشبكة</h2> + +<ul dir="rtl"> + <li><a href="/ar/docs/MDN/Community">انضم لمجتمع شبكة مطوري موزيلا</a>.</li> + <li><a href="/ar/profile">املأ ملفك الشخصي</a> ليعلم الآخرون المزيد عنك.</li> + <li>تعلم المزيد حول <a href="/ar/docs/MDN/Contribute">المساهمة في الشبكة</a>.</li> +</ul> diff --git a/files/ar/mdn/contribute/howto/do_a_technical_review/index.html b/files/ar/mdn/contribute/howto/do_a_technical_review/index.html new file mode 100644 index 0000000000..72774721a9 --- /dev/null +++ b/files/ar/mdn/contribute/howto/do_a_technical_review/index.html @@ -0,0 +1,67 @@ +--- +title: كيفية القيام بمراجعة فنية +slug: MDN/Contribute/Howto/Do_a_technical_review +translation_of: MDN/Contribute/Howto/Do_a_technical_review +--- +<div>{{MDNSidebar}}</div> + +<div>{{IncludeSubnav("/en-US/docs/MDN")}}</div> + +<p class="summary">تتكون <strong>المراجعة الفنية</strong> من مراجعة الدقة الفنية واكتمال مقال ما وتصحيحه إذا لزم الأمر. إذا أراد كاتب مقال أن يقوم شخص آخر بالتحقق من المحتوى الفني لمقال ما ، فإن الكاتب يضع علامة اختيار في خانة "المراجعة الفنية" أثناء التحرير. غالبًا ما يتصل الكاتب بمهندس معين لإجراء المراجعة الفنية ، ولكن يمكن لأي شخص لديه خبرة فنية في الموضوع أن يفعل ذلك.</p> + +<p>توضح هذه المقالة كيفية إجراء مراجعة فنية ، مما يساعد على ضمان دقة محتوى MDN</p> + +<p dir="rtl"><strong>ما هي المهمة؟</strong></p> + +<dl> + <dd dir="rtl">مراجعة وتصحيح المقالات للتأكد من دقتها واكتمالها.</dd> + <dt dir="rtl">أين يجب القيام به؟</dt> + <dd dir="rtl">في مقالات محددة تم وضع علامة على أنها تتطلب <a href="https://developer.mozilla.org/en-US/docs/needs-review/technical">مراجعة فنية</a>.</dd> + <dt dir="rtl">ما الذي تحتاج إلى معرفته لأداء المهمة؟</dt> + <dd> + <ul> + <li dir="rtl">معرفة الخبراء بموضوع المقالة التي تراجعها. إذا كانت قراءة المقال لا تعلمك أي شيء جديد ، فاعتبر نفسك خبيرًا.</li> + <li> + <p dir="rtl">كيفية تحرير مقالة ويكي على MDN.</p> + </li> + </ul> + </dd> + <dt> + <p>ما هي خطوات القيام بذلك؟</p> + </dt> + <dd> + <ol> + <li>اختيار مقال للمراجعة: + <ol> + <li>انتقل إلى قائمة الصفحات التي تحتاج إلى <a href="https://developer.mozilla.org/en-US/docs/needs-review/technical">مراجعات فنية</a>. هذا يسرد جميع الصفحات التي طلبت مراجعة فنية لها.</li> + <li>اختر صفحة موضوعك مألوفة لديك.</li> + <li>انقر على رابط المقال لتحميل الصفحة.</li> + </ol> + </li> + <li>اقرأ المقال ، مع إيلاء اهتمام وثيق للتفاصيل الفنية: هل المقال صحيح؟ هل هناك شيء مفقود؟ لا تتردد في التبديل إلى صفحة مختلفة إذا كانت أول صفحة تختارها لا تناسبك. + <ol> + </ol> + </li> + <li>إذا لم تكن هناك أخطاء ، فلن تحتاج إلى تعديل المقالة لوضع علامة عليها كمراجعة. ابحث عن مربع "المراجعة السريعة" في الشريط الجانبي الأيسر من الصفحة. يسرد هذا المربع الأصفر أي مراجعات معلقة ويسمح لك بمسح علامة طلب المراجعة. يبدو مثل هذا إذا تم طلب مراجعة فنية:<br> + <img alt="Screenshot of the sidebar's box listing reviews that have been requested and allowing the flags to be changed." src="https://mdn.mozillademos.org/files/13016/SidebarTechReviewRequested.png"></li> + <li> + <p>ألغ تحديد مربع الاختيار <strong>الفني</strong> ، وانقر فوق "<strong>حفظ</strong>".</p> + </li> + <li> + <p>إذا وجدت أخطاء تحتاج إلى تصحيح ، فسيسعدك معرفة أنه يمكنك أيضًا تغيير حالة طلب المراجعة من داخل المحرر. إليك سير العمل:</p> + + <ol> + <li>لتحرير الصفحة ، انقر فوق الزر "<strong>تحرير</strong>" بالقرب من أعلى الصفحة ؛ هذا يضعك في محرر MDN.</li> + <li>إصلاح أي معلومات فنية غير صحيح ، و / أو إضافة أي معلومات مهمة مفقودة.</li> + <li>أدخل <strong>تعليق المراجعة</strong> في أسفل المقال. هذه رسالة مختصرة تصف ما قمت به ، مثل "إكمال المراجعة الفنية". إذا قمت بتصحيح المعلومات ، فقم بتضمينها في تعليقك ، على سبيل المثال "المراجعة الفنية وأوصاف المعلمات الثابتة". يساعد ذلك المساهمين الآخرين ومحرري الموقع في معرفة ما الذي قمت بتغييره ولماذا. يمكنك أيضًا ذكر ما إذا كانت هناك وحدات بت محددة لم تشعر أنها مؤهلة للمراجعة</li> + <li>ألغ تحديد المربع<strong> الفني</strong> تحت <strong>المراجعة المطلوبة</strong>؟ أسفل منطقة تعليق المراجعة بالصفحة.</li> + <li>انقر على زر <strong>نشر</strong>.</li> + </ol> + </li> + </ol> + + <p dir="rtl">تهانينا! لقد أنهيت أول مراجعة فنية لك! شكرا لك على مساعدتك!</p> + </dd> +</dl> + +<div id="eJOY__extension_root"> </div> diff --git a/files/ar/mdn/contribute/howto/do_an_editorial_review/index.html b/files/ar/mdn/contribute/howto/do_an_editorial_review/index.html new file mode 100644 index 0000000000..1ba5c000fd --- /dev/null +++ b/files/ar/mdn/contribute/howto/do_an_editorial_review/index.html @@ -0,0 +1,58 @@ +--- +title: كيفية القيام بمراجعة تحريرية +slug: MDN/Contribute/Howto/Do_an_editorial_review +translation_of: MDN/Contribute/Howto/Do_an_editorial_review +--- +<div>{{MDNSidebar}}</div> + +<div>{{IncludeSubnav("/en-US/docs/MDN")}}</div> + +<p class="summary"><strong>Editorial reviews</strong> consist of fixing typos, spelling, grammar, usage, or textual errors in an article. One does not have to be a writing expert to make valuable contributions to MDN's technical documentation, but articles still need copy-editing and proof-reading. This is done in an editorial review.</p> + +<p class="simple-translate-result" dir="rtl" style="color: rgb(0, 0, 0);"><span class="seoSummary">توضح هذه المقالة كيفية إجراء مراجعة تحريرية ، مما يساعد على ضمان دقة محتوى MDN وكتابته بشكل جيد.</span></p> + +<dl> + <dt>ما هي المهمة؟</dt> + <dd> + <p class="simple-translate-result" style="color: rgb(0, 0, 0);">تحرير النسخ وقراءة التجارب للمقالات التي تم تحديدها على أنها تتطلب مراجعة تحريرية.</p> + </dd> + <dt> + <p class="simple-translate-result" style="color: rgb(0, 0, 0);">أين يجب القيام به؟</p> + </dt> + <dd> + <p class="simple-translate-result" style="color: rgb(0, 0, 0);">ضمن مقالات محددة تم تعليمها على أنها تتطلب مراجعة افتتاحية.</p> + </dd> + <dt>ما الذي تحتاج إلى معرفته لأداء المهمة؟</dt> + <dd>You need to have good English grammar and spelling skills. An editorial review is about ensuring that the grammar, spelling, and wording are correct and make sense, and that the <a href="/en-US/docs/MDN/Contribute/Guidelines/Writing_style_guide">MDN writing style guide</a> is followed.</dd> + <dt> + <p class="simple-translate-result" style="color: rgb(0, 0, 0);">ما هي خطوات القيام بذلك؟</p> + </dt> + <dd> + <ol> + <li>Pick an article to review: + <ol> + <li>Go to the list of <a href="/en-US/docs/needs-review/editorial">articles needing editorial review</a>. This lists all the pages for which an editorial review has been requested.</li> + <li>Click on the article link to load the page.<br> + <strong>Note: </strong>This listing is generated automatically but infrequently, so some articles appear on the list that no longer need editorial review. If the article you picked does <em>not</em> display a banner that says "This article needs an editorial review", skip that article and pick a different one.</li> + </ol> + </li> + <li id="core-steps">Read the article carefully, looking out for typos, spelling, grammar, or usage errors. Don't hesitate to switch to a different page if the first one you choose doesn't suit you.</li> + <li>If there are no errors, you don't need to edit the article to mark it as reviewed. Look for the "quick review" box in the left sidebar of the page:<br> + <img alt="Screenshot of the editorial review request sidebar box" src="https://mdn.mozillademos.org/files/13018/SidebarReviewBoxEditorial.png"></li> + <li>Deselect the <strong>Editorial</strong> box and click <strong>Save</strong>.</li> + <li>If you find errors that need to be corrected: + <ol> + <li>Click the <strong>Edit</strong> button near the top of the page; this brings you into the <a href="/en-US/docs/Project:MDN/Contributing/Editor_guide">MDN editor</a>.</li> + <li>Correct any typos and spelling, grammar, or usage errors you find. You don't have to fix everything to be useful, but be sure to leave the editorial review request in place if you don't feel reasonably sure that you've done a complete review of the entire article.</li> + <li>Enter a <strong>Revision Comment</strong> at the bottom of the article; something like '<em>Editorial review: fixed typos, grammar & spelling.</em>' This lets other contributors and site editors know what you changed and why.</li> + <li>Deselect the <strong>Editorial</strong> box under <strong>Review Needed?</strong>. This is located just below the Revision Comment section of the page.</li> + <li>Click the <strong>Publish</strong> button.</li> + </ol> + </li> + </ol> + + <div class="note"> + <p class="simple-translate-result" dir="rtl" style="color: rgb(0, 0, 0);">التغييرات الخاصة بك قد لا تكون مرئية مباشرة بعد الحفظ ؛ قد يكون هناك تأخير أثناء معالجة الصفحة وحفظها.</p> + </div> + </dd> +</dl> diff --git a/files/ar/mdn/contribute/howto/index.html b/files/ar/mdn/contribute/howto/index.html new file mode 100644 index 0000000000..6623e08af6 --- /dev/null +++ b/files/ar/mdn/contribute/howto/index.html @@ -0,0 +1,16 @@ +--- +title: How-to guides +slug: MDN/Contribute/Howto +tags: + - Documentation + - Landing + - MDN + - NeedsTranslation + - TopicStub +translation_of: MDN/Contribute/Howto +--- +<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/ar/docs/MDN")}}</div> + +<p>These articles provide step-by-step guides to accomplishing specific goals when contributing to MDN.</p> + +<p>{{LandingPageListSubpages}}</p> diff --git a/files/ar/mdn/contribute/howto/report_a_problem/index.html b/files/ar/mdn/contribute/howto/report_a_problem/index.html new file mode 100644 index 0000000000..32a5b16087 --- /dev/null +++ b/files/ar/mdn/contribute/howto/report_a_problem/index.html @@ -0,0 +1,22 @@ +--- +title: كيفية الإبلاغ عن مشكلة في MDN +slug: MDN/Contribute/Howto/Report_a_problem +translation_of: MDN/Contribute/Howto/Report_a_problem +--- +<div>{{MDNSidebar}}</div> + +<p>Now and then, you may run into problems while using MDN. Whether it's a problem with site infrastructure or an error in documentation content, you can either try to fix it yourself or report the problem. While the former is preferred, the latter is sometimes the best you can manage, and that's okay too.</p> + +<h2 id="Documentation_errors_or_requests">Documentation errors or requests</h2> + +<p>Obviously, since MDN is a wiki, the best thing you can possibly do is fix problems you spot yourself. But maybe you don't know the answer or are in the middle of a deadline on your own project or something, and need to jot down the problem so someone can look at it later.</p> + +<p>The way to report a documentation problem by filing an <a href="https://github.com/mdn/sprints/issues/new?template=issue-template.md&projects=mdn/sprints/2&labels=user-report">documentation issue</a>. The issue template contains sections for the information needed to get us started on fixing the issue. Feel free to delete any part of the template that isn't helpful or relevant to your issue.</p> + +<p>Of course, our writing community is busy, so sometimes the quickest way to see a documentation problem resolved is to fix it yourself. See <a href="/en-US/docs/MDN/Contribute/Howto/Create_and_edit_pages" title="/en-US/docs/Project:MDN/Contributing/Creating_and_editing_pages">How to create and edit pages</a> for details. </p> + +<h2 id="Site_bugs_or_feature_requests">Site bugs or feature requests</h2> + +<p><a href="/en-US/docs/MDN/Kuma" title="/en-US/docs/Project:MDN/Kuma">Kuma</a>, the Mozilla-developed platform used for the MDN web site, is in a state of continuous development. Our developers—as well as a number of volunteer contributors—are constantly making improvements. If you see a bug, or have a problem with the site, or even have a suggestion for something that could make the software more awesome, you can use the <a href="https://github.com/mdn/kuma/issues/new">Kuma bug form</a> to file a report. You can also use this form to report performance problems with the site, though odds are that performance-monitoring tools have already notified the appropriate people.</p> + +<div id="eJOY__extension_root"></div> diff --git a/files/ar/mdn/contribute/howto/set_the_summary_for_a_page/index.html b/files/ar/mdn/contribute/howto/set_the_summary_for_a_page/index.html new file mode 100644 index 0000000000..7f1598cb01 --- /dev/null +++ b/files/ar/mdn/contribute/howto/set_the_summary_for_a_page/index.html @@ -0,0 +1,116 @@ +--- +title: How to set the summary for a page +slug: MDN/Contribute/Howto/Set_the_summary_for_a_page +translation_of: MDN/Contribute/Howto/Set_the_summary_for_a_page +--- +<div>{{MDNSidebar}}</div> + +<div>{{IncludeSubnav("/en-US/docs/MDN")}}</div> + +<p><span class="seoSummary">في هذه المقالة ، سنعرض كيفية تعيين ملخص تحسين محركات البحث (المعروف أيضًا بالوصف أو ملخصًا فقط) لمقالة على موقع مستندات ويب MDN. يستخدم الملخص بعدة طرق:</span></p> + +<ul> + <li> يتم استخدام جوجل ومحركات البحث الاخرى للمساعدة على فهرسة الصفحات.</li> + <li>تعرض محركات البحث الملخص في صفحات نتائج البحث لمساعدة القراء على اختيار الصفحة الأكثر تطابقاً لاحتياجاتهم.</li> + <li>غالبًا ما تعرض قوائم MDN والصفحات المقصودة للموضوع الملخص أسفل عنوان المقالة ، ومرة أخرى لمساعدة المستخدمين في العثور على المعلومات التي يبحثون عنها.</li> + <li>تحتوي الروابط على MDN بشكل متكرر على تلميحات تحتوي على نص الملخص ، لتوفير نظرة سريعة للمستخدمين دون الحاجة إلى النقر على المقالة نفسها.</li> +</ul> + +<p>لذلك ، يجب أن يكون الملخص نصًا منطقيًا في سياق المقالة نفسها وكذلك عند تقديمه بمفرده في سياقات أخرى. يجب عليك أيضًا الاحتفاظ بدليل نمط كتابة <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Guidelines/Writing_style_guide">MDN </a>في الاعتبار أثناء كتابة نص الملخص.</p> + + + +<h2 dir="rtl" id="الملخص_الافتراضي">الملخص الافتراضي</h2> + +<p dir="rtl">تعتمد الصفحات التي لا تحتوي أي ملخص على الملخص الافتراضي.<br> + بشكل افتراضي يعتبر ملخص الصفحة هو أول قسم من الصفحة مكتوب ب <br> + {{Glossary("HTML")}}<br> + لذلك من الممكن أي يكون الملخص عبارة عن نص وليس عنوان. </p> + +<p dir="rtl">هذا النص ليس الأفضل للاستخدام دائما ولكن ولبعض الأسباب المذكورة أدناه يعتبر أفضل استخدام.</p> + +<ul dir="rtl"> + <li>النص الأول يعتبر شيء جانبي أو ملاحظة ما, ولا يقدم أي مراجعة كاملة للصفحة</li> + <li><span style="font-size: 1rem; letter-spacing: -0.00278rem;">أول نص مكتوب يعتبر نص محتوى ولكن لا يقدم مراجعة كاملة لمحتوى المقالة</span></li> + <li><span style="font-size: 1rem; letter-spacing: -0.00278rem;">النص طويل أو قصير للغاية</span></li> +</ul> + +<p dir="rtl">من الأفضل كتابة وتحديد ملخص الصفحة لضمان سهولة قراءة الملخصات واعتبارها مفيدة بقدر الإمكان.</p> + +<h2 id="Setting_the_summary">Setting the summary</h2> + +<p>Let's look at how to go about setting a page's summary.</p> + +<dl> + <dt><strong>What is the task?</strong></dt> + <dd>Marking the text within a page that should be used as its summary in other contexts; if appropriate text isn't already available, this task might include writing a small amount of appropriate text.</dd> + <dt><strong>Where does it need to be done?</strong></dt> + <dd>On pages that lack a summary, have a summary that isn't helpful, or have a summary that unnecessarily fails to meet recommended guidelines.</dd> + <dt><strong>What do you need to know to do the task?</strong></dt> + <dd>Ability to use the MDN editor; good English writing skills; enough familiarity with the topic of the page to write a good summary.</dd> + <dt><strong>What are the steps to do it?</strong></dt> +</dl> + +<ul> + <li>Pick a page on which to set the summary. If you already have one in mind, great! You can skip to step 2; otherwise, to find a page to fix: + <ol> + <li>In the <a href="/en-US/docs/MDN/Doc_status">MDN documentation status</a> page, click the link under <strong>Sections</strong> for a topic that you know something about (for example, HTML):<br> + <img alt="" src="https://mdn.mozillademos.org/files/8681/sections.png" style="height: 130px; width: 504px;"></li> + <li>On the topic's documentation status page, click the <strong>Pages</strong> header in the <strong>Summary</strong> table. This takes you to an index of all the pages in that topic section; it shows the page links in the left column, and the tags and summaries in the right column:<br> + <img alt="" src="https://mdn.mozillademos.org/files/8675/pages.png" style="height: 82px; width: 361px;"></li> + <li>Pick a page that is missing a summary, or that has a poor summary:<br> + <img alt="" src="https://mdn.mozillademos.org/files/8677/summary.png" style="height: 38px; width: 296px;"></li> + <li>Click the link to go to that page.</li> + </ol> + </li> +</ul> + +<dl> + <dd> + <ol> + <li>Once on the page to which you wish to add a summary, click <strong>Edit</strong> to open the page in the MDN editor. See the <a href="/en-US/docs/MDN/Contribute/Editor">Guide to the MDN editor</a> if you need information about using the editor.</li> + <li>Look for a sentence or two that works as a summary, even if taken out of context. If needed, edit the existing content to create or modify the text until you can select a sentence or two that make a good summary. See {{anch("Crafting a good summary")}} for help selecting or creating an appropriate summary.</li> + <li>Select the text to be used as a summary.</li> + <li>In the <em>Styles</em> widget of the editor toolbar, select <strong>SEO Summary</strong>. In the page source, this creates a {{HTMLElement("span")}} element with <code>class="seoSummary"</code> around the selected text.<br> + <img alt="" src="https://mdn.mozillademos.org/files/8679/styles.png" style="height: 231px; width: 403px;"></li> + <li>Save your changes with a revision comment. The comment is optional, but we encourage you to provide one. It makes it easier for other people to track the changes. Something like "Set SEO summary" is enough.</li> + </ol> + </dd> +</dl> + +<h2 id="Crafting_a_good_summary">Crafting a good summary</h2> + +<p>The summary is used in many different scenarios, including these:</p> + +<ul> + <li>As the description of the article on search results pages on MDN as well as on Google and other search engines.</li> + <li>As the description of the article in menus and topic landing pages on MDN itself.</li> + <li>In contextual tooltips when the user hovers the cursor over links to articles on MDN.</li> +</ul> + +<p>It's important to keep these scenarios in mind while composing a summary. In order to help ensure that the summary works well in all of these situations, please try to follow the guidelines below.</p> + +<div class="note"> +<p><strong>Note:</strong> Unless otherwise specifically stated, these are <em>guidelines</em>, not hard and fast rules. While you should do what you can to meet these guidelines, sometimes there are exceptions that can't be avoided.</p> +</div> + +<ul> + <li>The summary should indicate both the topic and the type of page. "In this guide, we'll learn to use the Intersection Observer API to create responsive web apps that only update animations that are currently visible on screen." is 160 characters, for example, and explains what technology is being covered, how the technology is being used, and that the article is a tutorial.</li> + <li>You can choose text from anywhere within any paragraph in the article, but it should ideally be within the first paragraph (or the second, in some cases). If the point of the article isn't made in those paragraphs, the introduction of the page probably needs rewriting.</li> + <li>The summary must still fit well within the context of the article's body, since it is in fact part of the article.</li> + <li>It's okay to have links to other pages within the summary. These are automatically removed before being given to search engines, and do not count against you. They're also removed before the summary is used as a tooltip. Links are <em>not</em> removed from the summary when used as a page description within menus and landing pages on MDN, which is really convenient as well.</li> + <li>The summary should include an appropriate selection of key terms likely to be searched for by someone looking for information contained on the page. In the example case about the Intersection Observer API, those keywords include the API name, "animations", "visible", "responsive", and "web apps", possibly among others.</li> + <li>To optimize the <strong>Search Engine Optimization</strong> (SEO) value gained from a summary, it should be no shorter than 150 characters long.</li> + <li>Since a <strong>search engine result page</strong> (<strong>SERP</strong>) typically doesn't show more than 160 characters of the summary, you should avoid summaries longer than that. Having your text unceremoniously chopped off can dissuade people from clicking the link.</li> + <li>It might be tempting to write a great summary that doesn't work on page, then hide the summary inside a block with the <code>"hidden"</code> class on it. But <em>this doesn't work</em>, because search engines ignore text that's not visible to the user.</li> +</ul> + +<p>Think of the summary as being akin to the {{interwiki("wikipedia", "blurb")}} on the back or inside the front cover of a book. This short text has to catch the reader's attention quickly and encourage them to read on.</p> + +<p>It can be a little tricky to write an summary that works well both for search engine result pages and within the article text itself, but currently MDN doesn't offer a way to create an SEO summary separate from the page content, so do the best you can.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/MDN/Contribute/Howto/Write_for_SEO">How to write with SEO in mind on MDN Web Docs</a></li> +</ul> diff --git a/files/ar/mdn/contribute/howto/tag/index.html b/files/ar/mdn/contribute/howto/tag/index.html new file mode 100644 index 0000000000..ec40ef97c6 --- /dev/null +++ b/files/ar/mdn/contribute/howto/tag/index.html @@ -0,0 +1,376 @@ +--- +title: How to properly tag pages +slug: MDN/Contribute/Howto/Tag +translation_of: MDN/Contribute/Howto/Tag +--- +<pre dir="rtl">{{MDNSidebar}}</pre> + +<p class="summary"><strong>Article tags</strong> are an important way to put visitors in touch with helpful content. Each page should normally have several tags to help keep content organized. <span class="seoSummary">This page explains the best way to tag pages so that our readers can find information and we can keep ourselves organized.</span></p> + +<p>For a help with the user interface for editing tags, see the <a href="/en-US/docs/MDN/Contribute/Editor/Basics#The_tags_box">tagging section</a> in our editor guide.</p> + +<p>Please use tags properly as explained below. If you don't, our automated tools will not correctly generate lists of content, landing pages, and cross-linking of articles.</p> + +<h2 id="How_MDN_uses_tags">How MDN uses tags</h2> + +<p>Tags get used on MDN several ways:</p> + +<dl> + <dt>{{anch("Document category", "Document categorization")}}</dt> + <dd>What type of document is it? Is it a reference? A tutorial? A landing page? Our visitors can use these tags to filter searches, so they're really important!</dd> + <dt>{{anch("Topic", "Topic identification")}}</dt> + <dd>What is the article about? Is it about an API? The DOM? Graphics? Again, these tags are important because they can filter searches.</dd> + <dt>{{anch("API identification")}}</dt> + <dd>Reference pages about an API need to identify the specific component of the API being documented (that is, what interface it's a part of, and what property or method the page covers, if applicable).</dd> + <dt>{{anch("Technology status")}}</dt> + <dd>What's the status of the technology? Is it non-standard? Obsolete or deprecated? Experimental?</dd> + <dt>{{anch("Skill level")}}</dt> + <dd>For tutorials and guides, how advanced is the material covered by the article?</dd> + <dt>{{anch("Document metadata")}}</dt> + <dd>The writing community uses tags to keep track of which pages need what kind of work.</dd> +</dl> + +<h2 id="Tag_type_guide">Tag type guide</h2> + +<p>Here's a quick guide to the types of tags and possible values for them.</p> + +<h3 id="Document_category">Document category</h3> + +<p>When you tag an article with one of these categories, you help the automated tools more accurately generate landing pages, tables of contents, and so on. Our new search system will also use these terms so that our visitors can locate reference or guide information at will.</p> + +<p>We use the following category names as standard tagging terms:</p> + +<dl> + <dt><code>{{Tag("Intro")}}</code></dt> + <dd>The article provides introductory material about a topic. Ideally each technology area should have only one "Intro"</dd> + <dt><code>{{Tag("Reference")}}</code></dt> + <dd>The article contains reference material about an API, element, attribute, property, or the like.</dd> + <dt><code>{{Tag("Landing")}}</code></dt> + <dd>The page is a landing page.</dd> + <dt><code>{{Tag("Guide")}}</code></dt> + <dd>The article is a how-to or guide page.</dd> + <dt><code>{{Tag("Example")}}</code></dt> + <dd>The article is a code sample page, or has code samples (that is, actual snippets of useful code, not one-line "syntax examples").</dd> +</dl> + +<h3 id="Topic">Topic</h3> + +<p>By identifying the article's topic area, you are helping generate better search results (and landing pages and navigation as well).</p> + +<p>While there's some room for flexibility here as we identify new topic areas, we try to limit ourselves to the names of APIs or technologies. Some useful examples:</p> + +<ul> + <li><code>{{Tag("HTML")}}</code></li> + <li><code>{{Tag("CSS")}}</code></li> + <li><code>{{Tag("JavaScript")}}</code> (notice the capital "S"!)</li> + <li><code>{{Tag("Document")}}</code></li> + <li><code>{{Tag("DOM")}}</code></li> + <li><code>{{Tag("API")}}</code> for each API's overview, interface, method, and property.</li> + <li><code>{{Tag("Method")}}</code> for each method of an API</li> + <li><code>{{Tag("Property")}}</code> for each property of an API</li> + <li><code>{{Tag("Graphics")}}</code></li> + <li><code>{{Tag("SVG")}}</code></li> + <li><code>{{Tag("WebGL")}}</code></li> + <li><code>{{Tag("Tools")}}</code></li> + <li><code>{{Tag("Web")}}</code></li> + <li><code>{{Tag("Element")}}</code></li> + <li><code>{{Tag("Extensions")}}</code> and <code>{{Tag("WebExtensions")}}</code> for WebExtension documentation.</li> +</ul> + +<p>In general, your topic identification tag should be the name of an interface with a number of related pages (like <a href="/en-US/docs/Web/API/Node">Node</a>, which has many pages for its various properties and methods), or the name of an overall technology type. You might tag a page about WebGL with <code>Graphics</code> and <code>WebGL</code>, for example, but a page about {{HTMLElement("canvas")}} with <code>HTML</code>, <code>Element</code>, <code>Canvas</code>, and <code>Graphics</code>.</p> + +<h4 id="Mozilla-specific_content">Mozilla-specific content</h4> + +<p>These tags are used in Mozilla-specific content only:</p> + +<ul> + <li><code>{{Tag("Mozilla")}}</code></li> + <li><code>{{Tag("Firefox")}}</code></li> + <li><code>{{Tag("Firefox OS")}}</code></li> + <li><code>{{Tag("Gecko")}}</code></li> + <li><code>{{Tag("XUL")}}</code></li> + <li><code>{{Tag("XPCOM")}}</code></li> +</ul> + +<h3 id="API_identification">API identification</h3> + +<p>Within the API reference, each article should identify which part of the API it covers:</p> + +<dl> + <dt><code>{{tag("Interface")}}</code></dt> + <dd>The main article for an interface should have this tag. For example, {{DOMxRef("RTCPeerConnection")}}.</dd> + <dt><code>{{tag("Constructor")}}</code></dt> + <dd>Each interface may have up to one page tagged "Constructor"; this is the interface's constructor. The page should have the same name as the interface, like {{DOMxRef("RTCPeerConnection.RTCPeerConnection()", "RTCPeerConnection()")}}.</dd> + <dt><code>{{tag("Property")}}</code></dt> + <dd>Every article describing a particular property within an interface needs this tag. See {{DOMxRef("RTCPeerConnection.connectionState")}}, for example.</dd> + <dt><code>{{tag("Method")}}</code></dt> + <dd>Each article documenting an interface method needs this tag. See {{DOMxRef("RTCPeerConnection.createOffer()")}} for example.</dd> +</dl> + +<p>In addition, the reference pages need to include interface, property, and method names among their tags. Some examples:</p> + +<dl> + <dt>The interface {{DOMxRef("RTCPeerConnection")}}</dt> + <dd>Include the tag <code>{{Tag("RTCPeerConnection")}}</code> along with the other relevant tags (<code>{{Tag("Interface")}}</code>, <code>{{Tag("WebRTC")}}</code>, <code>{{Tag("WebRTC API")}}</code>, <code>{{Tag("API")}}</code>, <code>{{Tag("Reference")}}</code>, and so forth).</dd> + <dt>The method {{DOMxRef("RTCPeerConnection.createOffer()")}}</dt> + <dd>Include the tags <code>{{Tag("RTCPeerConnection")}}</code> and <code>{{Tag("createOffer")}}</code> (note <em>no</em> parentheses in tag names!) along with the other relevant tags, including <code>{{Tag("Method")}}</code>, <code>{{Tag("WebRTC")}}</code>, <code>{{Tag("WebRTC API")}}</code>, <code>{{Tag("API")}}</code>, <code>{{Tag("Reference")}}</code>, and so forth. Consider including things like <code>{{Tag("Offer")}}</code> and <code>{{Tag("SDP")}}</code>, which are also relevant here.</dd> + <dt>The property {{DOMxRef("RTCPeerConnection.iceConnectionState")}}</dt> + <dd>Include the tags <code>{{Tag("RTCPeerConnection")}}</code> and <code>{{Tag("iceConnectionState")}}</code> along with the other relevant tags, including <code>{{Tag("Property")}}</code>, <code>{{Tag("WebRTC")}}</code>, <code>{{Tag("WebRTC API")}}</code>, <code>{{Tag("API")}}</code> and <code>{{Tag("Reference")}}</code>. Also consider including <code>{{Tag("ICE")}}</code>.</dd> +</dl> + +<h3 id="Technology_status">Technology status</h3> + +<p>To help the reader understand how viable a technology is, we use tags to label pages as to the status of the technology's specification. This isn't as detailed as actually explaining what the spec is and how far the technology has come in the specification process (that's what the Specifications table is for), but it helps the reader judge, at a glance, whether it's a good idea to use the technology described in the article.</p> + +<p>Here are possible values for these tags:</p> + +<dl> + <dt><code>{{Tag("Read-only")}}</code></dt> + <dd>Apply this tag to reference pages which describe a property or attribute which is read-only.</dd> + <dt><code>{{Tag("Non-standard")}}</code></dt> + <dd>Indicates that the technology or API described on the page is not part of a standard, whether it's stable or not in any browsers which implement it (if it's not stable, it should also be {{Tag("Experimental")}}). If you don't use this tag, your readers will assume the technology is standard. The compatibility table on the page should clarify which browser(s) support this technology or API.</dd> + <dt><code>{{Tag("Deprecated")}}</code></dt> + <dd>The technology or API covered on the page is marked as deprecated in the specification, and is likely to eventually be removed, but is generally still available in current versions of browsers.</dd> + <dt><code>{{Tag("Obsolete")}}</code></dt> + <dd>The technology or API has been deemed obsolete and has been removed (or is actively being removed) from all or most current browsers.</dd> + <dt><code>{{Tag("Experimental")}}</code></dt> + <dd>The technology is not standardized, and is an experimental technology or API that may or may not ever become part of a standard. It is also subject to change in the browser engine (typically only one) that implements it. If the technology isn't part of any specification (even in draft form), it should also have the {{tag("Non-standard")}} tag.</dd> + <dt><code>{{Tag("Needs Privileges")}}</code></dt> + <dd>The API requires privileged access to the device on which the code is running.</dd> + <dt><code>{{Tag("Certified Only")}}</code></dt> + <dd>The API only works in certified code.</dd> +</dl> + +<p>These tags are no excuse to leave out the <a href="/en-US/docs/Project:Compatibility_tables">compatibility table</a> in your article! That should always be present.</p> + +<h3 id="Skill_level">Skill level</h3> + +<p>Use the skill-level tag type only for guides and tutorials (that is, pages tagged <code>Guide</code>) to help users choose tutorials based on how familiar they are with a technology. There are three values for this:</p> + +<dl> + <dt><code>{{Tag("Beginner")}}</code></dt> + <dd>Articles designed to introduce the reader to a technology they've never used or have only a passing familiarity with.</dd> + <dt><code>{{Tag("Intermediate")}}</code></dt> + <dd>Articles for users who have gotten started with the technology but aren't experts.</dd> + <dt><code>{{Tag("Advanced")}}</code></dt> + <dd>Articles about stretching the capabilities of a technology and of the reader.</dd> +</dl> + +<h3 id="Document_metadata">Document metadata</h3> + +<p>The writing community uses tags to label articles as requiring specific types of work. Here's a list of the ones we use most:</p> + +<dl> + <dt><code>{{Tag("Draft")}}</code></dt> + <dd>The article is not complete, and is at least in theory still actively being updated (although it's also possible it's been forgotten about). Try to check with the most recent contributors before making changes, in order to avoid potential content collisions.</dd> + <dt><code>{{Tag("NeedsCompatTable")}}</code></dt> + <dd>The article needs a table to specify compatibility of a feature across browsers. <a href="/en-US/docs/MDN/Contribute/Structures/Compatibility_tables">See here</a> for a guide on contributing to browser compatibility.</dd> + <dt><code>{{Tag("NeedsContent")}}</code></dt> + <dd>The article is a stub, or is otherwise lacking information. This tag means that someone should review the content and add more details and/or finish writing the article.</dd> + <dt><code>{{Tag("NeedsExample")}}</code></dt> + <dd>The article needs one or more examples created to help illustrate the article's point. These examples should use the <a href="/en-US/docs/Project:MDN/Contributing/How_to_help/Code_samples">live sample system</a>.</dd> + <dt><code>{{Tag("NeedsLiveSamples")}}</code></dt> + <dd>The article has one or more examples that need to be updated to use the <a href="/en-US/docs/Project:MDN/Contributing/How_to_help/Code_samples">live sample system</a>.</dd> + <dt><code>{{Tag("NeedsMarkupWork")}}</code></dt> + <dd>The article needs improvement to the page markup (usually because the page content consists mostly or entirely of {{HTMLElement("p")}} tags).</dd> + <dt><code>{{Tag("NeedsSpecTable")}}</code></dt> + <dd>The article needs a table to indicate on which specification document(s) the feature was defined.</dd> + <dt><code>{{Tag("NeedsUpdate")}}</code></dt> + <dd>The content is out of date and needs to be updated.</dd> + <dt><code>{{Tag("l10n:exclude")}}</code></dt> + <dd>The content is not really worth localizing and will not appear on localization status pages.</dd> + <dt><code>{{Tag("l10n:priority")}}</code></dt> + <dd>The content is important and should be marked as a priority for MDN translators. Shows up in an extra priority table on localization status pages.</dd> +</dl> + +<h2 id="Putting_it_all_together">Putting it all together</h2> + +<p>So to each page you assign tags from several tag types, for example</p> + +<dl> + <dt>A tutorial about WebGL for beginners</dt> + <dd>{{Tag("WebGL")}}, {{Tag("Graphics")}}, {{Tag("Guide")}}, {{Tag("Beginner")}}</dd> + <dt>Reference page for {{HTMLElement("canvas")}}</dt> + <dd>{{Tag("Canvas")}}, {{Tag("HTML")}}, {{Tag("Element")}}, {{Tag("Graphics")}}, {{Tag("Reference")}}</dd> + <dt>A landing page for Firefox OS developer tools</dt> + <dd>{{Tag("Tools")}}, {{Tag("Firefox OS")}}, {{Tag("Landing")}}</dd> +</dl> + +<h2 id="Tagging_and_search_filters">Tagging and search filters</h2> + +<p>Search filters won't work properly unless we tag MDN pages properly. Here's a table of search filters and which tags they look for.</p> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> If multiple tags are listed under "Tag name," that means any one or more of these tags must be present for the article to match.</p> +</div> + +<div class="blockIndicator todo"> +<p><strong>FIXME:</strong> Filter topics have been changed since this was last updated.</p> +</div> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Filter group</th> + <th scope="col">Search filter name</th> + <th scope="col">Tag name</th> + </tr> + </thead> + <tbody> + <tr> + <th rowspan="23" scope="row" style="vertical-align: baseline;">Topic</th> + <td>APIs and DOM</td> + <td>{{Tag("API")}} || {{Tag("DOM")}} {{Deprecated_Inline}}</td> + </tr> + <tr> + <td>Add-ons & Extensions {{Deprecated_Inline}}</td> + <td>{{Tag("Add-ons")}} || {{Tag("Extensions")}} || {{Tag("Plugins")}} || {{Tag("Themes")}} || {{Tag("WebExtensions")}}</td> + </tr> + <tr> + <td>CSS</td> + <td>{{Tag("CSS")}}</td> + </tr> + <tr> + <td>Canvas</td> + <td>{{Tag("Canvas")}}</td> + </tr> + <tr> + <td>Firefox</td> + <td>{{Tag("Firefox")}}</td> + </tr> + <tr> + <td>Firefox for Android {{Obsolete_Inline}}</td> + <td>{{Tag("Firefox Mobile")}}</td> + </tr> + <tr> + <td>Firefox for Desktop {{Obsolete_Inline}}</td> + <td>{{Tag("Firefox Desktop")}}</td> + </tr> + <tr> + <td>Firefox OS</td> + <td>{{Tag("Firefox OS")}}</td> + </tr> + <tr> + <td>Games</td> + <td>{{Tag("Games")}}</td> + </tr> + <tr> + <td>HTML</td> + <td>{{Tag("HTML")}}</td> + </tr> + <tr> + <td>HTTP</td> + <td>{{Tag("HTTP")}}</td> + </tr> + <tr> + <td>JavaScript</td> + <td>{{Tag("JavaScript")}}</td> + </tr> + <tr> + <td>Marketplace {{Non-standard_Inline}}</td> + <td>{{Tag("Marketplace")}}</td> + </tr> + <tr> + <td>MathML</td> + <td>{{Tag("MathML")}}</td> + </tr> + <tr> + <td>Mobile</td> + <td>{{Tag("Mobile")}}</td> + </tr> + <tr> + <td>Open Web Apps {{Non-standard_Inline}}</td> + <td>{{Tag("Apps")}}</td> + </tr> + <tr> + <td>SVG</td> + <td>{{Tag("SVG")}}</td> + </tr> + <tr> + <td>Web Development</td> + <td>{{Tag("Web Development")}}</td> + </tr> + <tr> + <td>Web Standards</td> + <td>{{Tag("Web")}}</td> + </tr> + <tr> + <td>WebExtensions</td> + <td>{{Tag("WebExtensions")}}</td> + </tr> + <tr> + <td>WebGL</td> + <td>{{Tag("WebGL")}}</td> + </tr> + <tr> + <td>XPCOM {{Non-standard_Inline}}</td> + <td>{{Tag("XPCOM")}}</td> + </tr> + <tr> + <td>XUL {{Non-standard_Inline}}</td> + <td>{{Tag("XUL")}}</td> + </tr> + <tr> + <th rowspan="3" scope="row" style="vertical-align: baseline; white-space: nowrap;">{{anch("Skill level")}}</th> + <td>I'm an Expert</td> + <td>{{Tag("Advanced")}}</td> + </tr> + <tr> + <td>Intermediate</td> + <td>{{Tag("Intermediate")}}</td> + </tr> + <tr> + <td>I'm Learning</td> + <td>{{Tag("Beginner")}}</td> + </tr> + <tr> + <th rowspan="7" scope="row" style="vertical-align: baseline; white-space: nowrap;">Document type</th> + <td>Docs</td> + <td><em>This restricts the search to docs content, leaving out Hacks and other MDN content.</em></td> + </tr> + <tr> + <td>Demos</td> + <td><em>This includes Demo Studio content in the search results.</em></td> + </tr> + <tr> + <td>Tools</td> + <td>{{Tag("Tools")}}</td> + </tr> + <tr> + <td>Code Samples</td> + <td>{{Tag("Example")}}</td> + </tr> + <tr> + <td>How-To & Tutorial</td> + <td>{{Tag("Guide")}}</td> + </tr> + <tr> + <td>Developer Profiles</td> + <td><em>This includes developer profiles from the MDN site in the search results.</em></td> + </tr> + <tr> + <td>External Resources</td> + <td><em>The dev team is still figuring this out...</em></td> + </tr> + </tbody> +</table> + +<h2 id="Tagging_problems_you_can_fix">Tagging problems you can fix</h2> + +<p>There are several kinds of tag problems you can help fix:</p> + +<dl> + <dt>No tags</dt> + <dd>Generally articles should have at <em>least</em> a "{{anch("Document category", "category")}}" tag and a "{{anch("Topic", "topic")}}" tag. Usually other tags are appropriate as well, but if you can help us ensure that the minimum tags are present, you'll be a documentation hero!</dd> + <dt>Tags that don't follow our tagging standards</dt> + <dd>Please fix any documents whose tags don't follow the standards on this page.<br> + Note that you may occasionally see some localized tags (such as <code>Référence</code>) showing up on some English pages. This was due to a <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=776048">bug in Kuma</a>, which caused the tags to reappear even if they were deleted. That bug has <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=776048#c37">since been fixed</a>, so any remaining localized tags can be cleaned up if they're spotted.</dd> + <dt>Incorrect tags</dt> + <dd>If you're looking at an article about HTML and it's tagged "JavaScript", that's probably wrong! Likewise, if an article discusses Mozilla internals but has a "Web" tag, that's probably wrong too. Remove these tags and add the right tags if they aren't already there. Please also correct misspelled tags (e.g., "Javascript" will still match, since tags are case-insensitive, but let's not be sloppy!).</dd> + <dt>Missing tags</dt> + <dd>If an article has some but not all of the tags it needs, feel free to add more. For example, if a page in JavaScript reference is (correctly) tagged "JavaScript" but nothing else, you're invited to tag the page "Reference" or {{anch("Document category", "another category tag")}} as well!</dd> + <dt>Tag spam</dt> + <dd>This insidious beast is the most revolting tag problem of all: some Web vermin has deposited its droppings in the page tags (like "Free warez!" or "Hey I was browsing your site and wanted to ask you if you could help me solve this problem I'm having with Flash crashing all the time"). We've got to delete these right away! They're ugly, they're hard to manage if they're allowed to linger too long, and they're terrible for {{Glossary("SEO")}}.</dd> +</dl> + +<p>If you see one (or more) of these problems, please <a href="/en-US/docs/Project:MDN/Contributing/Getting_started#Logging_into_MDN">log into MDN</a> and click EDIT at the top right of the MDN window. Once the editor loads up, scroll down to the bottom of the page, where you'll see the tag box. For more details on the tagging interface, see "<a href="/en-US/docs/Project:MDN/Contributing/Editor_guide#The_tags_box">The tags box</a>" in the <a href="/en-US/docs/Project:MDN/Contributing/Editor_guide">MDN editor guide</a>.</p> diff --git a/files/ar/mdn/contribute/howto/write_a_new_entry_in_the_glossary/index.html b/files/ar/mdn/contribute/howto/write_a_new_entry_in_the_glossary/index.html new file mode 100644 index 0000000000..c97cbc3136 --- /dev/null +++ b/files/ar/mdn/contribute/howto/write_a_new_entry_in_the_glossary/index.html @@ -0,0 +1,138 @@ +--- +title: كيفية الكتابة والرجوع إلى التدوين في قاموس المصطلحات +slug: MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary +translation_of: MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary +--- +<div>{{MDNSidebar}}</div> + +<div>{{IncludeSubnav("/en-US/docs/MDN")}}</div> + +<p><span class="seoSummary">In this article, we cover how to add and link to entries in the <a href="/en-US/docs/Glossary">MDN Web Docs glossary</a>. We also provide guidelines about glossary entry layout and content.</span> The glossary provides definitions for all of the terms, jargon, abbreviations, and acronyms you'll come across when reading about the web and about web development.</p> + +<p class="simple-translate-result" style="color: rgb(0, 0, 0);">المسرد ليس كاملاً ، وربما لن يكتمل. الويب يتغير دائمًا وينمو دائمًا. يمكنك مساعدتنا في الحفاظ على تحديث المسرد ، وملء أي فجوات ، من خلال المساهمة في إدخالات جديدة في المسرد (أو حتى عن طريق إصلاح المشكلات التي تحددها في الإدخالات الحالية).</p> + +<p class="simple-translate-result" style="color: rgb(0, 0, 0);">المساهمة في المسرد هي طريقة سهلة للمساعدة في جعل شبكة الإنترنت أسهل للجميع لفهمها. لا تحتاج إلى مستوى عالٍ من المهارة الفنية للقيام بذلك ، أيضًا ، لأن مقالات المسرد تهدف إلى أن تكون واضحة وموجزة.</p> + +<h2 id="كيف_تكتب_في_قاموس">كيف تكتب في قاموس</h2> + +<p>If you're looking for topics that need a glossary entry, check the <a href="/en-US/docs/Glossary#Contribute_to_the_glossary">list of undocumented terms</a> at the end of the <a href="/en-US/docs/Glossary">Glossary landing page</a>; click any of those links to start a new Glossary page for the item you clicked; then follow the steps below.</p> + +<p class="simple-translate-result" style="color: rgb(0, 0, 0);">إذا كانت لديك فكرة عن إدخال مسرد مصطلحات جديد ، فما عليك سوى فتح الزر التالي في علامة تبويب جديدة ، ثم اتبع الخطوات الموجودة أسفل الزر:</p> + + + +<div class="align-center"><a class="button ignore-external mega positive" href="/en-US/docs/new?parent=4391">Write a new entry in the glossary</a> + +<div></div> +</div> + + + +<h3 id="Step_1_Select_a_term_to_explain">Step 1: Select a term to explain</h3> + +<p>The first thing to do is to choose a term to write about. If you don't know which terms are in need of definitions, you can <a href="https://developer.mozilla.org/en-US/docs/Glossary#Contribute_to_the_glossary">check out our list of suggestions</a>. Just click one and get started writing! If you're logged in already, you'll wind up in the MDN editor.</p> + +<h3 id="Step_2_Write_a_summary">Step 2: Write a summary</h3> + +<p>The first paragraph of any glossary page is a simple and short description of the term (preferably no more than two sentences). Make sure anyone reading the description can understand the defined term immediately.</p> + +<div class="note"> +<p class="simple-translate-result" dir="rtl" style="color: rgb(0, 0, 0);"> <strong>ملاحظة:</strong> يرجى عدم نسخ تعريفات ولصقها من أي مكان آخر (لا سيما ويكيبيديا ، لأن مجموعة إصدارات الترخيص الخاصة بها أصغر ، وبالتالي فهي غير متوافقة مع نسخة MDN). من المهم حقًا التأكد من أن هذا المحتوى بسيط وسهل الفهم. الأمر يستحق قضاء بعض الوقت على ذلك بدلاً من سرقة المحتوى بشكل أعمى. يجب أن يكون هذا المسرد محتوى جديدًا مفيدًا ، وليس تكرار الأشياء من مكان آخر.</p> +</div> + +<h4 id="Writing_a_good_glossary_entry">Writing a good glossary entry</h4> + +<p>If you must, you can add a few extra paragraphs, but it's very easy to find yourself writing a whole article. Writing a whole article is fine, but please don't put it in the glossary. If you aren't sure where to put your article, feel free to <a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">reach out to discuss it</a>.</p> + +<p>A few simple guidelines to consider while writing a glossary entry that may help you create a better one:</p> + +<ul> + <li>When you use terms in the glossary's description of the term or abbreviation, you should create appropriate links for them. Often, this will just involve creating links to other pages in the glossary (see <a href="/en-US/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary#How_to_use_the_Glossary_macro">How to use the Glossary macro</a> below). For terms directly related to the term being described by the glossary, it may be more useful to link to MDN Web Docs' main body article on the topic.</li> + <li>Try to use appropriate related terms (with links) within your article if it can be done without making the article hard to follow. Having a good web of related, useful inks can make a page or set of pages much easier to use.</li> + <li>Think about what you would type into a search engine if you wanted to find this page. Try to use all the words you'd search on in the article, without making the article nonsensical, overly long, or difficult to read.</li> +</ul> + +<h4 id="Specifying_the_tooltip">Specifying the tooltip</h4> + +<p>As is the case with most MDN links, hovering the mouse cursor over a gossary link will show a brief description of the page (in this case, a short summary of the term's definition). By default, the tooltip is the entire first paragraph of the article, but this is often too long.</p> + +<p>You can specify a subsection of text that will be used as the page summary (and therefore the tooltip text) by selecting a sentence or two that best summarize the definition of the term, then adding the "SEO Summary" style to them. This not only establishes the tooltip text, but also specifies the text that will be sent to Google and other search engines when they ask for a brief summary describing the page contents. For that reason, specifically selecting a page summary is also valuable for helping your new page get found more easily.</p> + +<div class="note"> +<p class="simple-translate-result" dir="rtl" style="color: rgb(0, 0, 0);"><strong>ملاحظة:</strong> من الناحية المثالية ، يجب أن يتراوح الملخص بين 150 و 160 حرفًا ؛ أقل ما يرام ، وأكثر ليست جيدة ولكن لن كسر أي شيء ، احد الامرين.</p> +</div> + +<h3 id="Step_3_Expand_with_links">Step 3: Expand with links</h3> + +<p>Finally, a glossary entry should always end with a "Learn more" section. This section should contain links to help the reader move forward: discovering more details, learning to use the relevant technology, and so on.</p> + +<p>We recommend that you sort the links into at least these three groups:</p> + +<dl> + <dt>General knowledge</dt> + <dd>Links that provide more general information; for example, such as a link to a relevant page on <a href="http://wikipedia.org/">Wikipedia</a>.</dd> + <dt>Technical reference</dt> + <dd>Links to more in-depth technical information, on MDN Web Docs or elsewhere.</dd> + <dt>Learn about it</dt> + <dd>Links to tutorials, exercises, examples, or any other materials that help the reader learn to use the technology behind the defined term.</dd> +</dl> + +<h2 id="التعامل_مع_الغموض">التعامل مع الغموض</h2> + +<p>Sometimes, a term has several meanings depending on the context. To resolve the ambiguities, you must follow those guidelines:</p> + +<ul> + <li>The term's main page must be a disambiguation page containing the {{TemplateLink("GlossaryDisambiguation")}} macro.</li> + <li>The term has subpages that define the term for a given context.</li> +</ul> + +<p>Let's illustrate that with an example. The term <em>signature</em> can have different meanings in at least three different contexts: <em>security</em>, <em>function</em> and <em>email</em>.</p> + +<ol> + <li>The page <a href="/en-US/docs/Glossary/Signature">Glossary/Signature</a> is the disambiguation page with the {{TemplateLink("GlossaryDisambiguation")}} macro.</li> + <li>The page <a href="/en-US/docs/Glossary/Signature/Security">Glossary/Signature/Security</a> is the page defining a signature in a security context.</li> + <li>The page <a href="/en-US/docs/Glossary/Signature/Function">Glossary/Signature/Function</a> is the page defining a function signature.</li> + <li>The page <a href="/en-US/docs/Glossary/Signature/Email">Glossary/Signature/Email</a> is the page defining email signature.</li> +</ol> + +<h2 id="How_to_use_the_Glossary_macro">How to use the \{{Glossary}} macro</h2> + +<p>The glossary is much more useful when people can access the definitions from another document without navigating away from what they're reading. Therefore we urge you to link to the glossary whenever you can, using the {{TemplateLink("Glossary")}} macro:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Macro</th> + <th scope="col">Result</th> + <th scope="col">Note</th> + </tr> + </thead> + <tbody> + <tr> + <td>\{{Glossary("browser")}}</td> + <td>{{Glossary("browser")}}</td> + <td>When a text matches the term to be defined, just use the macro as is (it's case insensitive)</td> + </tr> + <tr> + <td>\{{Glossary("browser", "Web browser")}}</td> + <td>{{Glossary("browser","Web browser")}}</td> + <td>To display an alternative text, use the second argument to specify that text</td> + </tr> + <tr> + <td>\{{Glossary("browser", "Web browser", 1)}}</td> + <td>{{Glossary("browser","Web browser",1)}}</td> + <td>Specify <code>1</code> as an optional third argument to display the link as a regular link rather than a subtle hint</td> + </tr> + </tbody> +</table> + +<p>Links created with the \{{Glossary}} macro always display a tooltip containing the glossary entry's summary paragraph or the "SEO summary" if one has been selected as described in <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary#Specifying_the_tooltip">Specifying the tooltip above</a>.</p> + +<h3 id="Using_the_macro_wisely">Using the macro wisely</h3> + +<p>In many cases, it's perfectly safe to use the Glossary macro anywhere on MDN. There are a couple of guidelines to consider, though:</p> + +<ul> + <li>If a term already has a link to an appropriate page somewhere else on MDN, don't replace the link with a glossary link.</li> + <li>Within an article section, use the \{{Glossary}} macro only once for the same term (<em>hint: a section always starts with a title</em>).</li> +</ul> diff --git a/files/ar/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html b/files/ar/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html new file mode 100644 index 0000000000..1c993c9677 --- /dev/null +++ b/files/ar/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html @@ -0,0 +1,111 @@ +--- +title: كيفية كتابة مقال لمساعدة الناس على التعرف على شبكة الإنترنت +slug: MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web +translation_of: MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web +--- +<div>{{MDNSidebar}}</div> + +<p class="simple-translate-result" dir="rtl" style="color: rgb(0, 0, 0);"><a href="/ar/docs/Learn">منطقة التعلم MDN</a> هي موطننا للمقالات التي تقدم مفاهيم الويب للمطورين الجدد. نظرًا لأن محتواها يستهدف المبتدئين في الغالب ، فهو مكان رائع لمشاركة معرفتك ومساعدة القادمين الجدد على التعرف على الويب. من المهم التأكد من أن المطورين الجدد يمكنهم متابعة هذا المحتوى ، لذلك نولي اهتمامًا خاصًا به.</p> + +<p class="simple-translate-result" dir="rtl" style="color: rgb(0, 0, 0);"><span class="seoSummary">يشرح هذا المقال كيفية كتابة صفحات لل<a href="/ar/docs/Learn">منطقة التعليمية</a>.</span></p> + +<h2 id="How_to_write_a_Learning_Area_article">How to write a Learning Area article</h2> + +<p>To start contributing your knowledge, simply click the big green button, then follow the five steps below. If you're looking for ideas, please take a look at the <a href="https://trello.com/b/LDggrYSV">our team Trello board</a>!</p> + + + +<div class="align-center"><a class="button ignore-external mega positive" href="/en-US/docs/new?parent=111819">Write a new learning article</a> + +<div></div> +</div> + + + +<p>This article might not end up in exactly the right place, but at least it's on MDN. If you need to talk to someone about getting it moved to the right place, please <a href="/en-US/docs/Learn#Contact_us">Contact us</a>.</p> + +<h3 id="Step_1_Write_a_two-liner">Step 1: Write a two-liner</h3> + +<p>Your article's first sentence needs to summarize what subject you're going to cover, and the second one should go into a few more specifics of the items that you'll put in the article. For example:</p> + +<div class="summary"> +<p>Whereas {{glossary("HTML")}} files contain structured content, {{Glossary("CSS")}}, another major Web technology, makes the content look the way you want. In this article we are going to cover how this technology works, and how to write your own basic example.</p> +</div> + +<p>Note how the example briefly explains that CSS is a core Web technology used to style pages. That's enough for the reader to get a pretty good idea what the article covers.</p> + +<p>Because Learning Area articles primarily target beginners, each article should cover one straightforward topic so as not to overwhelm the reader with too much new information. If you can't summarize the article in one sentence, you might be trying to do too much in one article!</p> + +<h3 id="Step_2_Add_a_top_box">Step 2: Add a top box</h3> + +<p>Add a<strong> top box</strong> to help readers understand where they are in the learning process. Here's an example of a top box from <a href="/en-US/docs/Learn/Understanding_URLs">"Understanding URLs and their structure"</a>. You can use this article as an model when writing your own.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisites:</th> + <td>You need to first know <a class="new" href="https://developer.mozilla.org/en-US/docs/Learn/How_the_Internet_works">how the Internet works</a>, <a class="new" href="https://developer.mozilla.org/en-US/docs/Learn/What_is_a_Web_server">what a Web server is</a>, and <a class="new" href="https://developer.mozilla.org/en-US/docs/Learn/Understanding_links_on_the_web">the concepts behind links on the web</a>.</td> + </tr> + <tr> + <th scope="row">Objective:</th> + <td>You will learn what a URL is and how it works on the Web.</td> + </tr> + </tbody> +</table> + +<dl> + <dt>Prerequisites</dt> + <dd>What must the reader already know to follow the article? When possible, make each prerequisite a link to another Learning Area article covering the concept (unless it's a really basic article that doesn't require prior knowledge).</dd> + <dt>Objectives</dt> + <dd>This section briefly states what the reader will learn over the course of the article. This is a bit different than the one-liner; the one-liner summarizes the topic of the article, while the objectives section specifically lays out what the reader can expect to accomplish over the course of the article.</dd> +</dl> + +<div class="note"> +<p><strong>Note:</strong> To create this table, you can either copy and paste the example table above, or use MDN's editor's <a href="/en-US/docs/MDN/Contribute/Editor/Tables">table tool</a>. If you choose to use the table tool, you need to specifically add the <code>learn-box</code> CSS class in addition to the default <code>standard-table</code> class. To do this, when you create or edit the table's properties, go to the "Advanced" panel and set the <strong>Stylesheet Classes</strong> field to "<code>standard-table learn-box</code>".</p> +</div> + +<h3 id="Step_3_Write_a_full_description">Step 3: Write a full description</h3> + +<p>Next, write a longer description that provides a more thorough overview of the article highlighting the most important concepts. Don't forget to explain why the reader should take the time to learn this topic and read your article!</p> + +<h3 id="Step_4_Dig_deeper">Step 4: Dig deeper</h3> + +<p>When you're done with all that, you can finally dive deeply into the topic. You can structure this part of your article however you like (although feel free to consult our <a href="/en-US/docs/MDN/Contribute/Style_guide">style guide</a>). This is your chance to shine! Go into detail explaining the topic you're writing about. Provide links to the full reference documentation, explain how the technology works in detail, provide syntax and usage details, and so forth. It's up to you!</p> + +<p>As a guide, here are some writing tips for beginners:</p> + +<ul> + <li>Focus on a single topic. If you feel like you need to cover other topics, it means either you're missing a prerequisite article, or you need to break up your article into more than one.</li> + <li>Use simple English. Avoid technical terms when you can, or at least define them and <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary#How_to_use_the_.7B.7BGlossary.7D.7D_macro">link to their glossary entries</a> where applicable.</li> + <li>Include straightforward examples to make the theoretical concepts easier to grasp. Many people learn best by example. Rather than writing academic papers, we want beginners to follow the text readily.</li> + <li>Visual aids often can make things easier to digest and carry extra information, so feel free to use images, diagrams, videos, and tables. If you're using diagrams or charts that include text, we encourage you to use {{Glossary("SVG")}} so our translation teams can localize the text.</li> +</ul> + +<p>Have a look at the first few sections of our <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Functions — reusable blocks of code</a> article for some good descriptive sections.</p> + +<h3 id="Step_5_Provide_active_learning_material">Step 5: Provide "active learning" material</h3> + +<p>To illustrate the article and help the reader better understand what they're learning, be sure to provide exercises, tutorials, and tasks to accomplish. By having them actively and practically using and experimenting with the concepts your article explains, you can help "lock" the information into their brains.</p> + +<p>You can choose to include the examples directly in the page as <a href="/en-US/docs/MDN/Contribute/Structures/Live_samples">live samples</a> or <a href="/en-US/docs/MDN/Contribute/Editor/Links">link to them</a> if they don't really work as a live sample. If you're interested in helping create these valuable materials, please read the article <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">Create an interactive exercise to help learning the Web</a>.</p> + +<p>If you can't provide links to existing active learning materials (you don't know of any or don't have time to create them), you should add the tag {{Tag("NeedsActiveLearning")}} to the article. That way other contributors can find articles that need active learning materials and help you come up with them.</p> + +<p>Have a look at <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Simple_selectors#Active_learning_Selecting_different_elements">Active learning: selecting different elements</a> for a live interactive learning exercise, or <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Active_learning_Playing_with_scope">Active learning: Playing with scope</a> for a different style of exercise that calls upon them to download a template locally and modify it following the provided steps.</p> + +<h3 id="Step_6_Get_the_article_reviewed_and_put_into_the_Learning_Area_navigation_menu">Step 6: Get the article reviewed, and put into the Learning Area navigation menu</h3> + +<p>After you've written your article, let us know so we can have a look at it, do a review, and suggest improvements. Again, see our <a href="/en-US/docs/Learn#Contact_us">Contact us</a> section for the best ways to get in touch.</p> + +<p>The last step is adding your article to the Learning Area main navigation menu. This menu is generated by the <a href="/en-US/docs/Template:LearnSidebar">LearnSidebar macro</a>, and requires special editing privileges, so talk to one of our team about your contribution.</p> + +<p>For now, add the menu to your page by adding the macro call \{{LearnSidebar}} into a paragraph at the top of your page.</p> + +<ul> +</ul> + +<h2 id="Suggested_articles">Suggested articles</h2> + +<p>So you want to contribute but you're not sure what to write about?</p> + +<p>The Learning Area team maintains <a href="https://trello.com/b/LDggrYSV">a Trello board with ideas of articles</a> to write. Feel free to pick one and get to work!</p> diff --git a/files/ar/mdn/contribute/howto/إنشاء_حساب_على_شبكة_مطوري_موزيلا/index.html b/files/ar/mdn/contribute/howto/إنشاء_حساب_على_شبكة_مطوري_موزيلا/index.html new file mode 100644 index 0000000000..5a0a255b5d --- /dev/null +++ b/files/ar/mdn/contribute/howto/إنشاء_حساب_على_شبكة_مطوري_موزيلا/index.html @@ -0,0 +1,43 @@ +--- +title: كيف تنشئ حساباً على شبكة MDN +slug: MDN/Contribute/Howto/إنشاء_حساب_على_شبكة_مطوري_موزيلا +tags: + - MDN Account + - إنشاء حساب MDN + - حساب MDN +translation_of: MDN/Contribute/Howto/Create_an_MDN_account +--- +<div>{{MDNSidebar}}</div> + +<p dir="rtl"><span class="seoSummary">عليك امتلاك ملف شخصي حتى تتمكن من التعديل على محتوى الشبكة، ولكنك لا تحتاج لإنشاء حساب إن كنت تريد القراءة والبحث في التوثيقات التي نتيحها. سيساعدك هذا الدليل على إعداد ملفك الشخصي في الشبكة.</span></p> + +<div class="pull-aside"> +<div class="moreinfo"> +<p dir="rtl"><strong>لما تحتاج الشبكة لعنوان البريد الإلكتروني؟</strong></p> + +<p dir="rtl">يُستخدم بريدك الإلكتروني لاسترجاع الحساب إذا لزم الأمر، كما يُستخدم من قبل مدراء الشبكة ليتمكنوا من التواصل معك حول حسابك ونشاطك على الشبكة.<br> + بالإضافة لذلك، يمكنك الاشتراك بالإشعارات (على سبيل المثال، يمكنك تلقي إشعار <a href="/ar/docs/MDN/Contribute/Howto/Watch_a_page">عندما يتم تعديل صفحة معينة</a>) والرسائل (على سبيل المثال، إن قمت بالإنضمام إلى فريق التجربة، فقد تتلقى رسائل إلكترونية حول الميزات الجديدة التي تحتاج للاختبار)<br> + لن يظهر بريدك الإلكتروني أبداً في الشبكة وسيتم استخدامه فقط وفقاً <a href="https://www.mozilla.org/privacy/websites/">لسياسة الخصوصية</a>.</p> + +<div class="note" dir="rtl">إذا قمت بتسجيل الدخول بالشبكة باستخدام GitHub و استخدمت "عدم الرد (noreply)" على بريد الغيت هاب، <em>فلن</em> تتلقى رسائل (بما فيها الإشعارات عندما تشترك بصفحة) من الشبكة.</div> +</div> +</div> + +<ol dir="rtl"> + <li>في أعلى كل صفحة ستجد زر <strong>تسجيل الدخول</strong>. اضغط على هذا الزر لعرض قائمة الخدمات التي ندعمها للمصادقة وتسجيل الدخول في الشبكة.</li> + <li>اختر إحدى تلك الخدمات. حالياً، غيت هاب هو الخيار الوحيد. لاحظ أنك إذا اخترت غيت هاب سيتم إضافة رابط لملفك الشخصي على الموقع في الشبكة.</li> + <li>اتبع الطلبات التي سيخبرك بها غيت هاب لتربط ملفك الشخصي بالشبكة.</li> + <li>حالما تعيدك خدمة المصادقة إلى الشبكة (والتي هي غيت هاب - إذا أخترتها -)، ستتمكن من إدخال اسم المستخدم وكلمة المرور، <em>سيتم عرض اسم المستخدم خاصتك للعموم لشكرك على العمل الذي قمت به. فلا تستخدم البريد الإلكتروني كاسم مستخدم.</em></li> + <li>اضغط على <strong>إنشاء ملف شخصي خاص بي على الشبكة</strong> (أو ما يقابله بالمعنى).</li> + <li>إذا كان البريد الإلكتروني الذي حددته في الخطوة الرابعة ليس هو نفسه الذي استخدمته مع خدمة المصادقة، فيرجى التحقق من بريدك الإلكتروني والضغط على رابط التأكيد المُرسل إليك.</li> +</ol> + +<p dir="rtl">هذا كل شيء! والآن أصبح لديك حساب على الشبكة، ويمكنك القيام بتعديلات مباشرةً!</p> + +<p dir="rtl">يمكنك الضغط على اسمك في الشريط العلوي لرؤية ملفك الشخصي. من هناك، يمكنك الضغط على زر<strong>تحرير</strong> (أو ما يقابله بالمعنى) للقيام بتغييرات على ملفك الشخصي.</p> + +<div class="note"> +<p dir="rtl">اسماء المستخدمين الجدد لا يمكن أن يحتوا على مسافات أو المحرف "@". تذكر أن اسم المستخدم الخاص بك سيظهر للعموم ليحدد الأعمال التي قمت بها.</p> +</div> + +<div id="eJOY__extension_root"> </div> diff --git a/files/ar/mdn/contribute/howto/كيفية_إنشاء_وتحرير_الصفحات/index.html b/files/ar/mdn/contribute/howto/كيفية_إنشاء_وتحرير_الصفحات/index.html new file mode 100644 index 0000000000..c4ab1b2bcf --- /dev/null +++ b/files/ar/mdn/contribute/howto/كيفية_إنشاء_وتحرير_الصفحات/index.html @@ -0,0 +1,179 @@ +--- +title: كيفية إنشاء وتحرير الصفحات +slug: MDN/Contribute/Howto/كيفية_إنشاء_وتحرير_الصفحات +translation_of: MDN/Contribute/Howto/Create_and_edit_pages +--- +<div>{{MDNSidebar}}</div> + +<p><span class="seoSummary">This article introduces new contributors to the process of editing existing pages and creating new ones.</span></p> + +<h2 id="Editing_an_existing_page">Editing an existing page</h2> + +<p>To edit a page:</p> + +<ol> + <li>Click the <strong>Edit</strong> button near the top right corner of the page.</li> + <li>The page then reloads, with an editing interface where you can add or delete information directly.</li> + <li>Add paragraphs, delete text, insert headings, and perform more of the basic functions involved in writing and editing.</li> +</ol> + +<p>See the guide to <a href="/en-US/docs/MDN/Contribute/Editor/Basics">Editor UI elements</a> in the <a href="/en-US/docs/MDN/Contribute/Editor">MDN Editor guide</a> for more information on using <strong>MDN</strong>'s built-in editor.</p> + +<h3 id="Preview_changes">Preview changes</h3> + +<p>To see what your changes look like:</p> + +<ul> + <li>Click the <strong>Preview</strong> button, within the editing function at the top or bottom of the page.</li> + <li>This opens the preview page, showing your revisions in a new window, or tab.</li> + <li>Each time you click this button, it refreshes your preview page with the latest changes.</li> +</ul> + +<p>Be careful! Previewing a page <strong>does not</strong> save your progress. Don't close the editing tab until you've saved your work.</p> + +<h3 id="Revision_comment">Revision comment</h3> + +<p>After previewing your changes, you will want to <em>save your revision</em>. Before you <strong>save</strong>, look for the revision comment box, below the editing box, leaving a comment to inform other contributors why you made changes. For example, you might have added a new section, changed some words to make the terminology more consistent, rewritten a paragraph to clarify the language, or removed information because it was redundant.</p> + +<h3 id="Table_of_Contents">Table of Contents</h3> + +<p>The 'In this Article' section of an article, is an auto-generated list of links to the headings on the page. The wording of these can be edited via the headings. It's also possible to remove a table of contents, or decrease its number of links, by selecting 'Edit Page Title and Properties', changing the value of the "TOC" drop down.</p> + +<h3 id="Tags">Tags</h3> + +<p>You can add or remove tags, which describe the page content and purpose, below the editing section. See <a href="/en-US/docs/MDN/Contribute/Tagging">How to properly tag pages</a>, for information on which tags to apply.</p> + +<h3 id="Review_needed">Review needed?</h3> + +<p>If an expert, or experienced contributor should review your edits, please request a technical review (for code, API's, or technologies), and/or an editorial review (for prose, grammar, and content), making sure the appropriate box is checked before you save.</p> + +<h3 id="Attach_files">Attach files</h3> + +<p>If you wish to <strong>attach a file</strong><em> </em>to an existing page, or to add an illustration for further clarification, this can be added to the bottom of the page. When uploading an image, please be sure to use an image optimization tool to make the file as small to download as possible. This improves page load time and helps MDN's performance overall. You may use your preferred tool, if you have one. Otherwise, we suggest <a href="https://tinypng.com/">TinyPNG</a>, a handy Web tool.</p> + +<h3 id="Publish_Discard_or_Keep_editing">Publish, Discard, or Keep editing</h3> + +<p>When you finish editing, and are happy with your preview, publish<strong> </strong>your work and comments by clicking the<em> green</em> <strong>Publish</strong> button, to the right of the page title, or towards the bottom of the page. If you wish to continue working, click <strong>Publish and keep editing</strong>, which publishes your changes and keeps the edit interface open. </p> + +<p>If you change your mind, you can discard edits, by clicking the<em> red</em><strong> Discard</strong> button. Note that discarding changes <em>permanently</em> discards them.</p> + +<p>Pressing <strong>Enter </strong>in the Revision Comment field is equivalent to clicking <strong>Publish and Keep Editing</strong>.</p> + +<div class="note"> +<p>Note: If attempting to save, but changes are rejected as invalid, and you feel the content is appropriate for MDN, <a href="mailto:mdn-admins@mozilla.com?subject=MDN%3A%20Content%20Rejection%20Appeal&body=%3CDescribe%20the%20content%20you%20were%20trying%20to%20save%20and%20where%20you%20were%20trying%20to%20place%20it.%3E">email the MDN admin team</a> for assistance.</p> +</div> + +<h2 id="Getting_page-creation_permissions">Getting page-creation permissions</h2> + +<p>For security reasons, newly-created accounts don't have the ability to create new pages. If you try to do so, you'll see a page instructing you how to get the page created. There are two options:</p> + +<ul> + <li><strong>Ask for the page to be created for you.</strong> To do this, <a href="https://bugzilla.mozilla.org/enter_bug.cgi?bug_file_loc=http%3A%2F%2F&bug_ignored=0&bug_severity=normal&bug_status=NEW&cf_fx_iteration=---&cf_fx_points=---&contenttypemethod=autodetect&contenttypeselection=text%2Fplain&flag_type-4=X&flag_type-607=X&flag_type-800=X&flag_type-803=X&form_name=enter_bug&maketemplate=Remember%20values%20as%20bookmarkable%20template&op_sys=Unspecified&priority=--&product=Developer%20Documentation&rep_platform=Unspecified&short_desc=Create%20page%3A%20&status_whiteboard=create-page&target_milestone=---&version=unspecified">file a documentation request bug</a>, with the subject "Create page: <page title>". Fill out the URL field with the location on MDN where you'd like the page to go, if you know where to place it. In the comment text, include information on why this page needs creating.</li> + <li><strong>Request page creation privileges.</strong> If you request page creation privileges, and they're granted to you, you'll be able to add new pages by following the instructions here. To request these privileges, <a href="mailto:mdn-admins@mozilla.org">email the MDN admin</a> team with your request. Include your username, why you would like to have the ability to create new pages. For instance, you're documenting a new API which involves many new pages, or you'd like to add new terms to the glossary. You should also have made useful contributions to this site's content, and been a contributor for some time. This length of time, and the other factors, are collectively considered.</li> +</ul> + +<h2 id="Creating_a_new_page">Creating a new page</h2> + +<p>Once you have page-creation permission, you can begin creating pages.</p> + +<p>If you do not know where to place a new article, <strong>do not worry.</strong> Put it anywhere, we will find it, move to where it belongs, or merge it into existing content. Whatever makes the most sense. Do not worry about making it perfect. We have happy helper gnomes who help making your content clean and rather luscious.</p> + +<p>There are a few ways to create a new page:</p> + +<ul> + <li><a href="#Missing_page_link">'Missing page' link.</a></li> + <li><a href="#New_page_without_link">New page without link.</a></li> + <li><a href="#Subpage_of_an_existing_page">Subpage of an existing page.</a></li> + <li><a href="#Clone_of_an_existing_page">Clone of an existing page.</a></li> + <li><a href="#Link_from_an_existing_page">Link from an existing page.</a></li> +</ul> + +<dl> +</dl> + +<h3 id="'Missing_page'_link">'Missing page' link</h3> + +<p>As with most wikis, it is possible to create a link to a page that is yet to exist. For example, an author might create a list of all the members of an API, before creating the pages for those members. On MDN, links to non-existent pages are typically displayed in red.</p> + +<p>To create a page from a 'missing page' link:</p> + +<ol> + <li>Log into MDN, and have page-creation permission. If not logged in, clicking a 'missing page' link results in a 404 (page not found) error.</li> + <li>Click the 'missing page' link. If you have page creation permission, the <a href="/en-US/docs/MDN/Contribute/Editor">MDN Editor UI</a> opens, ready for you to create the missing page.</li> + <li>Write the content of the page, and save it.</li> +</ol> + +<h3 id="New_page_without_link">New page without link</h3> + +<p><em>To create a new page without linking from another page</em>, enter a unique page name in the URL field of your browser. For example, if you enter:</p> + +<pre class="language-html">https://developer.mozilla.org/en-US/docs/FooBar</pre> + +<p>MDN creates a new page, with the title "FooBar", opening the editor for you to add new content. Refer to the <a href="#Editing_an_existing_page">Editing an existing page</a> section of this article, for information on how to use the editor mode.</p> + +<p><em>To create a new page without linking from another page</em>:</p> + +<ol> + <li>Log in, and have page-creation permission.</li> + <li>Enter the following in the URL field of your browser:</li> +</ol> + +<pre class="language-html">https://developer.mozilla.org/en-US/docs/new</pre> + +<p>MDN creates a new page, with a place for a title, opening the editor to add new content to this page. Refer to <a href="#Editing_an_existing_page">Editing an existing page</a>, for information on using editor mode.</p> + +<h3 id="Subpage_of_an_existing_page">Subpage of an existing page</h3> + +<p>To create a page you want to be below an existing page, in the page hierarchy:</p> + +<ol> + <li>On the 'parent' page, click the <strong>Advanced</strong> menu (the gear icon in the toolbar), then click <strong>New sub-page</strong>.</li> + <li>An editor view opens for creating a new document.</li> + <li>Add a title for this document, in the <strong>Title</strong> field.</li> + <li>Change the <strong>Slug</strong> field, if needed. For example, if the title is long, and a shorter URL seems appropriate. This field is automatically filled by the editor, substituting underscores for spaces found in the title, changing only the last part of the URL.</li> + <li>In the <strong>TOC</strong> field, select heading levels you want to be displayed in the table of contents for the page. Or select 'No table of contents', if one is not needed.</li> + <li>Write content of the page in the editor pane, saving your changes. Refer to <a href="#Editing_an_existing_page">Editing an existing page</a>, for further information on using editor mode.</li> +</ol> + +<h3 id="Clone_of_an_existing_page">Clone of an existing page</h3> + +<p>If there is an existing page, whose format you wish to use as a base for your new page, you can 'clone' that page, and then change its content.</p> + +<ol> + <li>On the original page, click the <strong>Advanced</strong> menu (the gear icon in the toolbar), and click <strong>Clone this page</strong>. An editor view opens, for creating a new document.</li> + <li>Change the <strong>Title</strong> of the page, as appropriate for the new content. The <strong>Slug</strong> field is updated automatically as you change the <strong>Title</strong> field.</li> + <li>Change the path portion of the <strong>Slug</strong> field, as needed, to put the new document in a different location in the document hierarchy. In most cases, this is not needed. A cloned page often has similar content to its original, and need to be in a similar location.</li> + <li>In the <strong>TOC</strong> field, select the heading levels you want to be automatically displayed in the table of contents for this page. Or select 'No table of contents', if one is not needed.</li> + <li>Write your content in the editor pane, saving your changes. Refer to <a href="#Editing_an_existing_page">Editing an existing page</a>, for more information on using editor mode.</li> +</ol> + +<h3 id="Link_from_an_existing_page">Link from an existing page</h3> + +<p>This is a bit of a hybrid. You can create a link on another page, then click the link you just inserted, to create the new page:</p> + +<ol> + <li>Enter the name of your new page, anywhere that makes sense in the text of an existing page.</li> + <li>Highlight this new name, and <strong>click the Link icon (<img alt="" src="https://developer.mozilla.org/files/3810/link-icon.png" style="height: 28px; width: 29px;">) </strong>in the editor's toolbar. The <strong>'Update Link'</strong> dialog opens, with the highlighted text in the<strong> 'Link To'</strong> field.</li> + <li>"/en-US/docs/" is inserted by default, to the beginning of the URL field.<em> Enter the name </em>of the page after "/en-US/docs/". The page name does not have to be the same as the link text.</li> + <li>Click OK, to create and insert the link.</li> +</ol> + +<p>If the page does not yet exist, the link is displayed in red. If the page <em>does</em> exist, the link is displayed blue. If you want to create a new page, but the page title you desire is already taken, check if it makes sense helping edit and improve the page already there. Otherwise, think of a unique title for your new page, and create a link for it. Refer to <a href="https://developer.mozilla.org/Project:en/Page_Naming_Guide" title="Project:en/Page_Naming_Guide">page naming guide</a> for guidelines.</p> + +<p>To add content to your new page, click on the red link you just created, after saving and closing the editor. The new page opens in editor mode, enabling you to start writing. Refer to <a href="#Editing_an_existing_page">Editing an existing page</a>, for further information on using editor mode.</p> + +<h2 id="Refreshing_page_content">Refreshing page content</h2> + +<p>MDN support of KumaScript macros, and integration of content from other pages, can sometimes be hampered by the need for caching of pages, for performance reasons. Pages are built from their source, and this output is cached for future requests. From that moment on, any macros (templates), or integrations (using the macro<span class="templateLink"><code><a href="https://developer.mozilla.org/en-US/docs/Template:Page">Page</a></code></span>), will not reflect later changes made to the macro, its output, or the contents of the integrated material.</p> + +<ul> + <li>To manually update a page, force-refresh your Web browser. MDN detects this, triggering a page rebuild, pulling in updated macro output, and integrating page content.</li> + <li>You can also configure pages to periodically rebuild, automatically. This should not be done, unless you expect the page to update frequently. See <a href="/en-US/docs/MDN/Contribute/Tools/Page_regeneration">Page regeneration</a>, for detailed information.</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/MDN/Contribute/Editor">MDN editor guide</a></li> + <li><a href="/en-US/docs/MDN/Contribute/Content/Style_guide">MDN style guide</a></li> +</ul> diff --git a/files/ar/mdn/contribute/index.html b/files/ar/mdn/contribute/index.html new file mode 100644 index 0000000000..c22c7b6d14 --- /dev/null +++ b/files/ar/mdn/contribute/index.html @@ -0,0 +1,38 @@ +--- +title: ساهم في شبكة مطوري موزيلا +slug: MDN/Contribute +tags: + - حول الشبكة + - صفحة هبوط +translation_of: MDN/Contribute +--- +<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/ar/docs/MDN")}}</div> + +<div dir="rtl">مرحباً بك! بزيارتك لهذه الصفحة، فأنت تأخذ أول خطوة لتصبح مساهماً في الشبكة!</div> + +<p dir="rtl"><span class="seoSummary">المقالات المسرودة هنا تغطي جميع جوانب المساهمة في الشبكة، بما فيها دليل التنسيق، ومقالات إرشادية لاستخدام محررنا والأدوات المختلفة، والمزيد. تأكد رجاءً من قراءة (والموافقة على) <a href="https://www.mozilla.org/ar/about/legal/terms/mozilla/">بنود استخدام موزيلا</a> قبل تعديل أو إنشاء أي صفحة.</span></p> + +<p dir="rtl">إذا لم تساهم في شبكة مطوري موزيلا مسبقاً، احرص على قراءة <a href="/ar/docs/MDN/Getting_started">دليل البدء</a> ليساعدك على انتقاء مهمة وتنفيذها.</p> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt class="landingPageList" dir="rtl"><a href="/ar/docs/MDN/Contribute/Howto">مقالات "كيف تقوم"</a></dt> + <dd class="landingPageList" dir="rtl">توفر هذه المقالات دلائل إرشادية خطوة بخطوة لتنفيذ مهمة معينة عند المساهمة في الشبكة.</dd> + <dt class="landingPageList" dir="rtl"><a href="/ar/docs/MDN/Contribute/Localize">ترجمة شبكة مطوري موزيلا</a></dt> + <dd class="landingPageList" dir="rtl">تُستخدم هذه الشبكة من أشخاص حول العالم كمرجع ودليل في تقنيات الويب، بالإضافة لاستخدامها كمرجع في أجزاء فيرفوكس الداخلية. تعتبر مجتمعات الترجمة خاصتنا الجزء الرئيسي من مشروع موزيلا؛ فعملهم في ترجمة وتوطين توثيقاتنا تساعد الناس حول العالم في تطوير الويب المفتوح. إن كنت ترغب في تعلم المزيد حول فِرق ترجمتنا، أو الانضمام لإحداها، أو حتى بدء فريق ترجمة جديد، فهذا هو المكان المناسب لتبدأ.</dd> +</dl> + +<dl> +</dl> +</div> + +<div class="section"> +<dl> + <dt class="landingPageList" dir="rtl"><a href="/ar/docs/MDN/Contribute/Tools">أدوات شبكة موزيلا للمطورين</a></dt> + <dd class="landingPageList" dir="rtl">توفر أدوات شبكة موزيلا للمطورين عدداً من الميزات، التي تجعل تتبع التقدم، وإدارة المحتوى، ومواكبة تحديثات الموقع أسهل.</dd> + <dt class="landingPageList" dir="rtl"><a href="/ar/docs/MDN/Contribute/Editor">دليلك نحو محرر شبكة مطوري موزيلا</a></dt> + <dd class="landingPageList" dir="rtl">الـ WYSIWYG (يقصد به <strong>ما تراه هو ما تحصل عليه</strong>) هو محرر تقدمه موسوعة شبكة مطوري موزيلا، يجعل من السهل المساهمة بمحتوى جديد. يوفر دليل محرر شبكة مطوري موزيلا بعض المعلومات عن كيفية استخدام محرر، فضلاً عن بعض المعلومات حول الميزات المفيدة التي قد تساهم في تحسين إنتاجيتك.</dd> +</dl> +</div> +</div> diff --git a/files/ar/mdn/contribute/localize/index.html b/files/ar/mdn/contribute/localize/index.html new file mode 100644 index 0000000000..ed2a2577cd --- /dev/null +++ b/files/ar/mdn/contribute/localize/index.html @@ -0,0 +1,29 @@ +--- +title: Localizing MDN +slug: MDN/Contribute/Localize +tags: + - Documentation + - Localization + - MDN + - NeedsTranslation + - TopicStub +translation_of: MDN/Contribute/Localize +--- +<div>{{MDNSidebar}}</div><p>MDN is used by people all over the world as a reference and guide to Web technologies, as well as to the internals of Firefox itself. Our localization communities are a key part of the Mozilla project; their work in translating and localizing our documentation helps people around the world develop for the open Web. If you'd like to learn more about our localization teams, join one of the teams, or even start a new localization, this is the place to begin.</p> +<p>{{LandingPageListSubpages}}</p> +<h2 id="Localization_tools">Localization tools</h2> +<p>There are several useful tools that you'll use during localization work:</p> +<dl> + <dt> + <a href="/en-US/docs/Mozilla/Localization/Localizing_with_Verbatim" title="/en-US/docs/Mozilla/Localization/Localizing_with_Verbatim">Verbatim</a></dt> + <dd> + Used for translation of strings across multiple Mozilla projects, including the MDN user interface (as well as the Firefox user interface).</dd> + <dt> + <a href="http://transvision.mozfr.org/" title="http://transvision.mozfr.org/">Transvision</a></dt> + <dd> + A utility provided by Mozilla France, which lets you search for occurrences of an English string, finding all the various translations into a target locale that are used throughout Mozilla code. Useful for finding the preferred translations for words or phrases.</dd> +</dl> +<h2 id="See_also">See also</h2> +<ul> + <li><a href="/en-US/docs/Mozilla/Localization" title="/en-US/docs/Mozilla/Localization">Localization at Mozilla</a></li> +</ul> diff --git a/files/ar/mdn/contribute/localize/صفحات_الترجمة/index.html b/files/ar/mdn/contribute/localize/صفحات_الترجمة/index.html new file mode 100644 index 0000000000..c2714fc285 --- /dev/null +++ b/files/ar/mdn/contribute/localize/صفحات_الترجمة/index.html @@ -0,0 +1,58 @@ +--- +title: ترجمة صفحات شبكة مطوري موزيلا +slug: MDN/Contribute/Localize/صفحات_الترجمة +tags: + - ترجمة + - ترجمة الصفحات + - توطين اللغة + - دليل الترجمة + - دليل ترجمة الصفحات +translation_of: MDN/Contribute/Localize/Translating_pages +--- +<div>{{MDNSidebar}}</div> + +<p dir="rtl">هذا المقال هو دليل أساسي لمعرفة كيفية ترجمة المحتوى على شبكة مطوري موزيلا، بما في ذلك آلية العمل المستخدمة في الترجمة و نصائح حول الطريقة الأمثل للتعامل مع أنواع المحتوى المختلفة.</p> + +<h2 dir="rtl" id="بدأ_صفحة_ترجمة_جديدة">بدأ صفحة ترجمة جديدة</h2> + +<p dir="rtl">عندما تجد صفحة ما تريد أن تترجمها, اتبع هذه الخطوات:</p> + +<ol dir="rtl"> + <li>انقر رمز اللغات لفتح قائمة <strong>اللغات</strong>، ثم اضغط على "<strong>اضافة ترجمة"</strong>. تظهر صفحة إختيار اللغة.</li> + <li>إختر اللغة التي تريد ترجمة الصفحة إليها. يفتح عرض ترجمة المادة مع نص اللغة الأصلية المعروضة على الجانب الأيسر.</li> + <li>تحت <strong>وصف الترجمة</strong>، يمكنك ترجمة العنوان و السبيكة إختياريا إلى اللغة المستهدفة. السبيكة هو الجزء الأخير من عنوان صفحة (على سبيل المثال, "صفحات_الترجمة" على هذا المقال.) بعض مجتمعات الترجمة لا تترجم السبيكة، بل تحتفظ بنفس السبيكة بالإنجليزية. قارن مع مقالات أخرى في لغتك لتحديد الممارسات العامة. بإمكانك الضغط على إشارة التصغير بجانب "<strong>وصف الترجمة</strong>" لإخفاء هذه المعلومة عند الانتهاء منها، لترك مجال أكبر أمام قسم <strong>المحتوى المترجم</strong>.</li> + <li>تحت<strong> ترجمة المحتوى</strong>، ترجم نص الصفحة.</li> + <li>إملأ على الأقل <strong>وسما</strong>ً واحداً للصفحة.</li> + <li>أضغط على "<strong>حفظ التغييرات</strong>" عند إنتهائك.</li> +</ol> + +<div class="note" dir="rtl"><strong>ملاحظة:</strong> يتم عرض عناصر واجهة المستخدم من عرض الترجمة المادة في البداية باللغة الإنجليزية. وفى الزيارات اللاحقة لترجمة مقال معين, تظهر واجهة المستخدم باللغة المناسبة اذا توفر ترجمة للموقع لهذه اللغة. يمكن ترجمة واجهة المستخدم لشبكة المطورين لموزيلا بإستعمال <a href="https://pontoon.mozilla.org/projects/mdn/">بونتوون</a>. انظر إلى <a href="/ar/docs/Mozilla/Localization/الترجمة_مع_بونتوون">الترجمة بإستخدام بونتوون </a>للحصول على تفاصيل حول كيفية استخدام هذه الأداة .</div> + +<h2 dir="rtl" id="تحرير_صفحة_مُترجمِة">تحرير صفحة مُترجمِة</h2> + +<ul dir="rtl"> + <li>في الصفحة المُترجمِة، أنقر فوق زر التحرير (مسمى أحيانا في اللغة الهدف). يفتح عرض ترجمة المقال.</li> +</ul> + +<p dir="rtl">اذا كانت النسخة الانجليزية قد تغيرت منذ اخر تعديل للترجمة, قائمة "المقالات المترجمة" تظهر مستوى المصدر "متغير" للتغييرات فى النسخة الانجليزية. هذا يساعدك على رؤية ما يلزم تحديثه في الترجمة.</p> + +<h2 dir="rtl" id="ترجمة_الوسوم">ترجمة الوسوم</h2> + +<p dir="rtl">مهم للغاية ذلك أن كل صفحة موسومة على الأقل بوسم واحد. حتى وان كان ذلك ترجمة. بشكل عام، استخدام نفس الوسوم في النسخة الأصلية هي فكرة جيدة.</p> + +<p dir="rtl">تستخدم بعض الوسوم كمرشحات للبحث ، أو كإتفاقيات بين المساهمين. لا ينبغي ترجمتها. لمعرفة هذه الوسوم، أقرأ <a href="https://developer.mozilla.org/en-US/docs/Project:MDN/Contributing/Tagging_standards">معايير الوسم</a>. لك حرية خلق وسوم مترجمة لمجموعة من المحتويات إن لم يكن محمياً بأحد معايير الوسوم.</p> + +<h2 dir="rtl" id="نصائح_للمترجمين_الجدد">نصائح للمترجمين الجدد</h2> + +<p dir="rtl">إذا كنت مترجما جديدا على شكبة مطوري موزيلا، ندعوك لقراءة بعض من إقترحاتنا:</p> + +<ul dir="rtl"> + <li>المقالات في المسرد (<em>المسرد هو فهرس للكلمات العسيرة مع شرح لها</em>) تعتبر جد جيدة بالنسبة للمترجمين الجدد، لأنها بسيطة وقصيرة.</li> + <li>المقالات الموسومة بــ <a href="en-US/docs/tag/l10n%3Apriority">"l10n:priority"</a> تعتبر ذا أهمية كبيرة لترجمتها.</li> + <li> إذا رأيت نصا بين أقواس معقوفة مزدوجة، مثل \{{some-text("more text")}}، أتركه غير مترجم، و لا تغير علامات الترقيم. هذا <a href="en-US/docs/MDN/Contribute/Structures/Macros">ماكرو</a>، حيث أنه يقوم بإنشاء هيكل في الصفحة، أو يقوم بشيء مفيد. قد ترى نصوصا غير مترجمة مولدة من طرف ماكرو، لا تقلق حيال ذلك إلى حين حصولك على الخبرة اللازمة في MDN. (تغيير هذا النص يتطلب <a href="en-US/docs/MDN/Contribute/Tools/Template_editing">إمتيازات خاصة</a> لأن الماكرو قد يكون فعالا للغاية). في حالة ما كنت فضوليا، يمكنك الإطلاع على <a href="en-US/docs/MDN/Contribute/Structures/Macros/Commonly-used_macros">الماكرو الأكثر إستعمالا</a> لترى بعضا من الاشياء التي يقوم بها الماكرو.</li> + <li>راجع <a href="en-US/docs/MDN/Contribute/Localize/Localization_projects">صفحة مشروع التوطين</a>* لإيجاد المزيد عن التوطين بمنطقتك.</li> +</ul> + +<div class="note"> +<p dir="rtl"><strong>التوطين:</strong> عملية تكييف منتج تُرجم مسبقاً إلى لغات مختلفة في منطقة أو بلد محدد، وبشكل أبسط، هو عملية ترجمة لمحتوى معين ما.</p> +</div> diff --git a/files/ar/mdn/contribute/persona_sign-in/index.html b/files/ar/mdn/contribute/persona_sign-in/index.html new file mode 100644 index 0000000000..ca4cc4805e --- /dev/null +++ b/files/ar/mdn/contribute/persona_sign-in/index.html @@ -0,0 +1,28 @@ +--- +title: MDN and Persona sign-ins +slug: MDN/Contribute/Persona_sign-in +translation_of: Archive/MDN/Persona_sign-ins +--- +<div>{{MDNSidebar}}</div><div class="warning"> +<p>Please <a href="/en-US/docs/MDN/Contribute/Howto/Link_a_GitHub_account">link your GitHub account to your MDN profile now</a> so you can continue to sign in to MDN.</p> +</div> + +<div class="threecolumns"> +<div class="syntaxbox">Currently, MDN lets contributors sign in using two different authentication providers: Mozilla Persona and GitHub. Starting on November 1, 2016, we will remove Persona as an option for logging in. Therefore, you must enable Github authentication on your profile to avoid losing login access to MDN.</div> +</div> + +<p>We recognize that this is an inconvenience, and we do apologize for it. Unfortunately, this is out of our control.</p> + +<h2 id="Why_is_Persona_being_removed">Why is Persona being removed?</h2> + +<p>Mozilla has shut down the Persona project, and its servers will be turned off in November, 2016. You can <a href="https://wiki.mozilla.org/Identity/Persona_Shutdown_Guidelines_for_Reliers#FAQs">learn more about Mozilla's decision</a> to shut down Persona on the Mozilla wiki.</p> + +<h2 id="When_will_Persona_be_removed">When will Persona be removed?</h2> + +<p>We will disable Persona as an authentication provider on November 1, 2016; in other words, the last day you'll be able to sign in to MDN using Persona will be October 31, 2016. We will be issuing increasingly frequent and increasingly urgent notifications to <a href="/en-US/docs/MDN/Contribute/Howto/Link_a_GitHub_account">add a GitHub account to your MDN profile</a> starting now. Please do this as soon as you can, in order to avoid any risk of losing access to your MDN account.</p> + +<h2 id="Will_MDN_offer_another_authentication_provider">Will MDN offer another authentication provider?</h2> + +<p>We would very much like to do so, but have not yet identified another provider which meets our requirements; in addition, we don't currently have the developer resources to integrate another provider. For the time being, your <em>only</em> option to keep contributor access to MDN is to <a href="/en-US/docs/MDN/Contribute/Howto/Link_a_GitHub_account">link your MDN profile to your GitHub account</a>.</p> + +<p>Keep in mind, of course, that you don't need to sign in to MDN in order to read our content. But if you have an account for contributing, and wish to be able to contribute at any time in the future, be sure to <em><strong>add a GitHub account to your profile as soon as you can,</strong></em> before October 31, 2016.</p> diff --git a/files/ar/mdn/guidelines/index.html b/files/ar/mdn/guidelines/index.html new file mode 100644 index 0000000000..8f14102c44 --- /dev/null +++ b/files/ar/mdn/guidelines/index.html @@ -0,0 +1,16 @@ +--- +title: Guidelines +slug: MDN/Guidelines +tags: + - Guidelines + - Landing + - MDN Meta + - NeedsTranslation + - TopicStub +translation_of: MDN/Guidelines +--- +<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/MDN")}}</div> + +<p><span class="seoSummary">These guides provide details on how MDN documentation should be written and formatted, as well as how our code samples and other content should be presented.</span> By following these guides, you can ensure that the material you produce is clean and easy to use.</p> + +<p>{{LandingPageListSubpages}}</p> diff --git a/files/ar/mdn/guidelines/writing_style_guide/index.html b/files/ar/mdn/guidelines/writing_style_guide/index.html new file mode 100644 index 0000000000..1eed23f4b1 --- /dev/null +++ b/files/ar/mdn/guidelines/writing_style_guide/index.html @@ -0,0 +1,730 @@ +--- +title: Writing style guide +slug: MDN/Guidelines/Writing_style_guide +translation_of: MDN/Guidelines/Writing_style_guide +--- +<div>{{FirefoxSidebar}}</div> + +<div>{{IncludeSubnav("/en-US/docs/MDN")}}</div> + +<p>لتقديم الوثائق بطريقة منظمة وموحدة وسهلة القراءة ، يصف دليل نمط مستندات ويب MDN كيفية تنظيم النص وتهجيته وتنسيقه وما إلى ذلك. هذه إرشادات بدلاً من قواعد صارمة. نحن مهتمون بالمحتوى أكثر من التنسيق ، لذلك لا تشعر بأنك ملزم بتعلم دليل الأسلوب قبل المساهمة. لكن لا تنزعج أو تفاجأ إذا قام متطوِّر كادح في وقت لاحق بتحرير عملك ليتوافق مع هذا الدليل.</p> + +<p>تنطبق الجوانب اللغوية لهذا الدليل في المقام الأول على وثائق باللغة الإنجليزية. لغات أخرى قد يكون (وأرحب لإنشاء) دلائل الاسلوب. يجب نشرها كصفحات فرعية لصفحة فريق التعريب.</p> + +<p>بالنسبة لمعايير الأنماط التي تنطبق على المحتوى المكتوب لمواقع أخرى غير MDN ، يرجى الرجوع إلى <a href="https://www.mozilla.org/en-US/styleguide/">دليل أسلوب One Mozilla.</a></p> + + + +<h2 id="المبادئ">المبادئ</h2> + +<p>أفضل مكان للبدء به في أي دليل واسع النطاق للنشر هو مع بعض معايير النصوص الأساسية للمساعدة في الحفاظ على ثبات الوثائق. توضح الأقسام التالية بعضًا من هذه الأساسيات لمساعدتك.</p> + +<h3 id="عنوان_الصفحة">عنوان الصفحة</h3> + +<p>يتم استخدام عناوين الصفحات في نتائج البحث وتستخدم أيضًا لترتيب التسلسل الهرمي للصفحة في قائمة مسارات التنقل أعلى الصفحة. يمكن أن يكون عنوان الصفحة (الذي يتم عرضه في أعلى الصفحة وفي نتائج البحث) مختلفًا عن الصفحة "slug" ، وهو جزء من عنوان URL الخاص بالصفحة بعد "<locale> / docs /".</p> + +<h4 id="العنوان_ورسملة_العنوان">العنوان ورسملة العنوان</h4> + +<p>يجب أن تستخدم عناوين الصفحات وعناوين الأقسام طريقة الكتابة بالأحرف الكبيرة على شكل الجملة (لا تستخدم سوى الأحرف الكبيرة في الكلمة الأولى والأسماء المناسبة) بدلاً من الكتابة بالأحرف الكبيرة على نمط العنوان:</p> + +<ul> + <li><span class="correct"><strong>الصواب</strong></span>: "A new method for creating JavaScript rollovers"</li> + <li><span class="incorrect"><strong>الخطأ</strong></span>: "A New Method for Creating JavaScript Rollovers"</li> +</ul> + +<p>We have many older pages that were written before this style rule was established. Feel free to update them as needed if you like. We're gradually getting to them.</p> + +<h4 id="Choosing_titles_and_slugs">Choosing titles and slugs</h4> + +<p>Page slugs should be kept short; when creating a new level of hierarchy, the new level's component in the slug should just be a word or two.</p> + +<p>Page titles, on the other hand, may be as long as you like, within reason, and they should be descriptive.</p> + +<h4 id="Creating_new_subtrees">Creating new subtrees</h4> + +<p>When you need to add some articles about a topic or subject area, you will typically do so by creating a landing page, then adding subpages for each of the individual articles. The landing page should open with a paragraph or two describing the topic or technology, then provide a list of the subpages with descriptions of each page. You can automate the insertion of pages into the list using some macros we've created.</p> + +<p>For example, consider the <a href="/en-US/docs/Web/JavaScript">JavaScript</a> guide, which is structured as follows:</p> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide" title="JavaScript/Guide">JavaScript/Guide</a> - Main table-of-contents page</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/JavaScript_Overview" title="JavaScript/Guide/JavaScript_Overview">JavaScript/Guide/JavaScript Overview</a></li> + <li><a href="/en-US/docs/JavaScript/Guide/Functions" title="JavaScript/Guide/Functions">JavaScript/Guide/Functions</a></li> + <li><a href="/en-US/docs/JavaScript/Guide/Details_of_the_Object_Model" title="JavaScript/Guide/Details_of_the_Object_Model">JavaScript/Guide/Details of the Object Model</a></li> +</ul> + +<p>Try to avoid putting your article at the top of the hierarchy, which slows the site down and makes search and site navigation less effective.</p> + +<h3 id="General_article_content_guidelines">General article content guidelines</h3> + +<p>When writing any document, it's important to know how much to say. If you ramble on too long, the article becomes tedious to read and nobody will use it. Getting the amount of coverage right is important for several reasons. Among those reasons: to ensure that the reader finds the information they truly need, and to provide enough quality material for search engines to adequately analyze and rank the article. We'll discuss the former (providing the information the reader may need) here. To learn a little about ensuring that pages are properly classified and ranked by search engines, see the article <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Write_for_SEO">How to write for SEO on MDN</a>.</p> + +<p>The goal is to write pages that include all the information that readers may need without going on too long about it all. We have a few recommendations in this area.</p> + +<h4 id="Consider_your_audience">Consider your audience</h4> + +<p>Keep in mind that these are guidelines. Some of these tips may not apply in every case. Certainly keep your article's audience in mind. An article on advanced network techniques likely doesn't need to go into as much detail about basic networking concepts as the typical article on networking code, for instance.</p> + +<h4 id="Provide_a_useful_summary">Provide a useful summary</h4> + +<p>Make sure the article's summary—that is, the opening paragraph or paragraphs before the first heading—provides enough information for the reader to understand if the article is likely to be covering what they're interested in reading about. In guide or tutorial content, the summary should let the reader know what topics will be covered and what they're already expected to know, if anything. It should mention the technology, technologies, and/or APIs that are being documented or discussed, with links to those, and it should offer hints as to the situations in which the article's contents might be useful.</p> + +<h5 id="Example_Too_short!">Example: Too short!</h5> + +<p>This example of a summary is far too short. It leaves out too much information, such as what it means exactly to "stroke" text, where the text is drawn, and so forth.</p> + +<div class="example-bad"> +<p><strong><code>CanvasRenderingContext2D.strokeText()</code></strong> draws a string.</p> +</div> + +<h5 id="Example_Too_long!">Example: Too long!</h5> + +<p>Here, we've updated the summary, but now it's far too long. Too much detail is included, and the text gets far too much into other methods and properties. Instead, the summary should focus on the <code>strokeText()</code> method, and should refer to the appropriate guide where the other details are offered.</p> + +<div class="example-bad"> +<p>When called, the Canvas 2D API method <strong><code>CanvasRenderingContext2D.strokeText()</code></strong> strokes the characters in the specified string beginning at the coordinates specified, using the current pen color. In the terminology of computer graphics, "stroking" text means to draw the outlines of the glyphs in the string without filling in the contents of each character with color.</p> + +<p>The text is drawn using the context's current font as specified in the context's {{domxref("CanvasRenderingContext2D.font", "font")}} property.</p> + +<p>The placement of the text relative to the specified coordinates are determined by the context's <code>textAlign</code>, <code>textBaseline</code>, and <code>direction</code> properties. <code>textAlign</code> controls the placement of the string relative to the X coordinate specified; if the value is <code>"center"</code>, then the string is drawn starting at <code>x - (stringWidth / 2)</code>, placing the specified X-coordinate in the middle of the string. If the value is <code>"left"</code>, the string is drawn starting at the specified value of <code>x</code>. And if <code>textAlign</code> is <code>"right"</code>, the text is drawn such that it ends at the specified X-coordinate.</p> + +<p>(etc etc etc...)</p> + +<p>You can, optionally, provide a fourth parameter that lets you specify a maximum width for the string, in pixels. If you provide this parameter, the text is compressed horizontally or scaled (or otherwise adjusted) to fit inside a space that wide when being drawn.</p> + +<p>You can call the <strong><code>fillText()</code></strong> method to draw a string's characters as filled with color instead of only drawing the outlines of the characters.</p> +</div> + +<h5 id="Example_Much_better!">Example: Much better!</h5> + +<p>Here we see a much better overview for the <code>strokeText()</code> method.</p> + +<div class="example-good"> +<p>The {{domxref("CanvasRenderingContext2D")}} method <code><strong>strokeText()</strong></code>, part of the <a href="/en-US/docs/Web/API/Canvas_API">Canvas 2D API</a>, strokes—that is, draws the outlines of—the characters of a specified string, anchored at the position indicated by the given X and Y coordinates. The text is drawn using the context's current {{domxref("CanvasRenderingContext2D.font", "font")}}, and is justified and aligned according to the {{domxref("CanvasRenderingContext2D.textAlign", "textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline")}}, and {{domxref("CanvasRenderingContext2D.direction", "direction")}} properties.</p> + +<p>For more details and further examples, see {{SectionOnPage("/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Text")}} in the Learning Area as well as our main article on the subject, <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text">Drawing text</a>.</p> +</div> + +<h4 id="Include_all_relevant_examples">Include all relevant examples</h4> + +<p>More pages should have examples than should not have them. The majority of pages most likely deserve multiple examples, in fact. It's important to ensure that you use examples to clarify what every parameter is used for, and to clarify any edge cases that may exist. You should also use examples to demonstrate solutions for common tasks, and you should use examples to demonstrate solutions to problems that may arise.</p> + +<p>Each example should be preceded by text explaining what the example does and anything the reader should know before beginning to read or try out the example.</p> + +<p>In addition, each piece of code should include an explanation of how it works. Keep in mind that it may make sense to break up a large piece of code into smaller portions so they can be described individually. The text following each piece of code should explain anything relevant, using an appropriate level of detail. If the code is very simple and doesn't really feature anything directly related to the API being documented, you may only give a quick summary of what it is and why it's there. If the code is intricate, uses the API being documented, or is technically creative, you should provide a more detailed explanation.</p> + +<p>When using the live sample system, it's helpful to be aware that all of the {{HTMLElement("pre")}} blocks in the area that contains the sample are concatenated together before running the example, which lets you break any or all of the HTML, CSS, and JavaScript into multiple segments, each optionally with its own descriptions, headings, and so forth. This makes documenting code incredibly powerful and flexible.</p> + +<h4 id="Overly-short_articles_are_hard_to_find">Overly-short articles are hard to find</h4> + +<p>If an article is "thin"—that is, too short—it may not be indexed properly (or at all) by search engines. As a rule of thumb, the article's body text should be at least 250-300 words. Don't artificially inflate a page that can't reasonably be expanded, but treat this guideline as a minimum target length when possible.</p> + +<h3 id="Sections_paragraphs_and_newlines">Sections, paragraphs, and newlines</h3> + +<p>Use heading levels in decreasing order: {{HTMLElement("h2")}} then {{HTMLElement("h3")}} then {{HTMLElement("h4")}}, without skipping levels. H2 is the highest level allowed because H1 is reserved for the page title. If you need more than three or four levels of headers you should consider breaking up the article into several smaller articles with a landing page, linking them together using the {{TemplateLink("Next")}}, {{TemplateLink("Previous")}}, and {{TemplateLink("PreviousNext")}} macros.</p> + +<p>The Enter (or Return) key on your keyboard starts a new paragraph. To insert a newline without a space, hold down the Shift key while pressing Enter.</p> + +<p>Don't create single subsections — you don't subdivide a topic into one. It's either two subheadings or more, or none at all.</p> + +<p>Don't have bumping heads, which are headings followed immediately by headings. Aside from looking horrible, it's helpful to readers if every heading has at least a brief intro after it to introduce the subsections beneath.</p> + +<h3 id="Lists">Lists</h3> + +<p>Lists should be formatted and structured uniformly across all contributions. Individual list items should be written with suitable punctuation, regardless of the list format. However, depending on the type of list you are creating, you will want to adjust your writing as described in the sections below.</p> + +<h4 id="Bulleted_Lists">Bulleted Lists</h4> + +<p>Bulleted lists should be used to group related pieces of concise information. Each item in the list should follow a similar sentence structure. Phrases and sentences in bulleted lists should include standard punctuation. Periods must appear at the end of each sentence in a bulleted list, including the item's final sentence, just as would be expected in a paragraph.</p> + +<p>An example of a correctly structured bulleted list:</p> + +<div class="example-good"> +<p>In this example we should include:</p> + +<ul> + <li>A condition, with a brief explanation.</li> + <li>A similar condition, with a brief explanation.</li> + <li>Yet another condition, with some further explanation.</li> +</ul> +</div> + +<p>Note how the same sentence structure repeats from bullet to bullet. In this example, each bullet point states a condition followed by a comma and a brief explanation, and each item in the list ends with a period.</p> + +<h4 id="Numbered_Lists">Numbered Lists</h4> + +<p>Numbered lists are used primarily to enumerate steps in a set of instructions. Because instructions can be complex, clarity is a priority, especially if the text in each list item is lengthy. As with bulleted lists, follow standard punctuation usage.</p> + +<p>An example of a correctly structured numbered list:</p> + +<div class="example-good"> +<p>In order to correctly structure a numbered list, you should:</p> + +<ol> + <li>Open with a heading or brief paragraph to introduce the instructions. It's important to provide the user with context before beginning the instructions.</li> + <li>Start creating your instructions, and keep each step in its own numbered item. Your instructions may be quite extensive, so it is important to write clearly and use correct punctuation.</li> + <li>After you have finished your instructions, close off the numbered list with a brief summary or explanation of the expected outcome upon completion.</li> +</ol> + +<p>This is an example of writing a closing explanation. We have created a short numbered list that provides instructive steps to produce a numbered list with the correct formatting.</p> +</div> + +<p>Note how the items in numbered lists read like short paragraphs. Because numbered lists are routinely used for instructional purposes, or to walk someone through an orderly procedure, be sure to keep each item focused: one item per number or step.</p> + +<h3 id="Text_formatting_and_styles">Text formatting and styles</h3> + +<p>Use the "Formatting Styles" drop-down list to apply predefined styles to selected content.</p> + +<div class="note">The "Note" style is used to call out important notes, like this one.</div> + +<div class="warning">Similarly, the "Warning" style creates warning boxes like this.</div> + +<p>Unless specifically instructed to do so, <strong>do not</strong> use the HTML <code>style</code> attribute to manually style content. If you can't do it using a predefined class, drop into {{IRCLink("mdn")}} and ask for help.</p> + +<h3 id="Code_sample_style_and_formatting">Code sample style and formatting</h3> + +<div class="note"> +<p><strong>Note</strong>: This section deals with the styling/formatting of code as it appears on an MDN article. If you want guidelines on actually writing code examples, see our <a href="/en-US/docs/MDN/Contribute/Guidelines/Code_samples">Code sample guidelines</a>.</p> +</div> + +<h4 id="Tabs_and_line_breaks">Tabs and line breaks</h4> + +<p>Use two spaces per tab in all code examples. Indent the code cleanly, with open-brace ("{") characters on the same line as the statement that opens the block. For example:</p> + +<pre class="brush: js notranslate">if (condition) { + /* handle the condition */ +} else { + /* handle the "else" case */ +} +</pre> + +<p>Long lines shouldn't be allowed to stretch off horizontally to the extent that they require horizontal scrolling to read. Instead, break at natural breaking points. Some examples follow:</p> + +<pre class="brush: js notranslate">if (class.CONDITION || class.OTHER_CONDITION || class.SOME_OTHER_CONDITION + || class.YET_ANOTHER_CONDITION ) { + /* something */ +} + +var toolkitProfileService = Components.classes["@mozilla.org/toolkit/profile-service;1"] + .createInstance(Components.interfaces.nsIToolkitProfileService); +</pre> + +<h4 id="Inline_code_formatting">Inline code formatting</h4> + +<p>Use the "Code" button (labeled with two angle brackets "<>") to apply inline code-style formatting to function names, variable names, and method names (this uses the {{HTMLElement("code")}} element). For example, "the <code class="js plain">frenchText()</code> function".</p> + +<p>Method names should be followed by a pair of parentheses: <code>doSomethingUseful()</code>. The parentheses help differentiate methods from other code terms.</p> + +<h4 id="Syntax_highlighting">Syntax highlighting</h4> + +<p><img alt="Screenshot of the 'Syntax Highlighter' menu." src="https://mdn.mozillademos.org/files/12682/Language%20list.png" style="border-style: solid; border-width: 1px; float: right; margin: 2px 4px;">Entire lines (or multiple lines) of code should be formatted using syntax highlighting rather than the {{HTMLElement("code")}} element. Select the appropriate language from the language list button (the one with the two code blocks), as seen in the screenshot to the right. This will insert a preformatted code box with line numbers and syntax highlighting for the chosen language.</p> + +<p>The following example shows text with JavaScript formatting:</p> + +<div class="line number2 index1 alt1"> +<pre class="brush: js notranslate">for (var i = 0, j = 9; i <= 9; i++, j--) + document.writeln("a[" + i + "][" + j + "]= " + a[i][j]);</pre> +</div> + +<p>If no appropriate language is available, use ("No Highlight" in the language menu). This will result in code without syntax highlighting:</p> + +<pre class="brush: plain notranslate">x = 42;</pre> + +<h4 id="Syntax_definitions">Syntax definitions</h4> + +<p>If you want to insert a syntax definition, you can choose the "Syntax Box" option from the "Styles" drop-down menu in the editor toolbar. This will give the syntax definition a special formatting distinguishing it from normal code.</p> + +<h4 id="Blocks_not_referring_to_code">Blocks not referring to code</h4> + +<p>There are a few use cases where a <pre> block does not refer to code and doesn't have syntax highlighting nor line numbers. In such cases you should add a <pre> without class. Those cases include things like tree structures:</p> + +<pre class="notranslate">root/ + + folder1/ + file1 + + folder2/ + file2 + file3 +</pre> + +<p>To create preformatted content without syntax highlighting and line numbers click the "pre" button in the toolbar. Then start to type the text.</p> + +<h4 id="Styling_HTML_element_references">Styling HTML element references</h4> + +<p>There are specific rules to follow when writing about HTML elements. These rules produce consistent descriptions of elements and their components. They also ensure correct linking to detailed documentation.</p> + +<dl> + <dt>Element names</dt> + <dd>Use the {{TemplateLink("HTMLElement")}} macro, which creates a link to the page for that element. For example, writing \{{HTMLElement("title")}} produces "{{HTMLElement("title")}}". If you don't want to create a link, <strong>enclose the name in angle brackets</strong> and use "Code (inline)" style (e.g., <code><title></code>).</dd> + <dt>Attribute names</dt> + <dd>Use <strong>bold face</strong>.</dd> + <dt>Attribute definitions</dt> + <dd>Use the {{TemplateLink("htmlattrdef")}} macro (e.g., <span class="nowiki">\{{htmlattrdef("type")}}</span>) for the definition term, so that it can be linked to from other pages, then use the {{TemplateLink("htmlattrxref")}} macro (e.g., <span class="nowiki">\{{htmlattrxref("attr","element")}}</span>) to reference attribute definitions.</dd> + <dt>Attribute values</dt> + <dd>Use "Code (inline)" style, and do not use quotation marks around strings, unless needed by the syntax of a code sample. For example: When the <strong>type</strong> attribute of an <code><input></code> element is set to <code>email</code> or <code>tel</code> ...</dd> +</dl> + +<h3 id="Latin_abbreviations">Latin abbreviations</h3> + +<h4 id="In_notes_and_parentheses">In notes and parentheses</h4> + +<ul> + <li>Common Latin abbreviations (etc., i.e., e.g.) may be used in parenthetical expressions and notes. Use periods in these abbreviations, followed by a comma or other appropriate punctuation. + <ul> + <li><span class="correct"><strong>Correct</strong></span>: Web browsers (e.g., Firefox) can be used ...</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: Web browsers e.g. Firefox can be used ...</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: Web browsers, e.g. Firefox, can be used ...</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: Web browsers, (eg: Firefox) can be used ...</li> + </ul> + </li> +</ul> + +<h4 id="In_running_text">In running text</h4> + +<ul> + <li>In regular text (i.e., text outside of notes or parentheses), use the English equivalent of the abbreviation. + <ul> + <li><span class="correct"><strong>Correct</strong></span>: ... web browsers, and so on.</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: ... web browsers, etc.</li> + <li><span class="correct"><strong>Correct</strong></span>: Web browsers such as Firefox can be used ...</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: Web browsers e.g. Firefox can be used ...</li> + </ul> + </li> +</ul> + +<h4 id="Meanings_and_English_equivalents_of_Latin_abbreviations">Meanings and English equivalents of Latin abbreviations</h4> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Abbrev</th> + <th>Latin</th> + <th>English</th> + </tr> + <tr> + <td>cf.</td> + <td><em>confer</em></td> + <td>compare</td> + </tr> + <tr> + <td>e.g.</td> + <td><em>exempli gratia</em></td> + <td>for example</td> + </tr> + <tr> + <td>et al.</td> + <td><em>et alii</em></td> + <td>and others</td> + </tr> + <tr> + <td>etc.</td> + <td><em>et cetera</em></td> + <td>and so forth, and so on</td> + </tr> + <tr> + <td>i.e.</td> + <td><em>id est</em></td> + <td>that is, in other words</td> + </tr> + <tr> + <td>N.B.</td> + <td><em>nota bene</em></td> + <td>note well</td> + </tr> + <tr> + <td>P.S.</td> + <td><em>post scriptum</em></td> + <td>postscript</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p>Always consider whether it's truly beneficial to use a Latin abbreviation. Some of these are used so rarely that many readers won't understand the meaning, and others are often confused with one another. And be sure that <strong>you</strong> use them correctly, if you choose to do so. For example, be careful not to confuse "e.g." with "i.e.", which is a common error.</p> +</div> + +<h3 id="Acronyms_and_abbreviations">Acronyms and abbreviations</h3> + +<h4 id="Capitalization_and_periods">Capitalization and periods</h4> + +<p>Use full capitals and delete periods in all acronyms and abbreviations, including organizations such as "US" and "UN".</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: XUL</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: X.U.L.; Xul</li> +</ul> + +<h4 id="Expansion">Expansion</h4> + +<p>On the first mention of a term on a page, expand acronyms likely to be unfamiliar to users. When in doubt, expand it, or, better, link it to the article or <a href="/en-US/docs/Glossary">glossary</a> entry describing the technology.</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: "XUL (XML User Interface Language) is Mozilla's XML-based language..."</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: "XUL is Mozilla's XML-based language..."</li> +</ul> + +<h4 id="Plurals_of_acronyms_and_abbreviations">Plurals of acronyms and abbreviations</h4> + +<p>For plurals of acronyms or abbreviations, add <em>s</em>. Don't use an apostrophe. Ever. Please.</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: CD-ROMs</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: CD-ROM's</li> +</ul> + +<h4 id="Versus_vs._and_v.">"Versus", "vs.", and "v."</h4> + +<p>The contraction "vs." is preferred.</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: this vs. that</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: this v. that</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: this versus that</li> +</ul> + +<h3 id="Capitalization">Capitalization</h3> + +<p>Use standard English capitalization rules in body text, and capitalize "World Wide Web." It is acceptable to use lower case for "web" (used alone or as a modifier) and "internet;" this guideline is a change from a previous version of this guide, so you may find many instances of "Web" and "Internet" on MDN. Feel free to change these as you are making other changes, but editing an article just to change capitalization is not necessary.</p> + +<p>Keyboard keys should use sentence-style capitalization, not all-caps capitalization. For example, "Enter" not "ENTER."</p> + +<h3 id="Contractions">Contractions</h3> + +<p>Our writing style tends to be casual, so you should feel free to use contractions (e.g., "don't", "can't", "shouldn't") if you prefer.</p> + +<h3 id="Pluralization">Pluralization</h3> + +<p>Use English-style plurals, not the Latin- or Greek-influenced forms.</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: syllabuses, octopuses</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: syllabi, octopi</li> +</ul> + +<h3 id="Hyphenation">Hyphenation</h3> + +<p>Hyphenate compounds when the last letter of the prefix is a vowel and is the same as the first letter of the root.</p> + +<ul> + <li><font color="green"><strong>Correct</strong></font>: email, re-elect, co-op</li> + <li><font color="red"><strong>Incorrect</strong></font>: e-mail, reelect, coop</li> +</ul> + +<h3 id="Gender-neutral_language">Gender-neutral language</h3> + +<p>It is a good idea to use gender-neutral language in any writing where gender is irrelevant to the subject matter, to make the text as inclusive as possible. So for example, if you are talking about the actions of a specific man, usage of he/his would be fine, but if the subject is a person of either gender, he/his isn't appropriate.<br> + <br> + Let's take the following example:</p> + +<blockquote> +<p>A confirmation dialog appears, asking the user if he allows the Web page to make use of his Web cam.</p> +</blockquote> + +<blockquote> +<p>A confirmation dialog appears, asking the user if she allows the Web page to make use of her Web cam.</p> +</blockquote> + +<p>Both versions are gender-specific. To fix this, use gender-neutral pronouns:</p> + +<blockquote> +<p>A confirmation dialog appears, asking the user if they allow the Web page to make use of their Web cam.</p> +</blockquote> + +<div class="note"> +<p>MDN allows the use of this very common syntax (which is controversial among usage authorities), to make up for the lack of a neutral gender in English. The use of the third-person plural as a gender neutral pronoun (that is, using "they," "them", "their," and "theirs") is an accepted practice, commonly known as "<a href="https://en.wikipedia.org/wiki/Singular_they">singular 'they.'</a>"</p> +</div> + +<p>You can use both genders:</p> + +<blockquote> +<p>A confirmation dialog appears, asking the user if he or she allows the web page to make use of his/her web cam.</p> +</blockquote> + +<p>making the users plural:</p> + +<blockquote> +<p>A confirmation dialog appears, asking the users if they allow the web page to make use of their web cams.</p> +</blockquote> + +<p>The best solution, of course, is to rewrite and eliminate the pronouns:</p> + +<blockquote> +<p>A confirmation dialog appears, requesting the user's permission for web cam access.</p> +</blockquote> + +<blockquote> +<p>A confirmation dialog box appears, which asks the user for permission to use the web cam.</p> +</blockquote> + +<p>The last way of dealing with the problem is arguably better, as it is not only grammatically more correct but removes some of the complexity associated with dealing with genders across different languages that may have wildly varying gender rules. This solution can make translation easier for both readers and localizers.</p> + +<h3 id="Numbers_and_numerals">Numbers and numerals</h3> + +<h4 id="Dates">Dates</h4> + +<p>For dates (not including dates in code samples) use the format "January 1, 1990".</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: February 24, 2006</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: February 24th, 2006; 24 February, 2006; 24/02/2006</li> +</ul> + +<p>Alternately, you can use the YYYY/MM/DD format.</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: 2006/02/24</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: 02/24/2006; 24/02/2006; 02/24/06</li> +</ul> + +<h4 id="Decades">Decades</h4> + +<p>For decades, use the format "1990s". Don't use an apostrophe.</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: 1990s</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: 1990's</li> +</ul> + +<h4 id="Plurals_of_numerals">Plurals of numerals</h4> + +<p>For plurals of numerals add "s". Don't use an apostrophe.</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: 486s</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: 486's</li> +</ul> + +<h4 id="Commas">Commas</h4> + +<p>In running text, use commas only in five-digit and larger numbers.</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: 4000; 54,000</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: 4,000; 54000</li> +</ul> + +<h3 id="Punctuation">Punctuation</h3> + +<h4 id="Serial_comma">Serial comma</h4> + +<p><strong>Use the serial comma</strong>. The serial (also known as "Oxford") comma is the comma that appears before the conjunction in a series of three or more items.</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: I will travel on trains, planes, and automobiles.</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: I will travel on trains, planes and automobiles.</li> +</ul> + +<div class="note"> +<p>This is in contrast to the <a href="https://www.mozilla.org/en-US/styleguide/" title="https://www.mozilla.org/en-US/styleguide/">One Mozilla style guide</a>, which specifies that the serial comma is not to be used. MDN is an exception to this rule.</p> +</div> + +<h4 id="Apostrophes_and_quotation_marks">Apostrophes and quotation marks</h4> + +<p><strong>Do not use "curly" quotes and quotation marks.</strong> On MDN, we only use straight quotes and apostrophes. There are a couple of reasons for this. First, because we need to choose one or the other for consistency, and second, because if curly quotes or apostrophes make their way into code snippets (even inline ones), readers may copy and paste them and expect them to function, which they will not.</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: Please don't use "curly quotes."</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: Please don‘t use “curly quotes.”</li> +</ul> + +<h3 id="Spelling">Spelling</h3> + +<p>For words with variant spellings, always use their American English spelling. In general, use the first entry at <a href="http://www.dictionary.com/">Dictionary.com</a>, unless that entry is listed as a variant spelling or as being primarily used in a non-American form of English; for example, if you <a href="http://www.dictionary.com/browse/behaviour">look up "behaviour"</a>, you find the phrase "Chiefly British" followed by a link to the American standard form, "<a href="http://dictionary.reference.com/browse/behavior">behavior</a>". Do not use variant spellings.</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: localize, behavior</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: localise, behaviour</li> +</ul> + +<h3 id="Terminology">Terminology</h3> + +<dl> +</dl> + +<h4 id="HTML_elements">HTML elements</h4> + +<p>Use "elements" to refer to HTML and XML elements, rather than "tags". In addition, they should almost always be wrapped in "<>", and should be in the {{HTMLElement("code")}} style. When you reference a given element for the first time in a section, you should use the {{TemplateLink("HTMLElement")}} macro to create a link to the documentation for the element (unless you're writing within that element's reference document page).</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: the {{HTMLElement("span")}} element</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: the span tag</li> +</ul> + +<h4 id="Parameters_vs._arguments">Parameters vs. arguments</h4> + +<p>The preferred term on MDN is <strong>parameters</strong>. Please avoid the term "arguments" for consistency if at all possible.</p> + +<h4 id="User_interface_actions">User interface actions</h4> + +<p>In task sequences, describe user interface actions using the imperative mood. Identify the user interface element by its label and type.</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: Click the Edit button.</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: Click Edit.</li> +</ul> + +<h3 id="Voice">Voice</h3> + +<p>While the active voice is preferred, the passive voice is also acceptable, given the informal feel of our content. Try to be consistent, though.</p> + +<h2 id="Wiki_markup_and_usage">Wiki markup and usage</h2> + +<h3 id="Links">Links</h3> + +<p>Links are a large part of what makes a wiki a powerful learning and teaching tool. Below you'll find some basic information, but you can find a complete guide to <a href="/en-US/docs/MDN/Contribute/Editor/Links">creating and editing links on MDN</a> in our editor guide.</p> + +<p>We encourage you to create appropriate links among articles; they help improve navigation and discoverability of content, and they provide important context to search engines like Google to help them provide better results. Every page should have a good set of links from words or phrases to other pages that expand upon the relevant ideas. This can be used both to define terms and to provide more in-depth or detailed documentation about a topic, or to connect to a related page that offers examples or information that may be of further interest.</p> + +<p>You can easily create links not only among pages on MDN (internal links) but also to pages outside MDN (external links).</p> + +<p>There are two ways to create links: you explicitly create a link using the Link button in the editor's toolbar—or by pressing <kbd>Ctrl</kbd>+<kbd>K</kbd> (<kbd>Cmd</kbd>-<kbd>K</kbd> on the Mac)—or you can use MDN's powerful macro system to generate links automatically or based on an input value.</p> + +<p>When deciding what text to use as a link, there are a few guidelines you can follow:</p> + +<ul> + <li>Whenever a macro exists which will create the link you need, and you are able to do so, please do. <a href="/en-US/docs/MDN/Contribute/Editor/Links#Using_link_macros">Using macros to create links</a> will not only help you get it right, but will allow future improvements to MDN to automatically be applied to your link.</li> + <li>For an API name, use the entire string of the API term as written in your content. The easiest way to do this is to <a href="/en-US/docs/MDN/Contribute/Editor/Links#Linking_to_documentation_for_APIs">use the appropriate macro</a> to construct a properly-formatted link for you.</li> + <li>For a term for which you're linking to a page defining or discussing that term, use the name of the term and no additional text as the link's text. For example: + <ul> + <li><span class="correct"><strong>Correct</strong></span>: You can use <a href="/en-US/docs/Web/JavaScript">JavaScript</a> code to create dynamic applications on the Web.</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: You can use <a href="/en-US/docs/Web/JavaScript">JavaScript code</a> to create dynamic applications on the Web.</li> + </ul> + </li> + <li>Otherwise, when adding a useful link to prose, try to choose an action and object phrase, such as: + <ul> + <li><span class="correct"><strong>Correct</strong></span>: If you'd like to <a href="/en-US/docs/Mozilla/Developer_guide">contribute to the Firefox project</a>, your first step is to <a href="/en-US/docs/Mozilla/Developer_guide/Build_Instructions">download and build Firefox</a>.</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: <a href="/en-US/docs/Mozilla/Developer_guide">If you'd like to contribute to the Firefox project</a>, your first step is to <a href="/en-US/docs/Mozilla/Developer_guide/Build_Instructions">download and build</a> Firefox.</li> + </ul> + </li> +</ul> + +<h4 id="URL_schemes">URL schemes</h4> + +<p>For security reasons, you should only create links that use the following schemes:</p> + +<ul> + <li><code>http://</code></li> + <li><code>https://</code></li> + <li><code>ftp://</code></li> + <li><code>mailto:</code></li> +</ul> + +<p>Others may or may not work, but are not supported and will probably be removed by editorial staff.</p> + +<div class="note"> +<p>In particular, be sure not to use the <code>about:</code> or <code>chrome://</code> schemes, as they will not work. Similarly, the <code>javascript:</code> scheme is blocked by most modern browsers, as is <code>jar:</code>.</p> +</div> + +<h3 id="Page_tags">Page tags</h3> + +<p>Tags provide meta information about a page and/or indicate that a page has specific improvements needed to its content. Every page in the wiki should have tags. You can find details on tagging in our <a href="/en-US/docs/MDN/Contribute/Howto/Tag">How to properly tag pages</a> guide.</p> + +<p>The tagging interface lives at the bottom of a page while you're in edit mode, and looks something like this:</p> + +<p><img alt="Screenshot of the UX for adding and removing tags on MDN" src="https://mdn.mozillademos.org/files/7859/tag-interface.png" style="border-style: solid; border-width: 1px; height: 167px; width: 863px;"></p> + +<p>To add a tag, click in the edit box at the end of the tag list and type the tag name you wish to add. Tags will autocomplete as you type. Press enter (or return) to submit the new tag. Each article may have as many tags as needed. For example, an article about using JavaScript in AJAX programming might have both "JavaScript" and "AJAX" as tags.</p> + +<p>To remove a tag, just click the little "X" icon in the tag.</p> + +<h4 id="Tagging_pages_that_need_work">Tagging pages that need work</h4> + +<p>In addition to using tags to track information about the documentation's quality and content, we also use them to mark articles as needing specific types of work.</p> + +<h4 id="Tagging_obsolete_pages">Tagging obsolete pages</h4> + +<p>Use the following tags for pages that are not current:</p> + +<ul> + <li><em>Junk</em>: Use for spam, pages created by mistake, or content that is so bad that it should be deleted. Pages with this tag are deleted from time to time.</li> + <li><em>Obsolete</em>: Use for content that is technically superseded, but still valid in context. For example an HTML element that is obsolete in HTML5 is still valid in HTML 4.01. You can also use the <span class="nowiki">{{TemplateLink("obsolete_header")}}</span> macro to put a prominent banner on the topic.</li> + <li><em>Archive</em>: Use for content that is technically superseded and no longer useful. If possible, add a note to the topic referring readers to a more current topic. For example, a page that describes how to use the Mozilla CVS repository should refer readers to a current topic on using Mercurial repos. (If no corresponding current topic exists, use the <em>NeedsUpdate</em> tag, and add an explanation on the Talk page.) Pages with the Archive tag are eventually moved from the main content of MDN to the <a href="/en-US/docs/Archive">Archive</a> section.</li> +</ul> + +<h3 id="SEO_summary">SEO summary</h3> + +<p>The SEO summary provides a short description of a page. It will be reported as a summary of the article to robots crawling the site, and will then appear in search results for the page. It is also used by macros that automate the construction of landing pages inside MDN itself.</p> + +<p>By default, the first paragraph of the page is used as the SEO summary. However, you can override this behavior by marking a section with the <a href="/en-US/docs/Project:MDN/Contributing/Editor_guide/Editing#Formatting_styles">"SEO summary" style in the WYSIWYG editor</a>.</p> + +<h3 id="Landing_pages">Landing pages</h3> + +<p><strong>Landing pages</strong> are pages at the root of a topic area of the site, such as the main <a href="/en-US/docs/CSS" title="CSS">CSS</a> or <a href="/en-US/docs/HTML" title="HTML">HTML</a> pages. They have a standard format that consists of three areas:</p> + +<ol> + <li>A brief (typically one paragraph) overview of what the technology is and how it's used. See {{anch("Writing a landing page overview")}} for tips.</li> + <li>A two-column list of links with appropriate headings. See {{anch("Creating a page link list")}} for guidelines.</li> + <li>An <strong>optional</strong> "Browser compatibility" section at the bottom of the page.</li> +</ol> + +<h4 id="Creating_a_page_link_list">Creating a page link list</h4> + +<p>The link list section of an MDN landing page consists of two columns. These are created using the following HTML:</p> + +<pre class="brush: html notranslate"><div class="row topicpage-table"> + <div class="section"> + ... left column contents ... + </div> + <div class="section"> + ... right column contents ... + </div> +</div></pre> + +<p>The left column should be a list of articles, with an <code><h2></code> header at the top of the left column explaining that it's a list of articles about the topic (e.g., "Documentation and tutorials about foo"); this header should use the CSS class "Documentation". Below that is a <code><dl></code> list of articles with each article's link in a <code><dt></code> block and a brief one-or-two sentence summary of the article in the corresponding <code><dd></code> block.</p> + +<p>The right column should contain one or more of the following sections, in order:</p> + +<dl> + <dt>Getting help from the community</dt> + <dd>This should provide information on Matrix chat roomsand mailing lists available on the topic. The heading should use the class "Community".</dd> + <dt>Tools</dt> + <dd>A list of tools the user can look at to help with the use of the technology described in this section of MDN. The heading should use the class "Tools".</dd> + <dt>Related topics</dt> + <dd>A list of links to landing pages for other, related, technologies of relevance. The heading should use the class "Related_Topics".</dd> +</dl> + +<p><strong><<<finish this once we finalize the landing page standards>>></strong></p> + +<h2 id="Using_inserting_images">Using, inserting images</h2> + +<p>It's sometimes helpful to provide an image in an article you create or modify, especially if the article is very technical. To include an image:</p> + +<ol> + <li>Attach the desired image file to the article (at the bottom of every article in edit mode)</li> + <li>Create an image in the WYSIWYG editor</li> + <li>In the WYSIWYG editor, in the drop-down list of attachments, select the newly created attachment that is your image</li> + <li>Press OK.</li> +</ol> + +<h2 id="Other_references">Other references</h2> + +<h3 id="Preferred_style_guides">Preferred style guides</h3> + +<p>If you have questions about usage and style not covered here, we recommend referring to the <a href="http://www.economist.com/styleguide/introduction">Economist style guide</a> or, failing that, the <a href="https://www.amazon.com/Chicago-Manual-Style-16th/dp/0226104206">Chicago Manual of Style</a>.</p> + +<h3 id="Preferred_dictionary">Preferred dictionary</h3> + +<p>For questions of spelling, please refer to <a href="http://www.dictionary.com/">Dictionary.com</a>. The spelling checker for this site uses American English. Please do not use variant spellings (e.g., use <em>color</em> rather than <em>colour</em>).</p> + +<p>We will be expanding the guide over time, so if you have specific questions that aren't covered in this document, please post them on the <a href="https://discourse.mozilla.org/c/mdn">MDN discussion forum</a>, so we know what should be added.</p> + +<h3 id="MDN-specific">MDN-specific</h3> + +<ul> + <li><a href="/en-US/docs/MDN/Contribute/Structures/Macros/Commonly-used_macros" title="Project:en/Custom_Templates">Commonly-used macros</a> on MDN, with explanations.</li> +</ul> + +<h3 id="Language_grammar_spelling">Language, grammar, spelling</h3> + +<p>If you're interested in improving your writing and editing skills, you may find the following resources to be helpful.</p> + +<ul> + <li><a href="http://www.amazon.com/Writing-Well-30th-Anniversary-Nonfiction/dp/0060891548">On Writing Well</a>, by William Zinsser (Amazon link)</li> + <li><a href="http://www.amazon.com/Style-Basics-Clarity-Grace-4th/dp/0205830765/" title="http://www.amazon.com/Style-Lessons-Clarity-Grace-Edition/dp/0321898680">Style: The Basics of Clarity and Grace</a>, by Joseph Williams and Gregory Colomb (Amazon link)</li> + <li><a href="https://brians.wsu.edu/common-errors-in-english-usage/">Common Errors in English</a></li> + <li><a href="http://www-personal.umich.edu/~jlawler/aue.html">English Grammar FAQ</a> (alt.usage.english)</li> + <li><a href="http://www.angryflower.com/bobsqu.gif">Bob's quick guide to the apostrophe, you idiots</a> (funny)</li> + <li><a href="http://www.amazon.com/Merriam-Websters-Concise-Dictionary-English-Usage/dp/B004L2KNI2" title="http://www.amazon.com/Merriam-Websters-Concise-Dictionary-English-Usage/dp/B004L2KNI2">Merriam-Webster's Concise Dictionary of English Usage</a> (Amazon link): Scholarly but user-friendly, evidence-based advice; very good for non-native speakers, especially for preposition usage.</li> + <li><a href="http://english.stackexchange.com/">English Language and Usage StackExchange</a>: Question and answer site for English language usage.</li> +</ul> diff --git a/files/ar/mdn/index.html b/files/ar/mdn/index.html new file mode 100644 index 0000000000..351c99c218 --- /dev/null +++ b/files/ar/mdn/index.html @@ -0,0 +1,28 @@ +--- +title: مشروع شبكة مطوري موزيلا +slug: MDN +tags: + - صفحة هبوط + - معلومات عن الشبكة +translation_of: MDN +--- +<div>{{MDNSidebar}}</div> + +<p dir="rtl"><strong>شبكة مطوري موزيلا</strong> (MDN) هي موسوعة نقوم فيها بتوثيق كل ما يخص الأنترنت المفتوح، التقنيات، وغيرها من الموضوعات التي تخص المطورين. أي شخص مرحب به لإضافة وتحرير المحتوى. تجدر الإشارة إلى أنك لست بحاجة إلى أن تكون مبرمجا أو أن تعرف الكثير عن التكنولوجيا؛ حيث أن هناك العديد من المهام المختلفة التي يمكنك القيام بها، من البسيط (مراجعة وتصحيح الأخطاء الإملائية) إلى المتقدم (كتابة وثائق حول الواجهات البرمجية).</p> + +<p class="summary" dir="rtl">هدف مشروع MDN هو توثيق الويب الحر، تكنولوجيات موزيلا وكذا مشاريعها. ندعوك لمساعدتنا في ذلك!</p> + +<p dir="rtl">نحن في حاجة إلى مساعدتك! إن الأمر بسيط. ولا تقلق حيال طلب الإذن أو إرتكاب الأخطاء. من جهة أخرى، ندعوك للتعرف على <a href="/ar/docs/MDN/Community">مجتمع شبكة مطوري موزيلا</a>، فنحن هنا لمساعدتك! التوثيق أسفله سوف يساعدك على الانطلاق</p> + +<ul class="card-grid"> + <li><span><a href="/ar/docs/MDN/Getting_started">بداية سريعة للوافدين الجدد</a></span> + + <p>هل أنت جديد على شبكة مطوري موزيلا وتود تعلم كيفية جعلها أفضل؟ إذن إبدأ من هنا</p> + </li> + <li><span><a href="/en-US/docs/MDN/Contribute">أنا مستخدم متمرس</a></span> + <p>أدخل إلى دليلنا الشامل والمعمق لمساهمي شبكة مطوري موزيلا لتعلم المزيد</p> + </li> + <li><span><a class="new" href="/ar/docs/MDN/About/Promote" rel="nofollow">أخبر الباقي عنا</a></span> + <p>إذا كنت تحب شبكة مطوري موزيلا، ساعد إذن على إخبار الناس عنها! يمكنك إيجاد كل مايمكنه مساعدتك على ذلك من أدوات وإرشادات</p> + </li> +</ul> diff --git a/files/ar/mdn/kuma/index.html b/files/ar/mdn/kuma/index.html new file mode 100644 index 0000000000..8ab5de16e5 --- /dev/null +++ b/files/ar/mdn/kuma/index.html @@ -0,0 +1,25 @@ +--- +title: برمجية الموسوعة كوما +slug: MDN/Kuma +tags: + - صفحة هبوط + - معلومات عن الشبكة +translation_of: MDN/Kuma +--- +<div>{{MDNSidebar}}</div> + +<div>{{IncludeSubnav("/ar/docs/MDN")}}</div> + +<p dir="rtl">كوما (Kuma) هي برمجيّة موسوعة مبنيّة باستخدام جانغو، وهي البرمجيّة التي تعتمد عليها شبكة مطوري موزيلا في عملها.</p> + +<p>{{SubpagesWithSummaries}}</p> + +<h2 dir="rtl" id="شارك_بتطوير_المنصة">شارك بتطوير المنصة</h2> + +<p dir="rtl">للمشاركة في تطوير كوما:</p> + +<ul dir="rtl"> + <li>قم بزيارة <a href="https://github.com/mozilla/kuma">صفحة المشروع على جيتهاب</a>.</li> + <li>تحقق من <a href="https://github.com/mozilla/kuma/blob/master/CONTRIBUTING.md">دليل المساهمة</a>.</li> + <li>إن لزم الأمر، تعمق في <a href="http://kuma.readthedocs.org/en/latest/">توثيق البرمجيّة الشامل</a>.</li> +</ul> diff --git a/files/ar/mdn/tools/deleting_pages/index.html b/files/ar/mdn/tools/deleting_pages/index.html new file mode 100644 index 0000000000..14b1632e0a --- /dev/null +++ b/files/ar/mdn/tools/deleting_pages/index.html @@ -0,0 +1,21 @@ +--- +title: Deleting pages +slug: MDN/Tools/Deleting_pages +tags: + - Guide + - MDN Meta + - Page-level + - Tools +translation_of: MDN/Tools/Page_deletion +--- +<div>{{MDNSidebar}}</div><p>Only MDN administrators are able to delete pages. <span class="seoSummary">This article explains how to request that a page be removed from MDN.</span></p> + +<p>To arrange for a page to be deleted, you should do the following:</p> + +<ol> + <li><strong>Do not erase or change the page content.</strong> We want to have the record of the page as it was at deletion time.</li> + <li>Add the tag "junk" to the page. Do not remove other tags.</li> + <li>If the page is particularly urgently in need of deletion (for example, its content is inappropriate, offensive, or technically dangerous), <a href="mailto:mdn-admins@mozilla.org" title="Notify an administrator">notify an MDN administrator</a>.</li> +</ol> + +<p>An administrator will delete the page when possible, after confirming that deletion is appropriate</p> diff --git a/files/ar/mdn/tools/index.html b/files/ar/mdn/tools/index.html new file mode 100644 index 0000000000..179ed3a070 --- /dev/null +++ b/files/ar/mdn/tools/index.html @@ -0,0 +1,15 @@ +--- +title: MDN tools +slug: MDN/Tools +tags: + - Landing + - MDN Meta +translation_of: MDN/Tools +--- +<div>{{MDNSidebar}}</div> + +<div>{{IncludeSubnav("/ar/docs/MDN")}}</div> + +<p>MDN offers a number of features that make it easier to track progress, manage content, and keep up with the latest changes to the site.</p> + +<div>{{LandingPageListSubpages}}</div> diff --git a/files/ar/mdn_at_ten/index.html b/files/ar/mdn_at_ten/index.html new file mode 100644 index 0000000000..1df4f8a024 --- /dev/null +++ b/files/ar/mdn_at_ten/index.html @@ -0,0 +1,37 @@ +--- +title: MDN at 10 +slug: MDN_at_ten +translation_of: MDN_at_ten +--- +<p class="hidden"><span class="seoSummary">Celebrate 10 years of documenting your Web.</span></p> + +<div class="column-container"> +<div class="column-8"> +<h2 id="The_history_of_MDN">The history of MDN</h2> + +<p>In early 2005, a small team of idealists set out to create a new, free, community-built online resource for all Web developers. Their brilliant but offbeat idea grew into today’s Mozilla Developer Network—the premier resource for all open Web technologies. Ten years later, our global community is bigger than ever, and together we’re still creating documentation, sample code and learning resources for all open Web technologies, including CSS, HTML, JavaScript and everything else that makes the open Web as powerful as it is.</p> + +<p><a class="learnmore" href="/en-US/docs/MDN_at_ten/History_of_MDN">Learn more <span class="offscreen">about the history</span></a></p> + + +<h2 id="Contributing_to_MDN">Contributing to MDN</h2> + +<p>For ten years, the MDN community has been documenting the open Web. From fixing simple typos to writing entire suites of an entirely new API, everyone has something to offer and no contribution is too large or too small. We have over 90,000 pages of content that have been written or translated by members of our outstanding community of Mozillians. You can become one of them.</p> + +<p><a class="learnmore" href="/en-US/docs/MDN_at_ten/Contributing_to_MDN">Learn more <span class="offscreen">about contributing</span></a></p> + +<p> </p> + +<p> </p> +</div> + +<div class="column-4">{{TenthCampaignQuote}}</div> + +<h2 id="Subnav">Subnav</h2> + +<ol> + <li><a href="/en-US/docs/MDN_at_ten/">MDN at 10</a></li> + <li><a href="/en-US/docs/MDN_at_ten/History_of_MDN">The history of MDN</a></li> + <li><a href="/en-US/docs/MDN_at_ten/Contributing_to_MDN">Contributing to MDN</a></li> +</ol> +</div> diff --git a/files/ar/midas/index.html b/files/ar/midas/index.html new file mode 100644 index 0000000000..975b7bdfa8 --- /dev/null +++ b/files/ar/midas/index.html @@ -0,0 +1,330 @@ +--- +title: Midas +slug: Midas +tags: + - DOM + - Midas + - NeedsContent + - NeedsHelp + - NeedsTranslation + - Reference + - Référence(2) + - TopicStub +translation_of: Mozilla/Projects/Midas +--- +<h2 id="Introduction" name="Introduction">Introduction</h2> + +<p>Midas is the code name for Gecko's built-in rich text editor. Midas can be enabled via JavaScript on an HTML document. When Midas is enabled, the document becomes editable by the user. Scripting for Midas is based on the <a href="http://msdn.microsoft.com/en-us/library/ms533049.aspx">DHTML commands</a> supported by Internet Explorer. Internet Explorer supports the ability to make an entire document editable by setting the <code>designMode</code> property of the {{domxref("document")}} object; this is how Midas is invoked in Gecko. Internet Explorer also supports the ability to edit specific elements using the <code>contentEditable</code> attribute; Starting with Firefox 3, Gecko also supports <code>contentEditable</code>. Once Midas is invoked, a few more methods of the <code>document</code> object become available.</p> + +<h2 id="Properties" name="Properties">Properties</h2> + +<dl> + <dt><a href="/en-US/docs/Midas/designMode">document.designMode</a></dt> + <dd>By setting this property to "on", the document becomes editable.</dd> +</dl> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p>Since an entire document becomes editable, authors often load the editable document into an <code>IFRAME</code> and do the bulk of the scripting in the parent document. According to <a href="http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html#ID-50708718">standards</a>, The <code>IFRAME</code> element has the <code>contentDocument</code> property that refers to the document in the inline frame. It also has a property called <code>contentWindow</code> that refers to the window object inside the inline frame. This also avoids problems with {{bug(198155)}}.</p> + +<p>In addition to the built-in commands, advanced editing can be done by manipulating the {{domxref("Selection")}} and {{domxref("range")}} objects. It is beneficial to be familiar with these objects when working with an editable document.</p> + +<h2 id="Examples" name="Examples">Examples</h2> + +<p>This example shows the basic structure described in the Notes section :</p> + +<pre><html> + <head> + <title>Simple Edit Box</title> + </head> + <body> + <iframe + id="MidasForm" + src="about:blank" + onload="this.contentDocument.designMode='on';" + ></iframe> + </body> +</html> +</pre> + +<h2 id="Methods" name="Methods">Methods</h2> + +<dl> + <dt>{{domxref("Document.execCommand")}}</dt> + <dd>Executes the given command.</dd> + <dt>{{domxref("Document.queryCommandEnabled")}}</dt> + <dd>Determines whether the given command can be executed on the document in its current state.</dd> + <dt>{{domxref("Document.queryCommandIndeterm")}}</dt> + <dd>Determines whether the current selection is in an indetermined state.</dd> + <dt>{{domxref("Document.queryCommandState")}}</dt> + <dd>Determines whether the given command has been executed on the current selection.</dd> + <dt>{{domxref("Document.queryCommandValue")}}</dt> + <dd>Determines the current value of the document, range, or current selection for the given command.</dd> +</dl> + +<h2 id="Supported_Commands" name="Supported_Commands">Supported Commands</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Command</td> + <td class="header">Value</td> + <td class="header">Description</td> + </tr> + <tr> + <td>backcolor</td> + <td>A color code.</td> + <td>This command will set the background color of the document.</td> + </tr> + <tr> + <td>bold</td> + <td> </td> + <td>If there is no selection, the insertion point will set bold for subsequently typed characters. + <p>If there is a selection and all of the characters are already bold, the bold will be removed. Otherwise, all selected characters will become bold.</p> + </td> + </tr> + <tr> + <td>contentReadOnly</td> + <td> </td> + <td>This command will make the editor readonly(true)or editable(false). Anticipated usage is for temporarily disabling input while something else is occurring elsewhere in the web page.</td> + </tr> + <tr> + <td>copy</td> + <td> </td> + <td>If there is a selection, this command will copy the selection to the clipboard. If there isn't a selection, nothing will happen. + <p>note: this command won't work without setting a pref or using signed JS. See: <a href="http://www.mozilla.org/editor/midasdemo/securityprefs.html">more about security preferences</a></p> + + <p>note: the shortcut key will automatically trigger this command (typically accel-C) with or without the signed JS or any code on the page to handle it.</p> + </td> + </tr> + <tr> + <td>createlink</td> + <td>A URI.</td> + <td>This command will not do anything if no selection is made. If there is a selection, a link will be inserted around the selection with the url parameter as the href of the link.</td> + </tr> + <tr> + <td>cut</td> + <td> </td> + <td>If there is a selection, this command will copy the selection to the clipboard and remove the selection from the edit control. If there isn't a selection, nothing will happen. + <p>note: this command won't work without setting a pref or using signed JS. See: <a href="http://www.mozilla.org/editor/midasdemo/securityprefs.html">more about security preferences</a></p> + + <p>note: the shortcut key will automatically trigger this command (typically accel-X) with or without the signed JS or any code on the page to handle it.</p> + </td> + </tr> + <tr> + <td>decreasefontsize</td> + <td> </td> + <td>This command will add a <small> tag around selection or at insertion point.</td> + </tr> + <tr> + <td>delete</td> + <td> </td> + <td>This command will delete all text and objects that are selected. If no text is selected it deletes one character to the right. This is similar to the <em>Delete</em> button on the keyboard.</td> + </tr> + <tr> + <td>fontname</td> + <td>A font name</td> + <td>This command will set the font face for a selection or at the insertion point if there is no selection. + <p>The given string is such as would be used in the "face" attribute of the font tag, i.e., a comma-separated list of font names.</p> + </td> + </tr> + <tr> + <td>fontsize</td> + <td>A number</td> + <td>This command will set the fontsize for a selection or at the insertion point if there is no selection. + <p>The given number is such as would be used in the "size" attribute of the font tag.</p> + </td> + </tr> + <tr> + <td>forecolor</td> + <td>A color code</td> + <td>This command will set the text color of the selection or at the insertion point.</td> + </tr> + <tr> + <td>formatblock</td> + <td>H1, H2, H3, H4, H5, H6, P, DIV, ADDRESS, BLOCKQUOTE (more?)</td> + <td>The selection surrounded by the given block element.</td> + </tr> + <tr> + <td>heading</td> + <td>H1, H2, H3, H4, H5, H6</td> + <td>Selected block will be formatted as the given type of heading.</td> + </tr> + <tr> + <td>hilitecolor</td> + <td>A color code</td> + <td>This command will set the hilite color of the selection or at the insertion point. It only works with styleWithCSS enabled.</td> + </tr> + <tr> + <td>increasefontsize</td> + <td> </td> + <td>This command will add a <big> tag around selection or at insertion point.</td> + </tr> + <tr> + <td>indent</td> + <td> </td> + <td>Indent the block where the caret is located. If the caret is inside a list, that item becomes a sub-item one level deeper.</td> + </tr> + <tr> + <td>insertbronreturn</td> + <td>true/false</td> + <td>Selects whether pressing return inside a paragraph creates another paragraph or just inserts a <br> tag.</td> + </tr> + <tr> + <td>inserthorizontalrule</td> + <td>null/string (when string is the Line's id)</td> + <td>This command will insert a horizontal rule (line) at the insertion point. + <p>Does it delete the selection? Yes!</p> + </td> + </tr> + <tr> + <td>inserthtml</td> + <td>A string.</td> + <td>This command will insert the given html into the <body> in place of the current selection or at the caret location. + <p>The given string is the HTML to insert.</p> + </td> + </tr> + <tr> + <td>insertimage</td> + <td>A URI.</td> + <td>This command will insert an image (referenced by the given url) at the insertion point.</td> + </tr> + <tr> + <td>insertorderedlist</td> + <td> </td> + <td>Depends on the selection. If the caret is not inside a non-LI block, that block becomes the first LI and an OL. If the caret is inside a bulleted item, the bulleted item becomes a numbered item.</td> + </tr> + <tr> + <td>insertunorderedlist</td> + <td> </td> + <td>Depends on the selection. If the caret is not inside a non-LI block, that block becomes the first LI and UL. If the caret is inside a numbered item, the numbered item becomes a bulleted item.</td> + </tr> + <tr> + <td>insertparagraph</td> + <td> </td> + <td>Inserts a new paragraph.</td> + </tr> + <tr> + <td>italic</td> + <td> </td> + <td>If there is no selection, the insertion point will set italic for subsequently typed characters. + <p>If there is a selection and all of the characters are already italic, the italic will be removed. Otherwise, all selected characters will become italic.</p> + </td> + </tr> + <tr> + <td>justifycenter</td> + <td> </td> + <td>Center-aligns the current block.</td> + </tr> + <tr> + <td>justifyfull</td> + <td> </td> + <td>Fully-justifies the current block.</td> + </tr> + <tr> + <td>justifyleft</td> + <td> </td> + <td>Left-aligns the current block.</td> + </tr> + <tr> + <td>justifyright</td> + <td> </td> + <td>Right aligns the current block.</td> + </tr> + <tr> + <td>outdent</td> + <td> </td> + <td>Outdent the block where the caret is located. If the block is not indented prior to calling outdent, nothing will happen. + <p>If the caret is in a list item, the item will bump up a level in the list or break out of the list entirely.</p> + </td> + </tr> + <tr> + <td>paste</td> + <td> </td> + <td>This command will paste the contents of the clipboard at the location of the caret. If there is a selection, it will be deleted prior to the insertion of the clipboard's contents. + <p>note: this command won't work without setting a pref or using signed JS. user_pref("capability.policy.policynames", "allowclipboard"); user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess"); See: <a href="http://www.mozilla.org/editor/midasdemo/securityprefs.html">more about security preferences</a></p> + + <p>note: the shortcut key will automatically trigger this command (typically accel-V) with or without the signed JS or any code on the page to handle it.</p> + </td> + </tr> + <tr> + <td>redo</td> + <td> </td> + <td>This command will redo the previous undo action. If undo was not the most recent action, this command will have no effect. + <p>note: the shortcut key will automatically trigger this command (typically accel-shift-Z)</p> + </td> + </tr> + <tr> + <td>removeformat</td> + <td> </td> + <td>Removes inline formatting from the current selection.</td> + </tr> + <tr> + <td>selectall</td> + <td> </td> + <td>This command will select all of the contents within the editable area. + <p>note: the shortcut key will automatically trigger this command (typically accel-A)</p> + </td> + </tr> + <tr> + <td>strikethrough</td> + <td> </td> + <td>If there is no selection, the insertion point will set strikethrough for subsequently typed characters. + <p>If there is a selection and all of the characters are already striked, the strikethrough will be removed. Otherwise, all selected characters will have a line drawn through them.</p> + </td> + </tr> + <tr> + <td>styleWithCSS</td> + <td> </td> + <td>This command is used for toggling the format of generated content. By default (at least today), this is true. An example of the differences is that the "bold" command will generate <b> if the styleWithCSS command is false and generate css style attribute if the styleWithCSS command is true.</td> + </tr> + <tr> + <td>subscript</td> + <td> </td> + <td>If there is no selection, the insertion point will set subscript for subsequently typed characters. + <p>If there is a selection and all of the characters are already subscripted, the subscript will be removed. Otherwise, all selected characters will be drawn slightly lower than normal text.</p> + </td> + </tr> + <tr> + <td>superscript</td> + <td> </td> + <td>If there is no selection, the insertion point will set superscript for subsequently typed characters. + <p>If there is a selection and all of the characters are already superscripted, the superscript will be removed. Otherwise, all selected characters will be drawn slightly higher than normal text.</p> + </td> + </tr> + <tr> + <td>underline</td> + <td> </td> + <td>If there is no selection, the insertion point will set underline for subsequently typed characters. + <p>If there is a selection and all of the characters are already underlined, the underline will be removed. Otherwise, all selected characters will become underlined.</p> + </td> + </tr> + <tr> + <td>undo</td> + <td> </td> + <td>This command will undo the previous action. If no action has occurred in the document, then this command will have no effect. + <p>note: the shortcut key will automatically trigger this command (typically accel-Z)</p> + </td> + </tr> + <tr> + <td>unlink</td> + <td> </td> + <td>If the insertion point is within a link or if the current selection contains a link, the link will be removed and the text will remain.</td> + </tr> + <tr> + <td colspan="3">{{Deprecated_header}}</td> + </tr> + <tr> + <td>readonly</td> + <td> </td> + <td>This command has been replaced with contentReadOnly. It takes the same values as contentReadOnly, but the meaning of true and false are inversed.</td> + </tr> + <tr> + <td>useCSS</td> + <td> </td> + <td>This command has been replaced with styleWithCSS. It takes the same values as styleWithCSS, but the meaning of true and false are inversed.</td> + </tr> + </tbody> +</table> + +<p> </p> diff --git a/files/ar/midas/security_preferences/index.html b/files/ar/midas/security_preferences/index.html new file mode 100644 index 0000000000..41ade1f168 --- /dev/null +++ b/files/ar/midas/security_preferences/index.html @@ -0,0 +1,68 @@ +--- +title: Midas editor module security preferences +slug: Midas/Security_preferences +translation_of: Mozilla/Projects/Midas/Security_preferences +--- +<div class="note"> +<div class="twocolumns"> +<p><strong>Note:</strong> If you've reached this page from a message box in Firefox or another Mozilla product, try using keyboard shortcuts for the Cut, Copy, and Paste commands:</p> +</div> + +<ul> + <li>Copy: Ctrl+C or Ctrl+Insert (command+C on Mac)</li> + <li>Paste: Ctrl+V or Shift+Insert (command+V on Mac)</li> + <li>Cut: Ctrl+X or Shift+Delete (command+X on Mac)</li> +</ul> + +<p>The information on the rest of this page is for Web developers and advanced users. Please do not try to modify this page.</p> +</div> + +<p>To protect users' private information, unprivileged scripts cannot invoke the Cut, Copy, and Paste commands in Midas, which is Mozilla's rich text editor component. This means that the corresponding buttons on the <a href="http://www-archive.mozilla.org/editor/midasdemo/" title="http://www- +archive.mozilla.org/editor/midasdemo/">Mozilla Rich Text Editing demo page</a> will not work. To enable these functions, you must modify your browser preferences.</p> + +<div class="warning"> +<p><strong>Warning:</strong> Changing these preferences can leave your browser insecure, especially if you grant permission to untrusted sites. Only change these settings as needed to try the demo above and to test your own add-on or Firefox-internal code, and be sure to restore the default settings when you're done!</p> +</div> + +<h2 id="Changing_the_preferences_in_Firefox">Changing the preferences in Firefox</h2> + +<ol> + <li>Quit Firefox. If you have Quick Launch running (on Windows, this is an icon in the toolbar), quit that too.</li> + <li><a class="external" href="http://support.mozilla.com/en-US/kb/Profiles">Find your Firefox profile directory</a>.</li> + <li>Open the <code class="filename">user.js</code> file from that directory in a text editor. If there's no <code>user.js</code> file, create one.</li> + <li>Add these lines to <code class="filename">user.js</code>: + <pre class="code">user_pref("capability.policy.policynames", "allowclipboard"); +user_pref("capability.policy.allowclipboard.sites", "https://www-archive.mozilla.org"); +user_pref("capability.policy.allowclipboard.Clipboard.cutcopy", "allAccess"); +user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess"); +</pre> + </li> + <li>Change the URL <span class="external"><code class="url">https://www.mozilla.org</code></span> to the site for which you want to enable this function.</li> + <li>Save the file and restart Firefox. The Clipboard buttons in the demo, or similar buttons on the sites you listed, should now function.</li> +</ol> + +<div class="note"><strong>Note:</strong> The preference is site as well as protocol specific. For example: + +<pre>user_pref("capability.policy.allowclipboard.sites", "http://www-archive.mozilla.org") +</pre> + +<p>is not the same as:</p> + +<pre>user_pref("capability.policy.allowclipboard.sites", "https://www-archive.mozilla.org") +</pre> + +<p>This is because the first uses <a href="/en-US/docs/HTTP" title="/en-US/docs/HTTP">HTTP</a> while the second uses HTTPS.</p> +If you want to allow multiple URLs to access the Paste operation, separate the URLs with a space. For example: + +<pre>user_pref("capability.policy.allowclipboard.sites", "https://www-archive.mozilla.org https://developer.mozilla.org") +</pre> +</div> + +<p>Again, keep in mind the security risks involved here and be sure to remove permission to access the clipboard once you no longer need it enabled.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li id="For_more_information_about_security_policies.2C_see_this_article_about_Configurable_Security_Policies.">For more information about security policies, see this article about <a href="http://www.mozilla.org/projects/security/components/ConfigPolicy.html" title="http://www.mozilla.org/projects/security/components/ConfigPolicy.html">Configurable Security Policies</a>.</li> + <li><a href="/en-US/docs/Web/Security/CSP">CSP</a> and <a href="/en-US/docs/Web/Security/CSP/CSP_policy_directives">Policy Directives</a>.</li> +</ul> diff --git a/files/ar/mozilla/add-ons/add-on_guidelines/index.html b/files/ar/mozilla/add-ons/add-on_guidelines/index.html new file mode 100644 index 0000000000..a2ceecab7b --- /dev/null +++ b/files/ar/mozilla/add-ons/add-on_guidelines/index.html @@ -0,0 +1,116 @@ +--- +title: Add-on guidelines +slug: Mozilla/Add-ons/Add-on_guidelines +translation_of: 'https://extensionworkshop.com/documentation/publish/add-on-policies/' +--- +<p>These add-on guidelines were created to foster an open and diverse add-on developer community while ensuring an excellent user experience. They apply to all add-ons and add-on updates regardless of where they are hosted, and also apply to customizations performed by installers that configure Firefox without using an add-on. Add-ons hosted on <a class="external text" href="https://addons.mozilla.org/" rel="nofollow">AMO</a> are subject to <a href="https://addons.mozilla.org/developers/docs/policies" title="https://addons.mozilla.org/developers/docs/policies">additional policies</a>.</p> +<h2 id="Be_Transparent">Be Transparent</h2> +<ul> + <li>Add-ons must either be installed using the add-on web install system, or be approved by the user using the <a class="external text" href="https://blog.mozilla.org/addons/2011/08/11/strengthening-user-control-of-add-ons/" rel="nofollow">install opt-in dialog</a>. + <ul> + <li>We want our users to know what they are installing so that they are not unpleasantly surprised by changes they did not expect. We also want them to know what to remove if they decide not to keep it.</li> + <li>Add-ons installed through application installers should <a class="external text" href="/en-US/docs/Adding_Extensions_using_the_Windows_Registry" rel="nofollow">use the Windows Registry</a> or equivalent global install methods so that Firefox displays the opt-in screen. The opt-in screen must not be tampered with in any way, including overlaying additional information or images on top of it.</li> + </ul> + </li> + <li>Add-ons must always be possible to uninstall or disable from the Add-ons Manager. + <ul> + <li>Add-ons installed globally using the Windows registry or global extension directories cannot be uninstalled (<a class="external text" href="https://bugzilla.mozilla.org/show_bug.cgi?id=640775" rel="nofollow">bug 640775</a>), but they can be disabled to the same effect.</li> + </ul> + </li> + <li>Add-ons must use a <a class="external text" href="/en-US/docs/Install_manifests#id" rel="nofollow">single unique ID</a> during their entire lifetime. + <ul> + <li>Using the same ID for multiple products, or multiple IDs for a single product, can lead to problems with automatic updates as well as blocklisting conflicts. Add-ons may change their IDs due to ownership changes, as they commonly use an email address-like format ( + <i> + e.g.,</i> + personasplus@mozilla.com).</li> + </ul> + </li> + <li>Add-ons must not use brand names, trademarks, or other terms in ways that deceive users. Using Mozilla trademarks must follow <a class="external text" href="http://www.mozilla.org/foundation/trademarks/policy.html" rel="nofollow">our trademark policy</a>.</li> + <li>Add-ons should clearly communicate their intended purpose and active features, including features introduced through updates. + <ul> + <li>While we understand and support add-on developers who choose to monetize their products, this should not come at the expense of users' browsing experience. If an add-on inserts advertisements, affiliate codes, sponsored search results, or the like, into web pages, the user should be made aware of this when the add-on is installed. Likewise, if some features require payment to use, or require payment to remain active after a trial period, users should be made aware of this.</li> + </ul> + </li> +</ul> +<h2 id="Be_Respectful_to_Users">Be Respectful to Users</h2> +<ul> + <li>Add-ons must remove all introduced code, executables, and application configuration changes when they are uninstalled. + <ul> + <li>Uninstalling an add-on using the regular uninstall process should generally suffice. This guideline primarily applies to changes made to preferences such as the homepage, default search URL, network settings, and so forth. These preferences should be restored to their previous values when the add-on is uninstalled. Most add-ons can easily accomplish this by making such changes via a <a class="external text" href="/en-US/docs/Building_an_Extension#Defaults_Files" rel="nofollow">default preferences file</a>.</li> + </ul> + </li> + <li>Add-ons should respect the users' choices and not make unexpected changes, or limit users' ability to revert them. + <ul> + <li>For instance, users generally do not expect an add-on to change the Firefox homepage. Asking users to opt-in to such extra changes is recommended. Making them difficult or impossible to revert is strongly discouraged.</li> + </ul> + </li> + <li>Add-ons should make it clear how private user data is being used. + <ul> + <li>Add-ons which send user data over the Internet should generally provide a Privacy Policy, ideally concise and easily readable.</li> + </ul> + </li> + <li>Add-on developers should provide a mechanism for them to be contacted. + <ul> + <li>While developers are not required to provide a support channel for users, it is recommended. All add-on developers should have a contact form or public email address so that they can be contacted in case of emergencies, such as guideline violations that could lead to blocklisting.</li> + </ul> + </li> +</ul> +<h2 id="Be_Safe">Be Safe</h2> +<ul> + <li>Add-ons must not cause harm to users' data, system, or online identities.</li> + <li>Add-ons must not transmit users' private data unsafely, or expose it to third parties unnecessarily. + <ul> + <li>Private data should always be sent over a secure connection. This includes browsing data such as visited URLs and bookmarks.</li> + <li>Making the browser easier to fingerprint by adding text to the User-Agent string or adding custom headers is also a privacy concern, and should be avoided.</li> + </ul> + </li> + <li>Add-ons must not create or expose application or system vulnerabilities. + <ul> + <li>Security bugs happen, but once discovered they need to be addressed immediately. A popular add-on with a security vulnerability is a valuable attack vector for hackers, and in such cases we will move quickly to blocklist the add-on if there is no prompt response from the developer.</li> + </ul> + </li> + <li>Add-ons must not tamper with the application or blocklist update systems.</li> + <li>Add-ons should not store any browsing data while in Private Browsing Mode. + <ul> + <li>It's worth stressing that PBM is about avoiding storing + <i> + local</i> + data while browsing, not about sending data elsewhere. To learn more about PBM we recommend reading <a class="external text" href="http://ehsanakhgari.org/tag/privatebrowsing" rel="nofollow">Ehsan's blog posts</a> about it.</li> + </ul> + </li> +</ul> +<h2 id="Be_Stable">Be Stable</h2> +<ul> + <li>Add-ons must not cause hangs or crashes.</li> + <li>Add-ons should not break or disable core application features. + <ul> + <li>This includes features like tabbed browsing, Private Browsing Mode, and the location bar. Add-ons that are specifically meant to do this are exempt.</li> + </ul> + </li> + <li>Add-ons should not cause memory leaks, or unnecessarily consume large amounts of memory.</li> + <li>Add-ons should not slow down the application or system significantly.</li> + <li>Add-ons should not consume network resources to an extent that affects regular application usage. + <ul> + <li>Downloading large amounts of data without user awareness can significantly disrupt regular browsing, and may result in unexpected charges for users who have network usage limitations (notably on mobile).</li> + </ul> + </li> +</ul> +<h2 id="Exceptions">Exceptions</h2> +<ul> + <li>Add-ons can break some of these guidelines if that's their intended purpose and there isn't malicious intent ( + <i> + e.g.,</i> + a security exploit proof of concept).</li> + <li>Add-ons deployed by administrators within workplaces, schools, kiosks, and so forth, are exempt from most guidelines.</li> + <li>As add-ons can only run clean up code if they are uninstalled while Firefox is running and they are enabled, we do not require that they attempt to clean up after themselves when they are uninstalled under other circumstances. Application installers that configure Firefox without add-ons should revert any changes when uninstalled.</li> + <li>Add-ons may leave behind preferences changes in private preference branches which do not affect Firefox when the add-on is not active, so that any previous add-on configuration is not lost if the user decides to re-install the add-on in the future.</li> +</ul> +<p>Other exceptions may apply.</p> +<h2 id="Enforcement">Enforcement</h2> +<p>Add-ons that do not follow these guidelines may qualify for blocklisting, depending on the extent of the violations. Guidelines qualified with the word + <i> + must</i> + are especially important, and violations thereof will most likely result in a blocklisting nomination.</p> +<p>The Add-ons Team will do their best to contact the add-on's developers and provide a reasonable time frame for the problems to be corrected before a block is put in place. If an add-on is considered malicious or its developers have proven unreachable or unresponsive, or in case of repeat violations, blocklisting may be immediate.</p> +<p>Guideline violations should be <a class="external text" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Tech%20Evangelism&component=Add-ons" rel="nofollow">reported via Bugzilla</a>, under Tech Evangelism > Add-ons. Questions can be posted in the <a class="external text" href="irc://irc.mozilla.org/addons" rel="nofollow">#addons IRC channel</a>.</p> +<p>These guidelines may change in the future. All updates will be announced in the <a class="external text" href="https://blog.mozilla.org/addons/" rel="nofollow">Add-ons Blog</a>.</p> diff --git a/files/ar/mozilla/add-ons/amo/index.html b/files/ar/mozilla/add-ons/amo/index.html new file mode 100644 index 0000000000..e1684b2100 --- /dev/null +++ b/files/ar/mozilla/add-ons/amo/index.html @@ -0,0 +1,15 @@ +--- +title: AMO +slug: Mozilla/Add-ons/AMO +tags: + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Add-ons/AMO +--- +<p>Pages documenting <a href="https://addons.mozilla.org/en-US/firefox/">addons.mozilla.org</a>:</p> + +<p>{{Listsubpages("/en-US/Add-ons/AMO", 10)}}</p> + +<p> </p> + +<p> </p> diff --git a/files/ar/mozilla/add-ons/amo/policy/index.html b/files/ar/mozilla/add-ons/amo/policy/index.html new file mode 100644 index 0000000000..669d7f8f2d --- /dev/null +++ b/files/ar/mozilla/add-ons/amo/policy/index.html @@ -0,0 +1,21 @@ +--- +title: AMO Policies +slug: Mozilla/Add-ons/AMO/Policy +tags: + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Add-ons/AMO/Policy +--- +<p>{{AddonSidebar}}</p> + +<p>Mozilla is committed to ensuring an excellent experience for both our users and developers of add-ons. Please review the policies below before submitting your add-on.</p> + +<dl> + <dd></dd><dt><a href="/Mozilla/Add-ons/AMO/Policy/Agreement">Developer Agreement</a></dt> +<dd>Effective January 5, 2016</dd> <dt><a href="/Mozilla/Add-ons/AMO/Policy/Reviews">Review Process</a></dt> +<dd>Add-ons extend the core capabilities of Firefox, allowing users to modify and personalize their Web experience. A healthy add-on ecosystem, built on trust, is vital for developers to be successful and users to feel safe making Firefox their own. For these reasons, Mozilla requires all add-ons to comply with the following set of policies on acceptable practices. The below is not intended to serve as legal advice, nor is it intended to serve as a comprehensive list of terms to include in your add-on’s privacy policy.</dd> <dt><a href="/Mozilla/Add-ons/AMO/Policy/Featured">Featured Add-ons</a></dt> +<dd>How up-and-coming add-ons become featured and what's involved in the process. </dd> <strong><a href="/en-US/Add-ons#Contact_us">Contacting us</a></strong> + + <p> How to get in touch with us regarding these policies or your add-on.</p> + +</dl> diff --git a/files/ar/mozilla/add-ons/index.html b/files/ar/mozilla/add-ons/index.html new file mode 100644 index 0000000000..3e0a66abdb --- /dev/null +++ b/files/ar/mozilla/add-ons/index.html @@ -0,0 +1,92 @@ +--- +title: Add-ons +slug: Mozilla/Add-ons +tags: + - Add-ons + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Add-ons +--- +<div class="summary"><font><font>تعديل وتوسيع تطبيقات موزيلا</font></font></div> + +<p><span class="seoSummary"><font><font>تضيف الإضافات وظائف جديدة إلى </font><font>تطبيقات </font></font><a href="/en-US/docs/Mozilla/Gecko"><font><font>Gecko-</font></font></a><font><font> based مثل Firefox و SeaMonkey و Thunderbird. </font></font></span><strong> </strong><font><font>هناك نوعان رئيسيان من الوظائف الإضافية: </font></font><a href="#Extensions"><font><font>الإضافات</font></font></a><font><font> تضيف ميزات جديدة إلى التطبيق ، بينما تقوم </font></font><a href="#Themes"><font><font>السمات</font></font></a><font><font> بتعديل واجهة المستخدم الخاصة بالتطبيق.</font></font></p> + +<p><font><font>بالنسبة إلى كل من الإضافات والمظاهر ، تشغل Mozilla مستودعًا في </font></font><a href="https://addons.mozilla.org/"><font><font>addons.mozilla.org</font></font></a><font><font> ، والمعروف أيضًا باسم AMO. </font><font>عند </font></font><a href="/en-US/Add-ons/Submitting_an_add-on_to_AMO"><font><font>إرسال إضافات إلى AMO</font></font></a><font><font> يتم مراجعتها ، وبعد اجتياز المراجعة يتم إتاحتها للمستخدمين. </font><font>لا يتعين عليك تقديم إضافات إلى AMO ، ولكن إذا قمت بذلك ، يمكن للمستخدمين الوثوق في حقيقة أنهم قد تمت مراجعتهم ، ويمكنك الاستفادة من رؤية AMO كمصدر للوظائف الإضافية المفيدة.</font></font></p> + +<p><font><font>يمكن أن تؤثر الإضافات بشكل كبير على سلوك التطبيق الذي يستضيفها. </font><font>لقد طورنا </font></font><a href="/en-US/docs/Mozilla/Add-ons/Add-on_guidelines"><font><font>مجموعة من الإرشادات</font></font></a><font><font> للمساعدة في ضمان تقديم تجربة جيدة للمستخدمين. </font><font>تنطبق هذه الإرشادات على جميع أنواع الإضافات ، سواء تم استضافتها على </font></font><a href="https://addons.mozilla.org/"><font><font>addons.mozilla.org</font></font></a><font><font> أم لا.</font></font></p> + +<hr> +<h2 id="ملحقات"><a name="Extensions"><font><font>ملحقات</font></font></a></h2> + +<p><font><font>تضيف الإضافات وظائف جديدة إلى تطبيقات Mozilla مثل Firefox و Thunderbird. </font><font>يمكنهم إضافة ميزات جديدة إلى المتصفح ، مثل طريقة مختلفة لإدارة علامات التبويب ، ويمكنهم تعديل محتوى الويب لتحسين إمكانية الاستخدام أو الأمان لمواقع ويب معينة.</font></font></p> + +<p><font><font>هناك ثلاثة أساليب مختلفة يمكنك استخدامها لإنشاء إضافات: الإضافات المستندة إلى SDK الإضافي ، وإضافات غير قابلة لإعادة التشغيل يدويًا ، وإضافات التراكب.</font></font></p> + +<ul class="card-grid"> + <li><span><a href="https://developer.mozilla.org/en-US/Add-ons/SDK"><font><font>ملحقات SDK للإضافة قم</font></font></a></span><br> + <font><font>بتطوير</font><span><a href="https://developer.mozilla.org/en-US/Add-ons/SDK"><font> إضافات</font></a></span><font> إعادة التشغيل باستخدام مجموعة من واجهات برمجة تطبيقات جافا سكريبت عالية المستوى.</font></font></li> + <li><span><a href="/en-US/Add-ons/Bootstrapped_extensions"><font><font>ملحقات Restartless قم</font></font></a></span><br> + <font><font>بتطوير ملحقات لا تتطلب إعادة تشغيل المستعرض.</font></font></li> + <li><a href="/en-US/Add-ons/Overlay_Extensions"><span><font><font>ملحقات التراكب قم</font></font></span></a><br> + <font><font>بتطوير</font><a href="/en-US/Add-ons/Overlay_Extensions"><span><font> الإضافات</font></span></a><font> التقليدية باستخدام تراكب XUL.</font></font></li> +</ul> + +<p><font><font>إذا استطعت ، فمن المستحسن استخدام أداة إضافة SDK الإضافية ، التي تستخدم آلية الإضافة دون إعادة التشغيل ، ولكن تبسط بعض المهام وتنظفها بعد نفسها. </font><font>إذا لم تكن حزمة إضافة SDK كافية لاحتياجاتك ، فقم بتطبيق ملحق إعادة التشغيل يدويًا بدلاً من ذلك.</font></font></p> + +<p><font><font>لمزيد من المعلومات حول اختيار التقنية المستخدمة ، اقرأ هذه </font></font><a href="/en-US/Add-ons/Comparing_Extension_Toolchains"><font><font>المقارنة</font></font></a><font><font> .</font></font></p> + +<div class="column-container"> +<div class="column-half"> +<h3 id="الممارسات_الجيدة"><font><font>الممارسات الجيدة</font></font></h3> + +<p><font><font>بغض النظر عن كيفية تطوير إضافة ، هناك بعض الإرشادات التي يمكنك اتباعها للمساعدة في التأكد من أن الإضافة توفر تجربة مستخدم جيدة قدر الإمكان.</font></font></p> + +<dl> + <dt><a href="/en-US/Add-ons/Performance_best_practices_in_extensions">Performance</a></dt> + <dd>Ensuring your extension is fast, responsive and memory-efficient.</dd> + <dt><a href="/en-US/Add-ons/Security_best_practices_in_extensions">Security</a></dt> + <dd>Ensuring your extension doesn't expose the user to malicious websites.</dd> + <dt><a href="/en-US/Add-ons/Extension_etiquette">Etiquette</a></dt> + <dd>Ensuring your extension plays nicely with other extensions.</dd> +</dl> +</div> + +<div class="column-half"> +<h3 id="Application-specific">Application-specific</h3> + +<p>Most of the documentation assumes you're developing for Firefox Desktop. If you're developing for some other Gecko-based application, there are major differences you need to know about.</p> + +<dl> + <dt><a href="/en-US/Add-ons/Thunderbird">Thunderbird</a></dt> + <dd>Developing extensions for the Thunderbird mail client.</dd> + <dt><a href="/en-US/Add-ons/Firefox_for_Android">Firefox for Android</a></dt> + <dd>Developing extensions for Firefox for Android.</dd> + <dt><a href="/en-US/Add-ons/SeaMonkey_2">SeaMonkey</a></dt> + <dd>Developing extensions for the <a href="http://www.seamonkey-project.org/">SeaMonkey</a> software suite.</dd> +</dl> +</div> +</div> + +<hr> +<h2 id="Themes_2"><a name="Themes">Themes</a></h2> + +<p>Themes are add-ons that customize the application's user interface. There are two sorts of themes: lightweight themes and complete themes.</p> + +<div class="column-container"> +<div class="column-half"> +<p><a href="https://addons.mozilla.org/en-US/developers/docs/themes">Lightweight themes</a> are much simpler to implement than complete themes, but provide very limited customization.</p> +</div> + +<div class="column-half"> +<p>With <a href="/en-US/docs/Themes">complete themes</a> you can make much deeper modifications to the application UI. The documentation for complete themes is out of date, but is linked to here as a possible basis for updated documentation.</p> +</div> +</div> + +<hr> +<h2 id="Other_types_of_add-ons">Other types of add-ons</h2> + +<p><a href="/en-US/docs/Creating_OpenSearch_plugins_for_Firefox">Search engine plugins</a> are a simple and very specific type of add-on: they add new search engines to the browser's search bar.</p> + +<p><strong><a href="/en-US/docs/Plugins">Plugins</a> </strong>help the application understand web content that it does not natively support. NPAPI plugins are a legacy technology and new sites should not use them. In general, plugins are not available on most modern mobile systems including, and websites should transition away from using plugins.</p> + +<p>{{AddonSidebar}}</p> diff --git a/files/ar/mozilla/add-ons/themes/index.html b/files/ar/mozilla/add-ons/themes/index.html new file mode 100644 index 0000000000..37dd0c7514 --- /dev/null +++ b/files/ar/mozilla/add-ons/themes/index.html @@ -0,0 +1,51 @@ +--- +title: Themes +slug: Mozilla/Add-ons/Themes +tags: + - Add-ons + - Look & Feel + - NeedsTranslation + - Themes + - TopicStub +translation_of: Mozilla/Add-ons/Themes +--- +<p>{{AddonSidebar}}</p> + +<p>Themes allow you to change the look and feel of the user interface and personalize it to your tastes. Learn how to create and share themes!</p> + +<div class="column-container"> +<div class="column-half"> +<h2 class="Documentation" id="Documentation" name="Documentation">Browser Themes</h2> + +<dl> + <dt><a href="/en-US/docs/Mozilla/Add-ons/Themes/Theme_concepts">Browser theme concepts</a></dt> + <dd>Get an introduction to creating themes for the latest versions of Firefox</dd> +</dl> + +<h2 class="Documentation" id="Documentation" name="Documentation">Lightweight Themes</h2> + +<dl> + <dt><a href="/en-US/docs/Themes/Lightweight_themes" title="Themes/Lightweight themes">Lightweight themes</a></dt> + <dd>Building lightweight themes for Firefox</dd> + <dt><a href="/en-US/Add-ons/Themes/Lightweight_Themes/FAQ">Lightweight themes FAQ</a></dt> + <dd>Get answers to commonly asked questions</dd> +</dl> +</div> + +<div class="column-half"> +<h2 id="Tools_Resources">Tools & Resources</h2> + +<ul> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/theme">Browser theme manifest.json keys</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/theme">Browser extensions theme API</a></li> + <li><a href="http://vanillaorchidstutorials.blogspot.com/2015/11/mozilla-themes-focal-point-sizing.html">Lightweight themes tutorial</a></li> + <li><a href="https://discourse.mozilla.org/c/add-ons/themes">Discourse forum</a></li> + <li><a href="https://blog.mozilla.org/addons/category/personas/">Theme related blog posts</a></li> + <li><a href="/en-US/Mozilla/Add-ons/Themes/Obsolete">Archived resources</a></li> +</ul> +</div> +</div> + +<p> </p> + +<p> </p> diff --git a/files/ar/mozilla/add-ons/webextensions/api/browsingdata/index.html b/files/ar/mozilla/add-ons/webextensions/api/browsingdata/index.html new file mode 100644 index 0000000000..2ef0a4433f --- /dev/null +++ b/files/ar/mozilla/add-ons/webextensions/api/browsingdata/index.html @@ -0,0 +1,122 @@ +--- +title: browsingData +slug: Mozilla/Add-ons/WebExtensions/API/browsingData +translation_of: Mozilla/Add-ons/WebExtensions/API/browsingData +--- +<h4 id="sect1"></h4> + +<h4 id="AddonSidebar">{{AddonSidebar}}</h4> + +<p>Enables extensions to clear the data that is accumulated while the user is browsing.</p> + +<p>In the <code>browsingData</code> API, browsing data is divided into types:</p> + +<ul> + <li>browser cache</li> + <li>cookies</li> + <li>downloads</li> + <li>history</li> + <li>local storage</li> + <li>plugin data</li> + <li>saved form data</li> + <li>saved passwords</li> +</ul> + +<p>You can use the {{WebExtAPIRef("browsingData.remove()")}} function to remove any combination of these types. There are also dedicated functions to remove each particular type of data, such as {{WebExtAPIRef("browsingData.removePasswords()", "removePasswords()")}}, {{WebExtAPIRef("browsingData.removeHistory()", "removeHistory()")}} and so on.</p> + +<p>All the <code>browsingData.remove[X]()</code> functions take a {{WebExtAPIRef("browsingData.RemovalOptions")}} object, which you can use to control two further aspects of data removal:</p> + +<ul> + <li>how far back in time to remove data</li> + <li>whether to remove data only from normal web pages, or also from hosted web apps and add-ons. Note that this option is not yet supported in Firefox.</li> +</ul> + +<p>Finally, this API gives you a {{WebExtAPIRef("browsingData.settings()")}} function that gives you the current value of the settings for the browser's built-in "Clear History" feature.</p> + +<p>To use this API you must have the "browsingData" <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/permissions#API_permissions">API permission</a>.</p> + +<h2 id="Types">Types</h2> + +<dl> + <dt>{{WebExtAPIRef("browsingData.DataTypeSet")}}</dt> + <dd>Object used to specify the type of data to remove: for example, history, downloads, passwords, and so on.</dd> + <dt>{{WebExtAPIRef("browsingData.RemovalOptions")}}</dt> + <dd>Object used to specify how far back in time to remove data, and whether to remove data added through normal web browsing, by hosted apps, or by add-ons.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{WebExtAPIRef("browsingData.remove()")}}</dt> + <dd>Removes browsing data for the data types specified.</dd> + <dt>{{WebExtAPIRef("browsingData.removeCache()")}}</dt> + <dd>Clears the browser's cache.</dd> + <dt>{{WebExtAPIRef("browsingData.removeCookies()")}}</dt> + <dd>Removes cookies.</dd> + <dt>{{WebExtAPIRef("browsingData.removeDownloads()")}}</dt> + <dd>Removes the list of downloaded files.</dd> + <dt>{{WebExtAPIRef("browsingData.removeFormData()")}}</dt> + <dd>Clears saved form data.</dd> + <dt>{{WebExtAPIRef("browsingData.removeHistory()")}}</dt> + <dd>Clears the browser's history.</dd> + <dt>{{WebExtAPIRef("browsingData.removeLocalStorage()")}}</dt> + <dd>Clears any <a href="/en-US/docs/Web/API/Window/localStorage">local storage</a> created by websites.</dd> + <dt>{{WebExtAPIRef("browsingData.removePasswords()")}}</dt> + <dd>Clears saved passwords.</dd> + <dt>{{WebExtAPIRef("browsingData.removePluginData()")}}</dt> + <dd>Clears data associated with plugins.</dd> + <dt>{{WebExtAPIRef("browsingData.settings()")}}</dt> + <dd>Gets the current value of settings in the browser's "Clear History" feature.</dd> +</dl> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("webextensions.api.browsingData", 2)}}</p> + +<div class="note hidden"> +<p>The "Chrome incompatibilities" section is included from <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities"> https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities</a> using the <a href="/en-US/docs/Template:WebExtChromeCompat">WebExtChromeCompat</a> macro.</p> + +<p>If you need to update this content, edit <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities">https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities</a>, then shift-refresh this page to see your changes.</p> +</div> + +<p>{{WebExtExamples("h2")}}</p> + +<div class="note"><strong>Acknowledgements</strong> + +<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/browsingData"><code>chrome.browsingData</code></a> API.</p> + +<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p> +</div> + +<div class="hidden"> +<pre class="notranslate">// Copyright 2015 The Chromium Authors. All rights reserved. +// +// Redistribution and use in source and binary forms, with or without +// modification, are permitted provided that the following conditions are +// met: +// +// * Redistributions of source code must retain the above copyright +// notice, this list of conditions and the following disclaimer. +// * Redistributions in binary form must reproduce the above +// copyright notice, this list of conditions and the following disclaimer +// in the documentation and/or other materials provided with the +// distribution. +// * Neither the name of Google Inc. nor the names of its +// contributors may be used to endorse or promote products derived from +// this software without specific prior written permission. +// +// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. +</pre> +</div> diff --git a/files/ar/mozilla/add-ons/webextensions/api/contentscripts/index.html b/files/ar/mozilla/add-ons/webextensions/api/contentscripts/index.html new file mode 100644 index 0000000000..16f7fa2fdf --- /dev/null +++ b/files/ar/mozilla/add-ons/webextensions/api/contentscripts/index.html @@ -0,0 +1,38 @@ +--- +title: contentScripts +slug: Mozilla/Add-ons/WebExtensions/API/contentScripts +translation_of: Mozilla/Add-ons/WebExtensions/API/contentScripts +--- +<div>{{AddonSidebar}}</div> + +<p>Use this API to register content scripts. Registering a content script instructs the browser to insert the given content scripts into pages that match the given URL patterns.</p> + +<p>This API is very similar to the <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts">"content_scripts"</a></code> manifest.json key, except that with <code>"content_scripts"</code> , the set of content scripts and associated patterns is fixed at install time. With the <code>contentScripts</code> API, an extension can register and unregister scripts at runtime.</p> + +<p>To use the API, call {{WebExtAPIRef("contentScripts.register()")}} passing in an object defining the scripts to register, the URL patterns, and other options. This returns a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> that is resolved with a {{WebExtAPIRef("contentScripts.RegisteredContentScript")}} object.</p> + +<p>The <code>RegisteredContentScript</code> object represents the scripts that were registered in the <code>register()</code> call. It defines an <code>unregister()</code> method that you can use to unregister the content scripts. Content scripts are also unregistered automatically when the page that created them is destroyed. For example, if they are registered from the background page they will be unregistered automatically when the background page is destroyed, and if they are registered from a sidebar or a popup, they will be unregistered automatically when the sidebar or popup is closed.</p> + +<p>There is no <code>contentScripts</code> API permission, but an extension must have the appropriate <a href="/en-US/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions">host permissions</a> for any patterns it passes to <code>register()</code>.</p> + +<h2 id="Types">Types</h2> + +<dl> + <dt>{{WebExtAPIRef("contentScripts.RegisteredContentScript")}}</dt> + <dd> + <p>An object of this type is returned by the {{WebExtAPIRef("contentScripts.register()")}} function. It represents the content scripts that were registered by that call, and can be used to unregister the content script.</p> + </dd> +</dl> + +<h2 id="Functions">Functions</h2> + +<dl> + <dt>{{WebExtAPIRef("contentScripts.register()")}}</dt> + <dd>Registers the given content scripts.</dd> +</dl> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{Compat("webextensions.api.contentScripts", 10, 1)}}</p> + +<p> {{WebExtExamples("h2")}}</p> diff --git a/files/ar/mozilla/add-ons/webextensions/api/index.html b/files/ar/mozilla/add-ons/webextensions/api/index.html new file mode 100644 index 0000000000..955086de10 --- /dev/null +++ b/files/ar/mozilla/add-ons/webextensions/api/index.html @@ -0,0 +1,53 @@ +--- +title: JavaScript APIs +slug: Mozilla/Add-ons/WebExtensions/API +tags: + - NeedsTranslation + - TopicStub + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/API +--- +<div>{{AddonSidebar}}</div> + +<div> +<p>JavaScript APIs for WebExtensions can be used inside the extension's <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">background scripts</a> and in any other documents bundled with the extension, including <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_action">browser action</a> or <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Page_actions">page action</a> popups, <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Sidebars">sidebars</a>, <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Options_pages">options pages</a>, or <a href="/en-US/Add-ons/WebExtensions/manifest.json/chrome_url_overrides">new tab pages</a>. A few of these APIs can also be accessed by an extension's <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Content_scripts">content scripts</a> (see the <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Content_scripts#WebExtension_APIs">list in the content script guide</a>).</p> + +<p>To use the more powerful APIs you need to <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/permissions">request permission</a> in your extension's manifest.json.</p> + +<p>You can access the APIs using the <code>browser</code> namespace:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">logTabs</span><span class="punctuation token">(</span>tabs<span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>tabs<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +browser<span class="punctuation token">.</span>tabs<span class="punctuation token">.</span><span class="function token">query</span><span class="punctuation token">(</span><span class="punctuation token">{</span>currentWindow<span class="punctuation token">:</span> <span class="keyword token">true</span><span class="punctuation token">}</span><span class="punctuation token">,</span> logTabs<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +</div> + +<div> +<p>Many of the APIs are asynchronous, returning a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">logCookie</span><span class="punctuation token">(</span>c<span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>c<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="keyword token">function</span> <span class="function token">logError</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">error</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="keyword token">var</span> setCookie <span class="operator token">=</span> browser<span class="punctuation token">.</span>cookies<span class="punctuation token">.</span><span class="keyword token">set</span><span class="punctuation token">(</span> + <span class="punctuation token">{</span>url<span class="punctuation token">:</span> <span class="string token">"https://developer.mozilla.org/"</span><span class="punctuation token">}</span> +<span class="punctuation token">)</span><span class="punctuation token">;</span> +setCookie<span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span>logCookie<span class="punctuation token">,</span> logError<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +</div> + +<div> +<p>Note that this is different from Google Chrome's extension system, which uses the <code>chrome</code> namespace instead of <code>browser</code>, and which uses callbacks instead of promises for asynchronous functions. As a porting aid, the Firefox implementation of WebExtensions APIs supports <code>chrome</code> and callbacks as well as <code>browser</code> and promises. Mozilla has also written a polyfill which enables code that uses <code>browser</code> and promises to work unchanged in Chrome: <a class="external external-icon" href="https://github.com/mozilla/webextension-polyfill">https://github.com/mozilla/webextension-polyfill</a>.</p> + +<p>Firefox also implements these APIs under the <code>chrome</code> namespace using callbacks. This allows code written for Chrome to run largely unchanged in Firefox for the APIs documented here.</p> + +<p>Microsoft Edge uses the <code>browser</code> namespace, but doesn't yet support promise-based asynchronous APIs. In Edge, for the time being, asynchronous APIs must use callbacks.</p> + +<p>Not all browsers support all the APIs: for the details, see <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs">Browser support for JavaScript APIs</a>.</p> +</div> + +<div>{{SubpagesWithSummaries}}</div> diff --git a/files/ar/mozilla/add-ons/webextensions/index.html b/files/ar/mozilla/add-ons/webextensions/index.html new file mode 100644 index 0000000000..387f9bf8ac --- /dev/null +++ b/files/ar/mozilla/add-ons/webextensions/index.html @@ -0,0 +1,131 @@ +--- +title: امتدادات المتصفح +slug: Mozilla/Add-ons/WebExtensions +tags: + - إضافات + - صفحة هبوط +translation_of: Mozilla/Add-ons/WebExtensions +--- +<div class="boxed translate-rendered text-content"> +<div>{{AddonSidebar}}</div> + +<p dir="rtl">تستطيع الامتدادات (extensions) أن تزيد وتُعدِل من إمكانيّة المُتصفِح. امتدادات فايرفوكس مبنيّة بواسطة الواجهة البرمجيّة المسماة WebExtensions، وهي نظام عابر للمتصفحات (cross-browser) لتطوير الإضافات. يتوافق النظام إلى حدٍ كبير مع <a href="https://developer.chrome.com/extensions">واجهة الإضافات البرمجيّة</a> المدعومة بواسطة متصفخ جوجل كروم وأوبرا، كما يتوافق مع <a href="https://browserext.github.io/browserext/">مسودة W3C المجتمعيّة</a>. الإضافات المكتوبة لتلك المتصفحات ستعمل على فايرفوكس و<a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/extensions/">مايكروسوفت أيدج</a> في معظم الحالات <a href="/ar/Add-ons/WebExtensions/Porting_from_Google_Chrome">بتغييرات طفيفة</a>. الواجهة البرمجيّة متوافقة أيضاً مع <a href="/ar/Firefox/Multiprocess_Firefox">فايرفوكس متعدد العمليات</a> (multiprocess firefox).</p> + +<p dir="rtl">إذا كانت لديك أسئلة أو أفكار، أو تريد مساعدة في نقل إضافة قديمة وجعلها تستخدم الواجهة البرمجيّة الحديثة، يمكنك التواصل معنا عبر <a href="https://mail.mozilla.org/listinfo/dev-addons">قائمة مطورين الإضافات البريديّة</a> أو على قناة <a href="irc://irc.mozilla.org/webextensions">webextensions#</a>.</p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 dir="rtl" id="دليل_البداية">دليل البداية</h2> + +<ul dir="rtl"> + <li><a href="/ar/Add-ons/WebExtensions/What_are_WebExtensions">ما هي الإضافات؟</a></li> + <li><a href="/ar/Add-ons/WebExtensions/Your_first_WebExtension">إضافتك الأولى</a></li> + <li><a href="/ar/Add-ons/WebExtensions/Your_second_WebExtension">إضافتك الثانية</a></li> + <li><a href="/ar/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">تشريح بنيّة الإضافات</a></li> + <li><a href="/ar/Add-ons/WebExtensions/Examples">أمثلة عن الإضافات</a></li> + <li><a href="/ar/docs/Mozilla/Add-ons/WebExtensions/What_next_">ما الخطوة التالية؟</a></li> +</ul> + +<h2 dir="rtl" id="مفاهيم">مفاهيم</h2> + +<ul dir="rtl"> + <li><a href="/ar/docs/Mozilla/Add-ons/WebExtensions/API">لمحة عن واجهات جافاسكربت البرمجيّة</a></li> + <li><a href="/ar/Add-ons/WebExtensions/Content_scripts">محتويات البرمجيات</a> (content scripts)</li> + <li><a href="/ar/Add-ons/WebExtensions/Match_patterns">مطابقة الأنماط</a></li> + <li><a href="/ar/docs/Mozilla/Add-ons/WebExtensions/Working_with_files">العمل مع الملفات</a></li> + <li><a href="/ar/docs/Mozilla/Add-ons/WebExtensions/Internationalization">ترجمة الإضافات</a></li> + <li><a href="/ar/docs/Mozilla/Add-ons/WebExtensions/Security_best_practices">أفضل الأساليب الأمنيّة</a></li> + <li><a href="/ar/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy">سياسة خصوصيّة المحتوى</a> (Content Security Policy)</li> + <li><a href="/ar/docs/Mozilla/Add-ons/WebExtensions/Native_messaging">التواصل المحلي</a></li> + <li><a href="/ar/docs/Mozilla/Add-ons/WebExtensions/Using_the_devtools_APIs">استخدام واجهات مطورين الأدوات البرمجيّة</a></li> + <li><a href="/ar/Add-ons/WebExtensions/User_experience_best_practices">أفضل الأساليب في تجربة المستخدم</a></li> + <li><a href="/ar/Add-ons/WebExtensions/Native_manifests">ملفات manifest المحليّة</a></li> +</ul> + +<h2 dir="rtl" id="واجهة_المستخدم">واجهة المستخدم</h2> + +<ul dir="rtl"> + <li><a href="/ar/docs/Mozilla/Add-ons/WebExtensions/user_interface">مقدمة</a></li> + <li><a href="/ar/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_action">زر في شريط أدوات المتصفح</a></li> + <li><a href="/ar/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">زر في شريط أدوات المتصفح مع نافذة مُنبثِقة</a> (popup)</li> + <li><a href="/ar/docs/Mozilla/Add-ons/WebExtensions/user_interface/Page_actions">زر في شريط العنوان</a></li> + <li><a href="/ar/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">زر في شريط العنوان مع نافذة مُنبثِقة</a></li> + <li><a href="/ar/docs/Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items">العناصر في قائمة السياق</a> (القائمة التي تظهر عند ضغط زر الفأرة الأيمن في المتصفح)</li> + <li><a href="/ar/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars">الأشرطة الجانبيّة</a> (sidebars)</li> + <li><a href="/ar/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages">صفحة الإعدادات (الخيارات)</a></li> + <li><a href="/ar/docs/Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages">صفحات الإضافة</a></li> + <li><a href="/ar/docs/Mozilla/Add-ons/WebExtensions/user_interface/Notifications">الإشعارات</a></li> + <li><a href="/ar/docs/Mozilla/Add-ons/WebExtensions/user_interface/Omnibox">الإقتراحات في شريط العنوان</a></li> + <li><a href="/ar/docs/Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels">لوحات أدوات المطورين</a></li> +</ul> + +<h2 dir="rtl" id="مقالات_كيف_تقوم_بـ">مقالات "كيف تقوم بـ"</h2> + +<ul dir="rtl"> + <li><a href="/ar/docs/Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests">اعتراض طلبات ميثاق نقل النص الفائق</a> (HTTP)</li> + <li><a href="/ar/docs/Mozilla/Add-ons/WebExtensions/Modify_a_web_page">تعديل الصفحات</a></li> + <li><a href="/ar/docs/Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar">إضافة زر لشريط الأدوات</a></li> + <li><a href="/ar/docs/Mozilla/Add-ons/WebExtensions/Implement_a_settings_page">إضافة صفحة إعدادات</a></li> + <li><a href="/ar/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard">التفاعل مع الحافظة</a> (clipboard)</li> + <li><a href="/ar/docs/Mozilla/Add-ons/WebExtensions/Working_with_the_Tabs_API">العمل مع واجهة النوافذ البرمجيّة</a> (Tabs API)</li> + <li><a href="/ar/docs/Mozilla/Add-ons/WebExtensions/Work_with_the_Bookmarks_API">العمل مع واجهة العلامات المرجعيّة البرمجيّة</a> (Bookmarks API)</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Work_with_the_Cookies_API">العمل مع واجهة الكعكات البرمجيّة</a> (Cookies API)</li> + <li><a href="/ar/docs/Mozilla/Add-ons/WebExtensions/Work_with_contextual_identities">العمل مع الهويات السياقيّة</a> (contextual identities)</li> + <li><a href="/ar/docs/Mozilla/Add-ons/WebExtensions/Safely_inserting_external_content_into_a_page">إدخال محتوى خارجي</a></li> +</ul> + +<ul> +</ul> + +<h2 dir="rtl" id="الترحيل">الترحيل</h2> + +<ul dir="rtl"> + <li><a href="/ar/Add-ons/WebExtensions/Porting_from_Google_Chrome">ترحيل (Porting) إضافة جوجل كروم</a></li> + <li><a href="/ar/docs/Mozilla/Add-ons/WebExtensions/Porting_a_legacy_Firefox_add-on">ترحيل إضافة فايرفوكس قديمة</a></li> + <li><a href="/ar/docs/Mozilla/Add-ons/WebExtensions/Developing_WebExtensions_for_Firefox_for_Android">تطوير إضافات فايرفوكس للأندرويد</a></li> + <li><a href="/ar/docs/Mozilla/Add-ons/WebExtensions/Embedded_WebExtensions">إضافات الويب (WebExtension) المضمنة</a></li> + <li><a href="/ar/docs/Mozilla/Add-ons/WebExtensions/Comparison_with_the_Add-on_SDK">مقارنة مع حزمة أدوات Add-on</a></li> + <li><a href="/ar/docs/Mozilla/Add-ons/WebExtensions/Comparison_with_XUL_XPCOM_extensions">مقارنة مع إضافات XUL و XPCOM</a></li> + <li><a href="/ar/docs/Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities">الأمور الغير متوافقة مع كروم</a></li> + <li><a href="/ar/docs/Mozilla/Add-ons/WebExtensions/Differences_between_desktop_and_Android">الإختلافات بين إضافات سطح المكتب والأندرويد</a></li> +</ul> + +<h2 dir="rtl" id="سير_العمل_مع_فيرفوكس">سير العمل مع فيرفوكس</h2> + +<ul dir="rtl"> + <li><a href="/ar/docs/Mozilla/Add-ons/WebExtensions/User_experience_best_practices">تجربة المُستخدِم</a></li> + <li><a href="/ar/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">التثبيت</a></li> + <li><a href="/ar/Add-ons/WebExtensions/Debugging">تصحيح الأخطاء (التنقيح)</a></li> + <li><a href="/ar/docs/Mozilla/Add-ons/WebExtensions/Testing_persistent_and_restart_features">الاختبار المستمر وتكرار الميزات</a></li> + <li><a href="/ar/docs/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext">الشروع بالعمل مع أداة web-ext</a></li> + <li><a href="/ar/docs/Mozilla/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID">مُعرِف الإضافات</a></li> + <li><a href="/ar/Add-ons/WebExtensions/Alternative_distribution_options">خيارات توزيع بديلة </a></li> + <li><a href="/ar/docs/Mozilla/Add-ons/WebExtensions/Request_the_right_permissions">طلب الأذونات المناسبة</a></li> + <li><a href="/ar/docs/Mozilla/Add-ons/WebExtensions/Sharing_objects_with_page_scripts">مشاركة الكائنات بين الصفحات</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Retiring_your_extension">إقعاد (إيقاف تطوير) إضافتك</a></li> +</ul> +</div> + +<div class="section"> +<h2 dir="rtl" id="مراجع">مراجع</h2> + +<h3 dir="rtl" id="واجهات_جافاسكربت_البرمجيّة">واجهات جافاسكربت البرمجيّة</h3> + +<ul dir="rtl"> + <li><a href="/ar/docs/Mozilla/Add-ons/WebExtensions/API">لمحة عن واجهة جافاسكربت البرمجيّة</a></li> + <li><a href="/ar/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs">جداول توافقيّة واجهات جافاسكربت البرمجيّة مع المتصفحات</a></li> +</ul> + +<div class="twocolumns">{{ ListSubpages ("/ar/Add-ons/WebExtensions/API") }}</div> + +<h3 dir="rtl" id="قيم_ملف_Manifest">قيم ملف Manifest</h3> + +<ul dir="rtl"> + <li><a href="/ar/docs/Mozilla/Add-ons/WebExtensions/manifest.json">لمحة عن ملف manifest.json</a></li> + <li><a href="/ar/docs/Mozilla/Add-ons/WebExtensions/Browser_compatibility_for_manifest.json">توافق المتصفحات مع ملف manifest.json</a></li> +</ul> + +<div class="twocolumns">{{ ListSubpages ("/ar/Add-ons/WebExtensions/manifest.json") }}</div> +</div> +</div> +</div> diff --git a/files/ar/mozilla/add-ons/webextensions/manifest.json/content_scripts/index.html b/files/ar/mozilla/add-ons/webextensions/manifest.json/content_scripts/index.html new file mode 100644 index 0000000000..ac1c401c35 --- /dev/null +++ b/files/ar/mozilla/add-ons/webextensions/manifest.json/content_scripts/index.html @@ -0,0 +1,223 @@ +--- +title: content_scripts +slug: Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts +--- +<div>{{AddonSidebar}}</div> + +<table class="fullwidth-table standard-table"> + <tbody> + <tr> + <th scope="row" style="width: 30%;">Type</th> + <td><code>Array</code></td> + </tr> + <tr> + <th scope="row">Mandatory</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Example</th> + <td> + <pre class="brush: json no-line-numbers"> +"content_scripts": [ + { + "matches": ["*://*.mozilla.org/*"], + "js": ["borderify.js"] + } +]</pre> + </td> + </tr> + </tbody> +</table> + +<p>Instructs the browser to load <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">content scripts</a> into web pages whose URL matches a given pattern.</p> + +<p>This key is an array. Each item is an object which:</p> + +<ul> + <li><strong>must</strong> contain a key named <strong><code>matches</code></strong>, that specifies the URL patterns to be matched in order for the scripts to be loaded</li> + <li><strong>may</strong> contain keys named <strong><code>js</code></strong> and <strong><code>css</code></strong>, which list scripts to be loaded into matching pages</li> + <li><strong>may</strong> contain a number of other properties that control finer aspects of how and when content scripts are loaded</li> +</ul> + +<p>Details of all the keys you can include are given in the table below.</p> + +<table class="fullwidth-table standard-table"> + <thead> + <tr> + <th scope="col">Name</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><a id="all_frames" name="all_frames"><code>all_frames</code></a></td> + <td><code>Boolean</code></td> + <td> + <p><code>true</code>: inject the scripts specified in <code><a href="#js">js</a></code> and <code><a href="#css">css</a></code> into all frames matching the specified URL requirements, even if the frame is not the topmost frame in a tab. This does not inject into child frames where only their parent matches the URL requirements and the child frame does not match the URL requirements. The URL requirements are checked for each frame independently.</p> + + <p><code>false</code>: inject only into frames matching the URL requirements which are the topmost frame in a tab.</p> + + <p>Defaults to <code>false</code>.</p> + </td> + </tr> + <tr> + <td><a id="css" name="css"><code>css</code></a></td> + <td><code>Array</code></td> + <td> + <p>An array of paths, relative to manifest.json, referencing CSS files that will be injected into matching pages.</p> + + <p>Files are injected in the order given, and before the DOM is loaded.</p> + </td> + </tr> + <tr> + <td><a id="exclude_globs" name="exclude_globs"><code>exclude_globs</code></a></td> + <td><code>Array</code></td> + <td>An array of strings containing wildcards. See <a href="/en-US/Add-ons/WebExtensions/manifest.json/content_scripts#Matching_URL_patterns">Matching URL patterns</a> below.</td> + </tr> + <tr> + <td><a id="exclude_matches" name="exclude_matches"><code>exclude_matches</code></a></td> + <td><code>Array</code></td> + <td>An array of <a href="/en-US/Add-ons/WebExtensions/match_patterns">match patterns</a>. See <a href="/en-US/Add-ons/WebExtensions/manifest.json/content_scripts#Matching_URL_patterns">Matching URL patterns</a> below.</td> + </tr> + <tr> + <td><a id="include_globs" name="include_globs"><code>include_globs</code></a></td> + <td><code>Array</code></td> + <td>An array of strings containing wildcards. See <a href="/en-US/Add-ons/WebExtensions/manifest.json/content_scripts#Matching_URL_patterns">Matching URL patterns</a> below.</td> + </tr> + <tr> + <td><a id="js" name="js"><code>js</code></a></td> + <td><code>Array</code></td> + <td> + <p>An array of paths, relative to the manifest.json file, referencing JavaScript files that will be injected into matching pages.</p> + + <p>Files are injected in the order given. This means that, for example, if you include jQuery here followed by another content script, like this:</p> + + <pre class="brush: json no-line-numbers"> +<code>"js": ["jquery.js", "my-content-script.js"]</code></pre> + + <p>then <code>"my-content-script.js"</code> can use jQuery.</p> + + <p>Files are injected at the time specified by <code><a href="#run_at">run_at</a></code>.</p> + </td> + </tr> + <tr> + <td><code><a id="match_about_blank" name="match_about_blank">match_about_blank</a></code></td> + <td><code>Boolean</code></td> + <td> + <p>Insert the content scripts into pages whose URL is "about:blank" or "about:srcdoc", if the URL of the page that opened or created this page <a href="/en-US/Add-ons/WebExtensions/manifest.json/content_scripts#Matching_URL_patterns">matches the patterns</a> specified in the rest of the <code>content_scripts</code> key.</p> + + <p>This is especially useful to run scripts in empty iframes , whose URL is "about:blank". To do this you should also set the <code>all_frames</code> key.</p> + + <p>For example, suppose you have a <code>content_scripts</code> key like this:</p> + + <pre class="brush: json no-line-numbers"> + "content_scripts": [ + { + "js": ["my-script.js"], + "matches": ["https://example.org/"], + "match_about_blank": true, + "all_frames": true + } + ]</pre> + + <p>If the user loads https://example.org/, and this page embeds an empty iframe, then "my-script.js" will be loaded into the iframe.</p> + + <p><code>match_about_blank</code> is supported in Firefox from version 52. Note that in Firefox, content scripts won't be injected into empty iframes at <code>"document_start"</code> even if you specify that value in <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/content_scripts#run_at">run_at</a></code>.</p> + </td> + </tr> + <tr> + <td><a id="matches" name="matches"><code>matches</code></a></td> + <td><code>Array</code></td> + <td> + <p>An array of <a href="/en-US/Add-ons/WebExtensions/match_patterns">match patterns</a>. See <a href="/en-US/Add-ons/WebExtensions/manifest.json/content_scripts#Matching_URL_patterns">Matching URL patterns</a> below.</p> + + <p>This is the only mandatory key.</p> + </td> + </tr> + <tr> + <td><a id="run_at" name="run_at"><code>run_at</code></a></td> + <td><code>String</code></td> + <td> + <p>This option determines when the scripts specified in <code><a href="#js">js</a></code> are injected. You can supply one of three strings here, each of which identifies a state in the process of loading a document. The states directly correspond to {{domxref("Document/readyState", "Document.readyState")}}:</p> + + <ul> + <li>"<code>document_start</code>": corresponds to <code>loading</code>. The DOM is still loading.</li> + <li>"<code>document_end</code>": corresponds to <code>interactive</code>. The DOM has finished loading, but resources such as scripts and images may still be loading.</li> + <li>"<code>document_idle</code>": corresponds to <code>complete</code>. The document and all its resources have finished loading.</li> + </ul> + + <p>The default value is <code>"document_idle"</code>.</p> + + <p>In all cases, files in <code><a href="#js">js</a></code> are injected after files in <code><a href="#css">css</a></code>.</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Matching_URL_patterns">Matching URL patterns</h2> + +<p>The <code>"content_scripts"</code> key attaches content scripts to documents based on URL matching: if the document's URL matches the specification in the key, then the script will be attached. There are four properties inside <code>"content_scripts"</code> that you can use for this specification:</p> + +<ul> + <li><code>matches</code>: an array of <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Match_patterns">match patterns</a>.</li> + <li><code>exclude_matches:</code> an array of <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Match_patterns">match patterns</a>.</li> + <li><code>include_globs</code>: an array of <a href="#globs">globs</a>.</li> + <li><code>exclude_globs:</code> an array of <a href="#globs">globs</a>.</li> +</ul> + +<p>To match one of these properties, a URL must match at least one of the items in its array. For example, given a property like:</p> + +<pre class="brush: json no-line-numbers">"matches": ["*://*.example.org/*", "*://*.example.com/*"]</pre> + +<p>Both "http://example.org/" and "http://example.com/" will match.</p> + +<p>Since <code>matches</code> is the only mandatory key, the other three keys are use to limit further the URLs that match. To match the key as a whole, a URL must:</p> + +<ol> + <li>match the <code>matches</code> property</li> + <li>AND match the <code>include_globs</code> property, if present</li> + <li>AND NOT match the <code>exclude_matches</code> property, if present</li> + <li>AND NOT match the <code>exclude_globs</code> property, if present</li> +</ol> + +<h3 id="globs">globs</h3> + +<p>A glob is just a string that may contain wildcards. There are two types of wildcard, and you can combine them in the same glob:</p> + +<ul> + <li>"*" matches zero or more characters</li> + <li>"?" matches exactly one character.</li> +</ul> + +<p>For example: <code>"*na?i"</code> would match <code>"illuminati"</code> and <code>"annunaki"</code>, but not <code>"sagnarelli"</code>.</p> + +<h2 id="Example">Example</h2> + +<pre class="brush: json no-line-numbers">"content_scripts": [ + { + "matches": ["*://*.mozilla.org/*"], + "js": ["borderify.js"] + } +]</pre> + +<p>This injects a single content script "borderify.js" into all pages under "mozilla.org" or any of its subdomains, whether served over HTTP or HTTPS.</p> + +<pre class="brush: json no-line-numbers"> "content_scripts": [ + { + "exclude_matches": ["*://developer.mozilla.org/*"], + "matches": ["*://*.mozilla.org/*"], + "js": ["jquery.js", "borderify.js"] + } + ]</pre> + +<p>This injects two content scripts into all pages under "mozilla.org" or any of its subdomains except "developer.mozilla.org", whether served over HTTP or HTTPS.</p> + +<p>The content scripts see the same view of the DOM and are injected in the order they appear in the array, so "borderify.js" can see global variables added by "jquery.js".</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("webextensions.manifest.content_scripts")}}</p> diff --git a/files/ar/mozilla/add-ons/webextensions/manifest.json/index.html b/files/ar/mozilla/add-ons/webextensions/manifest.json/index.html new file mode 100644 index 0000000000..332566c368 --- /dev/null +++ b/files/ar/mozilla/add-ons/webextensions/manifest.json/index.html @@ -0,0 +1,109 @@ +--- +title: manifest.json +slug: Mozilla/Add-ons/WebExtensions/manifest.json +tags: + - Add-ons + - Extensions + - NeedsTranslation + - TopicStub + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json +--- +<div>{{AddonSidebar}}</div> + +<p>The manifest.json file is a <a href="/en-US/docs/Glossary/JSON">JSON</a>-formatted file, and is the only file that every extension using WebExtension APIs must contain.</p> + +<p>Using manifest.json, you specify basic metadata about your extension such as the name and version, and can also specify aspects of your extension's functionality, such as background scripts, content scripts, and browser actions.</p> + +<p>manifest.json keys are listed below:</p> + +<div class="twocolumns">{{ ListSubpages ("/en-US/Add-ons/WebExtensions/manifest.json") }}</div> + +<div class="twocolumns"> </div> + +<p><code>"manifest_version"</code>, <code>"version"</code>, and <code>"name"</code> are the only mandatory keys. <code>"default_locale"</code> must be present if the "_locales" directory is present and must be absent otherwise. <code>"applications"</code> is not supported in Google Chrome, and is mandatory in Firefox before Firefox 48 and Firefox for Android.</p> + +<p>You can access your extension's manifest from the extension's JavaScript using the {{WebExtAPIRef("runtime.getManifest()")}} function:</p> + +<pre class="brush: js">browser.runtime.getManifest().version;</pre> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{Compat("webextensions.manifest")}}</p> + +<h2 id="Example">Example</h2> + +<p>Quick syntax example for manifest.json:</p> + +<pre class="brush: json">{ + "applications": { + "gecko": { + "id": "addon@example.com", + "strict_min_version": "42.0" + } + }, + + "background": { + "scripts": ["jquery.js", "my-background.js"], + "page": "my-background.html" + }, + + "browser_action": { + "default_icon": { + "19": "button/geo-19.png", + "38": "button/geo-38.png" + }, + "default_title": "Whereami?", + "default_popup": "popup/geo.html" + }, + + "commands": { + "toggle-feature": { + "suggested_key": { + "default": "Ctrl+Shift+Y", + "linux": "Ctrl+Shift+U" + }, + "description": "Send a 'toggle-feature' event" + } + }, + + "content_security_policy": "script-src 'self' https://example.com; object-src 'self'", + + "content_scripts": [ + { + "exclude_matches": ["*://developer.mozilla.org/*"], + "matches": ["*://*.mozilla.org/*"], + "js": ["borderify.js"] + } + ], + + "default_locale": "en", + + "description": "...", + + "icons": { + "48": "icon.png", + "96": "icon@2x.png" + }, + + "manifest_version": 2, + + "name": "...", + + "page_action": { + "default_icon": { + "19": "button/geo-19.png", + "38": "button/geo-38.png" + }, + "default_title": "Whereami?", + "default_popup": "popup/geo.html" + }, + + "permissions": ["webNavigation"], + + "version": "0.1", + + "web_accessible_resources": ["images/my-image.png"] +}</pre> + +<p> </p> diff --git a/files/ar/mozilla/add-ons/webextensions/match_patterns/index.html b/files/ar/mozilla/add-ons/webextensions/match_patterns/index.html new file mode 100644 index 0000000000..d5775418be --- /dev/null +++ b/files/ar/mozilla/add-ons/webextensions/match_patterns/index.html @@ -0,0 +1,449 @@ +--- +title: Match patterns +slug: Mozilla/Add-ons/WebExtensions/Match_patterns +translation_of: Mozilla/Add-ons/WebExtensions/Match_patterns +--- +<div>{{AddonSidebar}}</div> + +<p>Match patterns are a way to specify groups of URLs: a match pattern matches a specific set of URLs. They are for extensions using WebExtensions APIs in a few places, most notably to specify which documents to load <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">content scripts</a> into, and to specify which URLs to add <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/webRequest">webRequest</a></code> listeners to.</p> + +<p>APIs that use match patterns usually accept a list of match patterns, and will perform the appropriate action if the URL matches any of the patterns. See, for example, the <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code> key in manifest.json.</p> + +<h2 id="Match_pattern_structure">Match pattern structure</h2> + +<p>All match patterns are specified as strings. Apart from the special <a href="/en-US/Add-ons/WebExtensions/Match_patterns#%3Call_urls%3E">"<all_urls>"</a> pattern, match patterns consist of three parts: <em>scheme</em>, <em>host</em>, and <em>path</em>. The scheme and host are separated by "://".</p> + +<pre><scheme>://<host><path></pre> + +<h3 id="scheme">scheme</h3> + +<p>The <em>scheme</em> component may take one of two forms:</p> + +<table class="fullwidth-table standard-table"> + <thead> + <tr> + <th scope="col" style="width: 50%;">Form</th> + <th scope="col">Matches</th> + </tr> + </thead> + <tbody> + <tr> + <td>"*"</td> + <td>Only "http" and "https".</td> + </tr> + <tr> + <td>One of "http", "https", "file", "ftp", "app".</td> + <td>Only the given scheme.</td> + </tr> + </tbody> +</table> + +<h3 id="host">host</h3> + +<p>The <em>host</em> component may take one of three forms:</p> + +<table class="fullwidth-table standard-table"> + <thead> + <tr> + <th scope="col" style="width: 50%;">Form</th> + <th scope="col">Matches</th> + </tr> + </thead> + <tbody> + <tr> + <td>"*"</td> + <td>Any host.</td> + </tr> + <tr> + <td>"*." followed by part of the hostname.</td> + <td>The given host and any of its subdomains.</td> + </tr> + <tr> + <td>A complete hostname, without wildcards.</td> + <td>Only the given host.</td> + </tr> + </tbody> +</table> + +<p><em>host</em> is optional only if the <em>scheme</em> is "file".</p> + +<p>Note that the wildcard may only appear at the start.</p> + +<h3 id="path">path</h3> + +<p>The path component must begin with a "/".</p> + +<p>After that, it may subsequently contain any combination of the "*" wildcard and any of the characters that are allowed in URL paths. Unlike <em>host</em>, the <em>path</em> component may contain the "*" wildcard in the middle or at the end, and the "*" wildcard may appear more than once.</p> + +<h3 id="<all_urls>"><all_urls></h3> + +<p>The special value "<all_urls>" matches all URLs under any of the supported schemes: that is, "http", "https", "file", "ftp", "app".</p> + +<h2 id="Examples">Examples</h2> + +<table class="fullwidth-table standard-table"> + <thead> + <tr> + <th scope="col" style="width: 33%;">Pattern</th> + <th scope="col" style="width: 33%;">Example matches</th> + <th scope="col" style="width: 33%;">Example non-matches</th> + </tr> + </thead> + <tbody> + <tr> + <td> + <p><code><all_urls></code></p> + + <p>Match all URLs.</p> + </td> + <td> + <p><code>http://example.org/</code></p> + + <p><code>ftp://files.somewhere.org/</code></p> + + <p><code>https://a.org/some/path/</code></p> + </td> + <td> + <p><code>resource://a/b/c/</code><br> + (unsupported scheme)</p> + </td> + </tr> + <tr> + <td> + <p><code>*://*.mozilla.org/*</code></p> + + <p>Match all HTTP and HTTPS URLs that are hosted at "mozilla.org" or one of its subdomains.</p> + </td> + <td> + <p><code>http://mozilla.org/</code></p> + + <p><code>https://mozilla.org/</code></p> + + <p><code>http://a.mozilla.org/</code></p> + + <p><code>http://a.b.mozilla.org/</code></p> + + <p><code>https://b.mozilla.org/path/</code></p> + </td> + <td> + <p><code>ftp://mozilla.org/</code><br> + (unmatched scheme)</p> + + <p><code>http://mozilla.com/</code><br> + (unmatched host)</p> + + <p><code>http://firefox.org/</code><br> + (unmatched host)</p> + </td> + </tr> + <tr> + <td> + <p><code>*://mozilla.org/</code></p> + + <p>Match all HTTP and HTTPS URLs that are hosted at exactly "mozilla.org/".</p> + </td> + <td> + <p><code>http://mozilla.org/</code></p> + + <p><code>https://mozilla.org/</code></p> + </td> + <td> + <p><code>ftp://mozilla.org/</code><br> + (unmatched scheme)</p> + + <p><code>http://a.mozilla.org/</code><br> + (unmatched host)</p> + + <p><code>http://mozilla.org/a</code><br> + (unmatched path)</p> + </td> + </tr> + <tr> + <td> + <p><code>ftp://mozilla.org/</code></p> + + <p>Match only "ftp://mozilla.org/".</p> + </td> + <td><code>ftp://mozilla.org</code></td> + <td> + <p><code>http://mozilla.org/</code><br> + (unmatched scheme)</p> + + <p><code>ftp://sub.mozilla.org/</code><br> + (unmatched host)</p> + + <p><code>ftp://mozilla.org/path</code><br> + (unmatched path)</p> + </td> + </tr> + <tr> + <td> + <p><code>https://*/path</code></p> + + <p>Match HTTPS URLs on any host, whose path is "path".</p> + </td> + <td> + <p><code>https://mozilla.org/path</code></p> + + <p><code>https://a.mozilla.org/path</code></p> + + <p><code>https://something.com/path</code></p> + </td> + <td> + <p><code>http://mozilla.org/path</code><br> + (unmatched scheme)</p> + + <p><code>https://mozilla.org/path/</code><br> + (unmatched path)</p> + + <p><code>https://mozilla.org/a</code><br> + (unmatched path)</p> + + <p><code>https://mozilla.org/</code><br> + (unmatched path)</p> + </td> + </tr> + <tr> + <td> + <p><code>https://*/path/</code></p> + + <p>Match HTTPS URLs on any host, whose path is "path/".</p> + </td> + <td> + <p><code>https://mozilla.org/path/</code></p> + + <p><code>https://a.mozilla.org/path/</code></p> + + <p><code>https://something.com/path</code>/</p> + </td> + <td> + <p><code>http://mozilla.org/path/</code><br> + (unmatched scheme)</p> + + <p><code>https://mozilla.org/path</code><br> + (unmatched path)</p> + + <p><code>https://mozilla.org/a</code><br> + (unmatched path)</p> + + <p><code>https://mozilla.org/</code><br> + (unmatched path)</p> + </td> + </tr> + <tr> + <td> + <p><code>https://mozilla.org/*</code></p> + + <p>Match HTTPS URLs only at "mozilla.org", with any path.</p> + </td> + <td> + <p><code>https://mozilla.org/</code></p> + + <p><code>https://mozilla.org/path</code></p> + + <p><code>https://mozilla.org/another</code></p> + + <p><code>https://mozilla.org/path/to/doc</code></p> + </td> + <td> + <p><code>http://mozilla.org/path</code><br> + (unmatched scheme)</p> + + <p><code>https://mozilla.com/path</code><br> + (unmatched host)</p> + </td> + </tr> + <tr> + <td> + <p><code>https://mozilla.org/a/b/c/</code></p> + + <p>Match only this URL.</p> + </td> + <td><code>https://mozilla.org/a/b/c/</code></td> + <td>Anything else.</td> + </tr> + <tr> + <td> + <p><code>https://mozilla.org/*/b/*/</code></p> + + <p>Match HTTPS URLs hosted on "mozilla.org", whose path contains a component "b" somewhere in the middle.</p> + </td> + <td> + <p><code>https://mozilla.org/a/b/c/</code></p> + + <p><code>https://mozilla.org/d/b/f/</code></p> + + <p><code>https://mozilla.org/a/b/c/d/</code></p> + </td> + <td> + <p><code>https://mozilla.org/b/*/</code><br> + (unmatched path)</p> + + <p><code>https://mozilla.org/a/b/</code><br> + (unmatched path)</p> + </td> + </tr> + <tr> + <td> + <p><code>file:///blah/*</code></p> + + <p>Match any FILE URL whose path begins with "blah".</p> + </td> + <td> + <p><code>file:///blah/</code></p> + + <p><code>file:///blah/bleh</code></p> + </td> + <td><code>file:///bleh/</code><br> + (unmatched path)</td> + </tr> + </tbody> +</table> + +<h3 id="Invalid_match_patterns">Invalid match patterns</h3> + +<table class="fullwidth-table standard-table"> + <thead> + <tr> + <th scope="col">Invalid pattern</th> + <th scope="col">Reason</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>resource://path/</code></td> + <td>Unsupported scheme.</td> + </tr> + <tr> + <td><code>https://mozilla.org</code></td> + <td>No path.</td> + </tr> + <tr> + <td><code>https://mozilla.*.org/</code></td> + <td>"*" in host must be at the start.</td> + </tr> + <tr> + <td><code>https://*zilla.org/</code></td> + <td>"*" in host must be the only character or be followed by ".".</td> + </tr> + <tr> + <td><code>http*://mozilla.org/</code></td> + <td>"*" in scheme must be the only character.</td> + </tr> + <tr> + <td><code>file://*</code></td> + <td>Empty path: this should be "<code>file:///*</code>".</td> + </tr> + </tbody> +</table> + +<h2 id="Testing_match_patterns">Testing match patterns</h2> + +<p>When writing extensions, you don't generally work with match patterns directly: usually you pass a match pattern string into an API, and the API constructs a match pattern and uses it to test URLs. However, if you're trying to work out which match pattern to use, or debugging a problem with one, it can be useful to be able to create and test match patterns directly. This section explains how to do this.</p> + +<p>Note that the code here <strong>will not work</strong> in an extension, and is only provided to help manually test match patterns using the console.</p> + +<p>First, open the developer tool settings and check the setting marked "Enable browser chrome and add-on debugging toolboxes":</p> + +<p>{{EmbedYouTube("JDEe2fyFpHE")}}</p> + +<p>Next, open the "Browser Console":</p> + +<p>{{EmbedYouTube("mfuBMje6dA4")}}</p> + +<p>This gives you a command line that you can use to execute privileged JavaScript in Firefox.</p> + +<div class="warning"> +<p>Because code running in the Browser Console has system privileges, any time you use it to run code, you need to understand exactly what the code is doing. That includes the code samples in this article.</p> +</div> + +<p>Now paste this code into the command line and press <kbd>enter</kbd>:</p> + +<pre class="brush: js">Cu.import("resource://gre/modules/MatchPattern.jsm"); +Cu.import("resource://gre/modules/BrowserUtils.jsm");</pre> + +<p>This does two things:</p> + +<ul> + <li>imports "MatchPattern.jsm": this is the system module that implements match patterns. Specifically, the module contains a constructor for <code>MatchPattern</code> objects. <code>MatchPattern</code> objects define a function called <code>matches()</code>, that takes a URI and returns <code>true</code> or <code>false</code>.</li> + <li>imports "BrowserUtils.jsm": this includes a function <code>makeURI()</code>, that converts a string into an <code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIURI">nsIURI</a></code> object. <code>nsIURI</code> is the type that <code>matches()</code> expects to receive.</li> +</ul> + +<p>Now you can construct <code>MatchPattern</code> objects, construct URIs, and check whether the URIs match:</p> + +<pre class="brush: js">var match = new MatchPattern("*://mozilla.org/"); + +var uri = BrowserUtils.makeURI("https://mozilla.org/"); +match.matches(uri); // < true + +uri = BrowserUtils.makeURI("https://mozilla.org/path"); +match.matches(uri); // < false</pre> + +<h2 id="Converting_Match_Patterns_to_Regular_Expressions">Converting Match Patterns to Regular Expressions</h2> + +<p>All match patterns can be represented by regular expressions. This code converts a match pattern to a regular expression:</p> + +<pre class="brush: js">/** + * Transforms a valid match pattern into a regular expression + * which matches all URLs included by that pattern. + * + * @param {string} pattern The pattern to transform. + * @return {RegExp} The pattern's equivalent as a RegExp. + * @throws {TypeError} If the pattern is not a valid MatchPattern + */ +function matchPatternToRegExp(pattern) { + if (pattern === '') { + return (/^(?:http|https|file|ftp|app):\/\//); + } + + const schemeSegment = '(\\*|http|https|file|ftp)'; + const hostSegment = '(\\*|(?:\\*\\.)?(?:[^/*]+))?'; + const pathSegment = '(.*)'; + const matchPatternRegExp = new RegExp( + `^${schemeSegment}://${hostSegment}/${pathSegment}$` + ); + + let match = matchPatternRegExp.exec(pattern); + if (!match) { + throw new TypeError(`"${pattern}" is not a valid MatchPattern`); + } + + let [, scheme, host, path] = match; + if (!host) { + throw new TypeError(`"${pattern}" does not have a valid host`); + } + + let regex = '^'; + + if (scheme === '*') { + regex += '(http|https)'; + } else { + regex += scheme; + } + + regex += '://'; + + if (host && host === '*') { + regex += '[^/]+?'; + } else if (host) { + if (host.match(/^\*\./)) { + regex += '[^/]*?'; + host = host.substring(2); + } + regex += host.replace(/\./g, '\\.'); + } + + if (path) { + if (path === '*') { + regex += '(/.*)?'; + } else if (path.charAt(0) !== '/') { + regex += '/'; + regex += path.replace(/\./g, '\\.').replace(/\*/g, '.*?'); + regex += '/?'; + } + } + + regex += '$'; + return new RegExp(regex); +} +</pre> diff --git a/files/ar/mozilla/add-ons/webextensions/ما_هي_امتدادات_الويب/index.html b/files/ar/mozilla/add-ons/webextensions/ما_هي_امتدادات_الويب/index.html new file mode 100644 index 0000000000..b407fc48a7 --- /dev/null +++ b/files/ar/mozilla/add-ons/webextensions/ما_هي_امتدادات_الويب/index.html @@ -0,0 +1,56 @@ +--- +title: ما هي الامتدادات؟ +slug: Mozilla/Add-ons/WebExtensions/ما_هي_امتدادات_الويب +translation_of: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions +--- +<div>{{AddonSidebar}}</div> + +<p>An extension adds features and functions to a browser. It’s created using familiar web-based technologies—HTML, CSS, and JavaScript. It can take advantage of the same web APIs as JavaScript on a web page, but an extension also has access to its own set of JavaScript APIs. This means that you can do a lot more in an extension than you can with code in a web page. Here are just a few examples of the things you can do:</p> + +<p><strong>Enhance or complement a website</strong>: Use an add-on to deliver additional in-browser features or information from your website. Allow users to collect details from pages they visit to enhance the service you offer.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15808/Amazon_add_on.png"></p> + +<p>Examples: <a href="https://addons.mozilla.org/en-US/firefox/addon/amazon-browser-bar/">Amazon Assistant for Firefox</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/onenote-clipper/">OneNote Web Clipper</a>, and <a href="https://addons.mozilla.org/en-US/firefox/addon/grammarly-1/">Grammarly for Firefox</a></p> + +<p><strong>Let users show their personality</strong>: Browser extensions can manipulate the content of web pages; for example, letting users add their favorite logo or picture as a background to every page they visit. Extensions may also enable users to update the look of the Firefox UI, the same way standalone <a href="https://developer.mozilla.org/en-US/Add-ons/Themes/Theme_concepts">theme add-ons</a> do.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15809/MyWeb_New_Tab_add_on.png" style="height: 398px; width: 540px;"></p> + +<p>Examples: <a href="https://addons.mozilla.org/en-US/firefox/addon/myweb-new-tab/">MyWeb New Tab</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/tabliss/">Tabliss</a>, and <a href="https://addons.mozilla.org/en-US/firefox/addon/vivaldifox/">VivaldiFox</a></p> + +<p><strong>Add or remove content from web pages</strong>: You might want to help users block intrusive ads from web pages, provide access to a travel guide whenever a country or city is mentioned in a web page, or reformat page content to offer a consistent reading experience. With the ability to access and update both a page’s HTML and CSS, extensions can help users see the web the way they want to.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15807/ublock_origin_add_on.png" style="height: 480px; width: 640px;"></p> + +<p>Examples: <a href="https://addons.mozilla.org/en-US/firefox/addon/ublock-origin/">uBlock Origin</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/reader/">Reader</a>, and <a href="https://addons.mozilla.org/en-US/firefox/addon/toolbox-google-play-store/">Toolbox for Google Play Store™</a></p> + +<p><strong>Add tools and new browsing features</strong>: Add new features to a taskboard, or generate QR code images from URLs, hyperlinks, or page text. With flexible UI options and the power of the <a href="/en-US/Add-ons/WebExtensions">WebExtensions APIs</a> you can easily add new features to a browser. And, you can enhance almost any website’s features or functionality, it doesn't have to be your website.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15806/QR_Code_Image_Generator_add_on.png"></p> + +<p>Examples: <a href="https://addons.mozilla.org/en-US/firefox/addon/swimlanes-for-trello/">Swimlanes for Trello</a> and <a href="https://addons.mozilla.org/en-US/firefox/addon/tomato-clock/">Tomato Clock</a></p> + +<p><strong>Games</strong>: Offer traditional computer games with off-line play features, or explore new game possibilities; for example, by incorporating gameplay into everyday browsing.</p> + +<p> <img alt="" src="https://mdn.mozillademos.org/files/15805/Asteroids_in_Popup_add_on%20.png" style="height: 438px; width: 700px;"></p> + +<p>Examples: <a href="https://addons.mozilla.org/en-US/firefox/addon/asteroids-in-popup/">Asteroids in Popup</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/solitaire-card-game-new-tab/">Solitaire Card Game New Tab</a>, and <a href="https://addons.mozilla.org/en-US/firefox/addon/2048-prime/">2048 Prime</a>.</p> + +<p><strong>Add development tools</strong>: You may provide web development tools as your business or have developed a useful technique or approach to web development that you want to share. Either way, you can enhance the built-in Firefox developer tools by adding a new tab to the developer toolbar.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15804/aXe_Developer_Tools_add_on.png" style="height: 261px; width: 700px;"></p> + +<p>Examples: <a href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/">Web Developer</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/react-devtools/">Web React Developer Tools</a>, and <a href="https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/">aXe Developer Tools</a></p> + +<p>Extensions for Firefox are built using the <a href="/en-US/Add-ons/WebExtensions">WebExtensions APIs</a>, a cross-browser system for developing extensions. To a large extent, the API is compatible with the <a class="external external-icon" href="https://developer.chrome.com/extensions">extension API</a> supported by Google Chrome and Opera. Extensions written for these browsers will in most cases run in Firefox or Microsoft Edge with just a few <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension">changes</a>. The API is also fully compatible with <a href="/en-US/Firefox/Multiprocess_Firefox">multiprocess Firefox</a>.</p> + +<p>If you have ideas or questions, or need help migrating a legacy add-on to WebExtensions APIs, you can reach us on the <a class="external external-icon" href="https://mail.mozilla.org/listinfo/dev-addons">dev-addons mailing list</a> or in <a href="irc://irc.mozilla.org/extdev">#addons</a> on <a class="external external-icon" href="https://wiki.mozilla.org/IRC">IRC</a>.</p> + +<h2 id="Whats_next">What's next?</h2> + +<ul> + <li>Walk through the development of a simple extension in <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension">Your first extension</a>.</li> + <li>Learn about the structure of an extension in <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">Anatomy of an extension</a>.</li> + <li>Try out some example extensions in <a href="/en-US/Add-ons/WebExtensions/Examples">Example extensions</a>.</li> +</ul> diff --git a/files/ar/mozilla/connect/index.html b/files/ar/mozilla/connect/index.html new file mode 100644 index 0000000000..d3b00b5d26 --- /dev/null +++ b/files/ar/mozilla/connect/index.html @@ -0,0 +1,96 @@ +--- +title: Connect with Mozilla +slug: Mozilla/Connect +translation_of: Mozilla/Connect +--- +<div class="summary"> +<p><span class="seoSummary">0Enable, inspire and collaborate to make the Web the primary platform used to create experiences across all connected devices.</span></p> +</div> + + +<div> +<div class="column-container dev-program-callouts dev-program-block dev-program-first dev-program-column-wrapper"> +<div class="dev-program-callout"> +<div class="callout-link-container"> +<h2 id="Hacks_blog">Hacks blog</h2> + +<p>A key resource for people developing for the Open Web, the Mozilla Hacks blog offers news and discussion of the latest in Web technologies and browser features.</p> + +<div class="callout-link-wrapper"><a class="callout-link ignore-external" href="https://hacks.mozilla.org/" style="white-space: normal;">Read it now </a></div> +</div> +</div> + +<div class="dev-program-callout"> +<div class="callout-link-container"> +<h2 id="Help_QA">Help Q&A</h2> + +<p>Discuss the Web and Web apps on Stack Overflow, where you can exchange ideas with other Web developers.<br> + <span class="smaller"><strong>{{anch("Developer discussions", "Search the Q&A below")}}</strong></span></p> + +<div class="callout-link-wrapper"><a class="callout-link ignore-external" href="http://stackoverflow.com/r/mozilla" style="white-space: normal;">Mozilla Q&A on Stack Overflow </a></div> +</div> +</div> + +<div class="dev-program-callout"> +<div class="callout-link-container"> +<h2 id="Join_MDN">Join MDN</h2> + +<p>Sign up for MDN! You will able to edit the documentation here, create a profile to show off your work, and get access to features over time as we roll them out.</p> + +<div class="callout-link-wrapper"><a class="callout-link" href="/profile/edit" style="white-space: normal;">Join or log in </a></div> +</div> +</div> +</div> + +<div class="dev-program-explanation dev-program-block"> +<h2 id="Connect_with_Mozilla">Connect with Mozilla</h2> + +<p>Developers are creating the future by building services and apps for people all over the world. The goal of Mozilla Developer Relations is to help developers to use open and standardized web technologies to succeed in achieving their goals. In addition to the documentation here on MDN, we offer help and other resources towards this goal, through various channels. We invite you to connect, learn, and share your own knowledge.</p> + +<p>We are offering help through Q&A on Stack Overflow, to solve specific technical issues and challenges you might have. We also have a newsletter keeping you informed on the latest happenings in the web scene around web apps and more. <a href="https://marketplace.firefox.com/developers/#newsletter-signup">Subscribe to the Apps & Hacks newsletter.</a></p> + +<p>We have a lot of plans and ideas for iteratively expanding our Developer Relations offerings, and we want you involved as we do so! So, <a href="http://stackoverflow.com/r/mozilla">follow the tags on Stack Overflow</a>, <a href="https://hacks.mozilla.org/">subscribe to the Hacks blog</a>, <a href="https://marketplace.firefox.com/developers/#newsletter-signup">subscribe to the newsletter, </a>and <a href="/profile/edit">sign up for an account</a>!</p> +</div> + +<div class="column-container dev-program-block"> +<div class="column-half" id="Developer_discussions"> +<h2 id="QA_on_Stack_Overflow_See_all_QA...">Q&A on Stack Overflow <a class="heading-link" href="http://stackoverflow.com/r/mozilla">See all Q&A...</a></h2> + +<p>We have Q&A to discuss challenges and issues when developing, in particular for Firefox OS and the Open Web on mobile. It's available on Stack Overflow under the easy URL <a href="http://stackoverflow.com/r/mozilla">http://stackoverflow.com/r/mozilla</a>.</p> + + +<div class="stack-form">Stack form</div> + +<h3 id="Latest_QA_Topics">Latest Q&A Topics</h3> +</div> + +<div class="column-half dev-program-hacks dev-program-block"> </div> +</div> + +<p class="dev-program-block"><img alt="Developers at a Firefox OS workshop in Madrid." src="https://mdn.mozillademos.org/files/7479/PhonesUp.jpg" style="display: block; height: 359px; margin: 0px auto; max-width: 100%; width: 720px;"></p> + +<div class="column-container dev-program-block"> +<div class="column-7 dev-program-events"> +<h2 id="Where_is_Mozilla_View_attendees_and_details_on_our_Events_page...">Where is Mozilla? <a class="heading-link" href="https://developer.mozilla.org/en/events">View attendees and details on our Events page... </a></h2> + +<p>Here is a listing of events where Mozilla representatives will be speaking. Make sure to talk to them!</p> +</div> + +<div class="column-5"> +<h2 id="Other_resources">Other resources</h2> + +<ul class="no-bullets"> + <li><a href="http://www.youtube.com/user/mozhacks">Mozilla Hacks on YouTube</a> + + <ul> + <li><a href="http://www.youtube.com/playlist?list=PLo3w8EB99pqIHIUUv08hBCHq1OgPKhdo0">Firefox OS videos</a></li> + <li><a href="http://www.youtube.com/playlist?list=PLo3w8EB99pqLZNY22xKbTEzMfYo9PXAlm">Firefox Developer Tools videos</a></li> + </ul> + </li> + <li><a href="https://twitter.com/mozhacks">@mozhacks on Twitter</a></li> +</ul> +</div> +</div> +</div> + +<p> </p> diff --git a/files/ar/mozilla/developer_guide/adding_apis_to_the_navigator_object/index.html b/files/ar/mozilla/developer_guide/adding_apis_to_the_navigator_object/index.html new file mode 100644 index 0000000000..85ae437ce9 --- /dev/null +++ b/files/ar/mozilla/developer_guide/adding_apis_to_the_navigator_object/index.html @@ -0,0 +1,49 @@ +--- +title: Adding APIs to the navigator object +slug: Mozilla/Developer_guide/Adding_APIs_to_the_navigator_object +translation_of: Mozilla/Developer_guide/Adding_APIs_to_the_navigator_object +--- +<p><font><font>{{gecko_minversion_header ("9.0")}}</font></font></p> + +<p><font><font>بدءًا من الإصدار 9.0 من Gecko {{geckoRelease ("9.0")}} ، يمكنك بسهولة إضافة واجهات برمجة تطبيقات جديدة إلى كائن {{domxref ("window.navigator")}} باستخدام إدارة الفئات. </font><font>ما عليك سوى إضافة إدخال إلى فئة "JavaScript-navigator-property".</font></font></p> + +<p><font><font>يجب تطبيق الكائن كمكون XPCOM. </font><font>تتطلب كل طريقة أدناه لإضافة كائنات جديدة إلى كائن المستكشف أن يكون الكائن الجديد مكون XPCOM مسجل. </font><font>يمكنك أن تقرأ عن </font></font><a href="/en-US/Add-ons/Code_snippets/JS_XPCOM#Implementing_XPCOM_components_in_JavaScript"><font><font>إنشاء وتسجيل مكونات XPCOM في JavaScript</font></font></a><font><font> .</font></font></p> + +<h2 id="إضافة_كائن_برمجيًا_إلى_الملاح"><font><font>إضافة كائن برمجيًا إلى الملاح</font></font></h2> + +<pre class="notranslate"><font><font>var categoryManager = Components.classes ["@ mozilla.org/categorymanager؛1"]</font></font><font><font> + .getService (Components.interfaces.nsICategoryManager) ؛</font></font> +<font><font> +categoryManager.addCategoryEntry ("JavaScript-navigator-property"، "myApi"،</font></font> + MY_CONTRACT_ID, false, true); +</pre> + +<p>This adds a new object, <code>myApi</code>, to the {{ domxref("window.navigator") }} object. The newly added object is a reference to the component specified by the contract ID <code>MY_CONTRACT_ID</code>. You can learn more about Contract IDs are unique text identifiers for XPCOM components.</p> + +<h2 id="Using_a_manifest_to_add_an_object_to_navigator">Using a manifest to add an object to navigator</h2> + +<p>You can also add an object to the {{ domxref("window.navigator") }} object by using the <a href="/en-US/docs/Chrome_Registration">chrome manifest</a> of an add-on:</p> + +<pre class="notranslate">component {ffffffff-ffff-ffff-ffff-ffffffffffff} MyComponent.js +contract @mozilla.org/mycomponent;1 {ffffffff-ffff-ffff-ffff-ffffffffffff} +category JavaScript-navigator-property myComponent @mozilla.org/mycomponent;1 +</pre> + +<p><font><font>قم بإنشاء GUID واستبدال أقسام "ffff" في كل من سطور المكون والعقد بـ GUID الخاص بك.</font></font></p> + +<p><font><font>هذا يضيف واجهة برمجة تطبيقات جديدة </font></font><code>myComponent</code><font><font>، إلى كائن الملاح ، والذي يمكنك الوصول إليه بعد ذلك باسم </font></font><code>navigator.myComponent</code><font><font>.</font></font></p> + +<h2 id="مثال_من_العالم_الحقيقي"><font><font>مثال من العالم الحقيقي</font></font></h2> + +<p><font><font>يمكنك مشاهدة مثال على كيفية استخدام ذلك في Firefox من خلال إلقاء نظرة على كيفية </font></font><code>mozApps</code><font><font>تنفيذ واجهة برمجة التطبيقات:</font></font></p> + +<ul> + <li><font><font>{{source ("dom / apps / Webapps.manifest")}}</font></font></li> + <li><font><font>{{source ("dom / apps / Webapps.js")}}</font></font></li> +</ul> + +<h2 id="أنظر_أيضا"><font><font>أنظر أيضا</font></font></h2> + +<ul> + <li><font><font>{{interface ("nsICategoryManager")}}</font></font></li> +</ul> diff --git a/files/ar/mozilla/developer_guide/index.html b/files/ar/mozilla/developer_guide/index.html new file mode 100644 index 0000000000..a651609a43 --- /dev/null +++ b/files/ar/mozilla/developer_guide/index.html @@ -0,0 +1,107 @@ +--- +title: Developer guide +slug: Mozilla/Developer_guide +tags: + - Developing Mozilla + - Landing + - Mozilla + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Developer_guide +--- +<p><span class="seoSummary">There are lots of ways to contribute to the Mozilla project: coding, testing, improving the build process and tools, or contributing to the documentation. This guide provides information that will not only help you get started as a Mozilla contributor, but that you'll find useful to refer to even if you are already an experienced contributor.</span></p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Documentation_topics">Documentation topics</h2> + +<dl> + <dt><a href="/en-US/docs/Introduction" title="Introduction">Getting Started</a></dt> + <dd>A step-by-step beginner's guide to getting involved with Mozilla.</dd> + <dt><a href="/en-US/docs/Mozilla/Developer_guide/Articles_for_new_developers">For new Mozilla developers</a></dt> + <dd>A directory of articles which are particularly helpful for new Mozilla developers.</dd> +</dl> + +<dl> + <dt><a class="internal" href="/en-US/docs/Developer_Guide/Source_Code" title="en-US/docs/Developer_Guide/Source_Code">Working with Mozilla Source Code</a></dt> + <dd>A code overview, how to get the code, and the coding style guide.</dd> + <dt><a class="internal" href="/en-US/docs/Developer_Guide/Build_Instructions" title="en-US/docs/Developer_Guide/Build_Instructions">Build Instructions</a></dt> + <dd>How to build Firefox, Thunderbird, SeaMonkey, or other Mozilla applications.</dd> + <dt><a class="internal" href="/en-US/docs/Developer_Guide/Editor_Configuration" title="en-US/docs/Developer_Guide/Editor_Configuration">Editor Configuration</a></dt> + <dd>Tips on setting up your favorite IDE or text editor to work with Mozilla projects.</dd> + <dt><a href="/en-US/docs/Developer_Guide/Development_process_overview" title="en-US/docs/Developer Guide/Development process overview">Development process overview</a></dt> + <dd>An overview of the entire Mozilla development process.</dd> + <dt><a href="/en-US/docs/Mozilla/Multiple_Firefox_Profiles" title="en-US/docs/Mozilla/Multiple_Firefox_Profiles">Managing multiple profiles</a></dt> + <dd>When working with prerelease versions of Firefox, it's often helpful to have multiple Firefox profiles, such as one for each channel, or for different kinds of testing.</dd> + <dt><a class="internal" href="/en-US/docs/Mozilla_automated_testing" title="en-US/docs/Mozilla automated testing">Automated Testing</a></dt> + <dd>How to run Mozilla's automated tests, and how to write new tests.</dd> + <dt><a class="internal" href="/en-US/docs/Developer_Guide/How_to_Submit_a_Patch" title="en-US/docs/Getting your patch in the tree">How to submit a patch</a></dt> + <dd>After getting your patch written, you need to get it checked into the tree. This article explains the review process and how to get your patch approved.</dd> + <dt><a href="/en-US/docs/Developer_Guide/Getting_documentation_updated" title="en-US/docs/Developer_Guide/Getting documentation updated">Getting documentation updated</a></dt> + <dd>How to ensure that documentation is kept up to date as you develop.</dd> + <dt><a class="internal" href="/en-US/docs/Mozilla_Modules_and_Module_Ownership" title="en-US/docs/Mozilla Modules and Module Ownership">Mozilla modules and module ownership</a></dt> + <dd>This article provides information about Mozilla's modules, what the role of a module owner is, and how module owners are selected.</dd> + <dt><a class="internal" href="/en-US/docs/Code_snippets" title="en-US/docs/Code_snippets">Code snippets</a></dt> + <dd>Useful code samples for a wide variety of things you might need to figure out how to do.</dd> + <dt><a class="internal" href="/en-US/docs/Mozilla_Development_Strategies" title="en-US/docs/Mozilla Development Strategies">Mozilla development strategies</a></dt> + <dd>Tips for how to make the most of your time working on the Mozilla project.</dd> + <dt><a class="internal" href="/en-US/docs/Debugging" title="en-US/docs/Debugging">Debugging</a></dt> + <dd>Find helpful tips and guides for debugging Mozilla code.</dd> + <dt><a href="/en-US/docs/Performance" title="en-US/docs/Performance">Performance</a></dt> + <dd>Performance guides and utilities to help you make your code perform well (and to play nicely with others).</dd> + <dt><a class="internal" href="/en-US/docs/The_Mozilla_platform" title="en-US/docs/The Mozilla platform">The Mozilla platform</a></dt> + <dd>Information about the workings of the Mozilla platform.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla">Mozilla</a></dt> + <dd>Much more additional information about Mozilla coding practices.</dd> + <dt><a href="/en-US/docs/Developer_Guide/Adding_APIs_to_the_navigator_object" title="en-US/docs/Developer_Guide/Adding_APIs_to_the_navigator_object">Adding APIs to the navigator object</a> {{ gecko_minversion_inline("9.0") }}</dt> + <dd>How to augment the {{ domxref("window.navigator") }} object with additional APIs.</dd> + <dt><a href="/en-US/docs/Developer_Guide/Interface_Compatibility" title="en-US/docs/Developer Guide/Interface Compatibility">Interface Compatibility</a></dt> + <dd>Guidelines for modifying scriptable and binary APIs in Mozilla.</dd> + <dt><a href="/en-US/docs/Developer_Guide/Customizing_Firefox" title="en-US/docs/Developer Guide/Customizing Firefox">Customizing Firefox</a></dt> + <dd>Information about creating customized versions of Firefox.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Task_graph" title="en-US/docs/Developer Guide/Customizing Firefox">Task-Graph Generation</a></dt> + <dd>What controls the jobs that run on a push to version control? How can you change that?</dd> + <dt><a href="/en-US/docs/Developer_Guide/Virtual_ARM_Linux_environment" title="Virtual ARM Linux environment">Virtual ARM Linux environment</a></dt> + <dd>How to set up an ARM emulator running Linux for testing ARM-specific, but not necessarily platform-specific, code. Useful for mobile developers.</dd> + <dt><a href="/en-US/docs/Introduction/Obsolete_Build_Caveats_and_Tips" title="Obsolete Build Caveats and Tips">Obsolete Build Caveats and Tips</a></dt> + <dd>A place to put build tips which are no longer relevant to building the latest version of the code from main but are relevant when building old codebases.</dd> + <dt><a href="https://firefox-source-docs.mozilla.org/">Firefox Source Docs</a></dt> + <dd>Web-hosted documentation built from the mozilla-central source code.</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Tools" id="Tools">Tools</h2> + +<dl> + <dt><a class="link-https" href="https://bugzilla.mozilla.org/" title="https://bugzilla.mozilla.org/">Bugzilla</a></dt> + <dd>The <a class="internal" href="/en-US/docs/Bugzilla" title="en-US/docs/Bugzilla">Bugzilla</a> database used to track issues for Mozilla projects.</dd> + <dt><a href="https://dxr.mozilla.org/">DXR</a></dt> + <dd>Next generation of searching Mozilla's source code. In active development.</dd> + <dt><a href="https://www.searchfox.org/">SearchFox</a></dt> + <dd>Another option for Mozilla code searching. Indexes JS as well as C++, includes blame capabilities. In active development.</dd> + <dt><a class="internal" href="/en-US/docs/Mercurial" title="en-US/docs/Mercurial">Mercurial</a></dt> + <dd>The distributed version-control system used to manage Mozilla's source code.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/Using_the_VM">Mozilla build VM</a></dt> + <dd>A VirtualBox compatible virtual machine configured with all the software needed to build and work on Firefox.</dd> + <dt><a class="external" href="https://docs.taskcluster.net">TaskCluster</a></dt> + <dd>TaskCluster is the task execution framework that supports Mozilla's continuous integration and release processes.</dd> + <dt><a class="external" href="https://treeherder.mozilla.org/">Treeherder</a></dt> + <dd>Treeherder shows the status of the tree (whether or not it currently builds successfully). Check this before checking in and out, to be sure you're working with a working tree.</dd> + <dt><a href="https://treeherder.mozilla.org/perf.html">Perfherder</a></dt> + <dd>Perfherder is used to aggregate the results of automated performance tests against the tree.</dd> + <dt><a class="internal" href="/en-US/docs/Crash_reporting" title="en-US/docs/Crash reporting">Crash tracking</a></dt> + <dd>Information about the <a class="link-https" href="https://crash-reports.mozilla.com/reports">Socorro</a> crash reporting system.</dd> + <dt><a href="/en-US/docs/Developer_Guide/Callgraph" title="en-US/docs/Developing Mozilla/Callgraph">Callgraph</a></dt> + <dd>A tool to help perform static analysis of the Mozilla code by generating callgraphs automatically.</dd> + <dt><a class="external" href="https://www.mozilla.org/en-US/about/forums/">Developer forums</a></dt> + <dd>A topic-specific list of discussion forums and mailing lists where you can talk about Mozilla development issues.</dd> + <dt><a class="external" href="https://web.archive.org/web/20160813112326/http://www.codefirefox.com:80/cheatsheet">Mozilla Platform Development Cheat Sheet</a> (archive.org)</dt> + <dd>Brian Bondy's list of frequently referenced information for platform developers. Brian Bondy <a href="https://brianbondy.com/blog/173/shutting-down-code-firefox">took down</a> codefirefox.com, but the archived cheatsheet might still be useful.</dd> + <dt><a class="external" href="http://www.codefirefox.com/videos/">Firefox development video tutorials</a></dt> + <dd>Brian Bondy's video tutorials on Firefox development.</dd> +</dl> +</div> +</div> + +<p> </p> diff --git a/files/ar/mozilla/developer_guide/source_code/index.html b/files/ar/mozilla/developer_guide/source_code/index.html new file mode 100644 index 0000000000..f8bddd50b3 --- /dev/null +++ b/files/ar/mozilla/developer_guide/source_code/index.html @@ -0,0 +1,48 @@ +--- +title: Working with Mozilla source code +slug: Mozilla/Developer_guide/Source_Code +translation_of: Mozilla/Developer_guide/Source_Code +--- +<p>The articles below will help you get your hands on the Mozilla source code, learn to navigate the code, and how to get the changes you propose checked into the tree.</p> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt><a class="internal" href="/en-US/Developer_Guide/Source_Code/Mercurial" title="En/Mozilla Source Code (Mercurial)">Getting the code from the Mercurial repository</a></dt> + <dd>If you plan to contribute to the Mozilla project, the best way to get the code is to check it out from the version control repository. Learn how to do that here.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/Using_the_VM">Getting a pre-configured Mozilla build system virtual machine</a></dt> + <dd>This is the easiest way to get started: use a VirtualBox virtual machine which is already configured with a complete build environment for you to use. Just boot the VM and build!</dd> + <dt><a class="internal" href="/en-US/Developer_Guide/Source_Code/Downloading_Source_Archives" title="En/Mozilla Source Code (HTTP//FTP)">Downloading the source code</a></dt> + <dd>If you want to fetch the code for a specific release of a particular Mozilla product, you may prefer to download a source code archive.</dd> + <dt><a class="internal" href="/en/Viewing_and_searching_Mozilla_source_code_online" title="En/Viewing and searching Mozilla source code online">Viewing and searching Mozilla source code online</a></dt> + <dd>Learn how to use MXR, Mozilla's online search and browsing tool for accessing the source code. This isn't a good way to download the code, but is a great way to search it.</dd> + <dt><a class="internal" href="/en/Mozilla_Source_Code_Directory_Structure" title="en/Mozilla Source Code Directory Structure">Navigating the Mozilla source code</a></dt> + <dd>Learn about the various folders in the Mozilla source tree, and how to find what you're looking for.</dd> + <dt><a class="external" href="/en/Introduction#Find_a_bug_we%27ve_identified_as_a_good_fit_for_new_contributors." title="/en/Introduction#Find_a_bug_we%27ve_identified_as_a_good_fit__for_new_contributors.">Bugs for newcomers</a></dt> + <dd>If you are new to the project and want something to work on, look here.</dd> +</dl> +</div> + +<div class="section"> +<dl> + <dt><a class="internal" href="/en-US/Developer_Guide/Coding_Style" title="En/Mozilla Coding Style Guide">Mozilla Coding Style Guide</a></dt> + <dd>The code style guide provides information about how you should format your source code to ensure that you don't get mocked by the reviewers.</dd> + <dt><a href="/en-US/Developer_Guide/Interface_development_guide" title="En/Developer Guide/Interface development guide">Interface development guide</a></dt> + <dd>Guidelines and documentation for how to create and update XPCOM interfaces.</dd> + <dt><a href="/en-US/docs/Mozilla/Developer_guide/CSS_Guidelines">The Firefox codebase: CSS Guidelines</a></dt> + <dd>This document contains guidelines defining how CSS inside the Firefox codebase should be written, it is notably relevant for Firefox front-end engineers.</dd> + <dt><a href="/en-US/docs/Mozilla/Developer_guide/SVG_Guidelines">SVG Cleanup Guide</a></dt> + <dd>Guidelines and best practices for shipping new SVGs.</dd> + <dt><a class="link-https" href="https://wiki.mozilla.org/Build:TryServer" title="https://wiki.mozilla.org/Build:TryServer">Try Servers</a></dt> + <dd>Mozilla products build on at least three platforms. If you don't have access to them all, you can use the try servers to test your patches and make sure the tests pass.</dd> + <dt><a class="internal" href="/en/Creating_a_patch" title="En/Creating a patch">Creating a patch</a></dt> + <dd>Once you've made a change to the Mozilla code, the next step (after making sure it works) is to create a patch and submit it for review. <em>This article needs to be updated fully for Mercurial.</em></dd> + <dt><a class="external" href="https://www.mozilla.org/hacking/committer/" title="https://www.mozilla.org/hacking/committer/">Getting commit access to the source code</a></dt> + <dd>Feel ready to join the few, the proud, the committers? Find out how to get check-in access to the Mozilla code.</dd> + <dt><a class="internal" href="/en-US/Developer_Guide/Source_Code/CVS" title="En/Mozilla Source Code (CVS)">Getting older Mozilla code from CVS</a></dt> + <dd>Older versions of the Mozilla source code, as well as the current versions of NSS and NSPR, are kept in a CVS repository. Learn about that in this article.</dd> +</dl> +</div> +</div> + +<p> </p> diff --git a/files/ar/mozilla/firefox/index.html b/files/ar/mozilla/firefox/index.html new file mode 100644 index 0000000000..ab373eb27d --- /dev/null +++ b/files/ar/mozilla/firefox/index.html @@ -0,0 +1,72 @@ +--- +title: فايرفوكس +slug: Mozilla/Firefox +tags: + - فايرفوكس + - موزيلا +translation_of: Mozilla/Firefox +--- +<div>{{FirefoxSidebar}}</div> + +<p dir="rtl"><span class="seoSummary">يعد فايرفوكس متصفح موزيلا الأكثر شعبية، وهو متاح لمنصات متعددة على سطح المكتب، بما فيها ويندوز، وماك، ولينكس كما يتوفر على جميع هواتف الأندرويد والأيفون. بفضل التوافقية الممتازة، وأحدث تقنيات الويب، وتقنيات التطوير القوية، يعد فايرفوكس خياراً ممتازاً لكلٍ من مطوري الويب والمستخدمين العاديين.</span></p> + +<p dir="rtl"><span class="seoSummary">يعد فايرفوكس مشروع مفتوح المصدر. فمعظم النص المصدري قد ساهم بكتابته مجتمع ضخم من المتطوعين. هنا يمكنك معرفة المزيد عن كيفية المساهمة في المشروع، وسوف تجد أيضاً روابط لمعلومات حول تعلم تطوير إضافات لمتصفح فايرفوكس، واستخدام أدوات المطورين في متصفح، وغيرها من الموضوعات.</span></p> + +<div class="summary"> +<p dir="rtl">تعرّف على كيفية إنشاء إضافات لمتصفح <a href="https://www.mozilla.org/firefox/">فايرفوكس</a>، وكيفية تطويره وبناءه، وكيف تعمل الأجزاء الداخلية لفايرفوكس والمشاريع الفرعية الأخرى.</p> +</div> + +<ul class="card-grid"> + <li dir="rtl"><span>ملاحظات الإصدار للمطور</span> + + <p dir="rtl"><a href="/ar/Firefox/Releases">تركز هذه الملاحظات على المطور</a>. تعرّف على القدرات الجديدة القادمة لكلاً من مواقع الويب والإضافات في كل إصدار جديد من فايرفوكس.</p> + </li> + <li dir="rtl"><span>توثيقات المشروع</span> + <p>احصل على معلومات مُفصلة حول <a href="/ar/docs/Mozilla">الأجزاء الداخلية</a> ونظام بناء فايرفوكس، لتصبح قادراً على فهم النص المصدري للمشروع.</p> + </li> + <li dir="rtl"><span>دليل المطور</span> + <p>يوفر <a href="/ar/docs/Mozilla/Developer_guide">دليل المطور</a> معلومات حول كيفية الحصول النص المصدري لمتصفح فايرفوكس وترجمته (تجميعه)، وكيف يمكنك فهم آلية عمله، والمساهمة في المشروع.</p> + </li> +</ul> + +<h2 dir="rtl" id="نسخ_فايرفوكس">نسخ فايرفوكس</h2> + +<p dir="rtl">يمتلك فايرفوكس خمسة نسخ متاحة.</p> + +<h3 dir="rtl" id="النسخة_المتأخرة_(الليلية)">النسخة المتأخرة (الليلية)</h3> + +<p dir="rtl">كل ليلة نبني النص المصدري الأحدث الذي توصلنا إليه من فايرفوكس في مستودع <a href="/ar/docs/mozilla-central">موزيلا المركزي</a>. هذه الإصدارات التي نبنيها موجهة لمطورين فايرفوكس أو للذين يرغبون بتجربة أحدث التقنيات المتطورة والتي مازالت قيد التطوير.</p> + +<p dir="rtl"><a href="https://nightly.mozilla.org/" style="width: 250px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">نزّل فايرفوكس النسخة الليلية</a></p> + +<h3 dir="rtl" id="نسخة_المطورين">نسخة المطورين</h3> + +<p dir="rtl">هذه الإصدارة من فيرفوكس موجهة للمطورين. كل ستة أسابيع، نأخذ الميزات الناضجة بما فيه الكفاية، الموجودة في النسخة الليلية من فيرفوكس، ونبني نسخة جديدة من فايرفوكس إصدار المطورين. ونقوم أيضاً بإضافة بعض الميزات الإضافية للمطورين والتي تتوفر في هذه النسخة فقط.</p> + +<p dir="rtl"><a href="/ar/Firefox/Developer_Edition">تعرّف على المزيد حول نسخة فايرفوكس للمطورين</a>.</p> + +<p><a href="https://www.mozilla.org/firefox/developer/" style="width: 280px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">نزّل نسخة فايرفوكس للمطورين</a></p> + +<h3 dir="rtl" id="النسخة_التجريبية">النسخة التجريبية</h3> + +<p dir="rtl">بعض قضاء ستة أسابيع في إصدارة موزيلا للمطورين، نأخذ الميزات التي نضجت بما فيه الكفاية من نسخة المطورين، ونقوم بإنشاء نسخة جديدة من فايرفوكس الإصدارة التجربيبة. تُبنى هذه الإصدارة من أجل عشاق فايرفوكس لاختبار الميزات الجديدة القادمة للإصدار المستقر.</p> + +<p dir="rtl"><a href="https://www.mozilla.org/firefox/channel/#beta" style="width: 250px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">نزّل النسخة التجريبية</a></p> + +<h3 dir="rtl" id="نسخة_فايرفوكس_(المستقرة)">نسخة فايرفوكس (المستقرة)</h3> + +<p dir="rtl">بعد الإستقرار لستة أسابيع أخرى في الإصدار التجريبية، نكون قد أصبحنا مستعدين لشحن الميزات الجديدة لمئات الملايين من المستخدمين في إصدار جديد من فايرفوكس.</p> + +<p dir="rtl"><a href="https://www.mozilla.org/firefox/channel/#firefox" style="width: 250px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">نزّل فايرفوكس (النسخة المستقرة)</a></p> + +<h3 dir="rtl" id="النسخة_طويلة_الدعم">النسخة طويلة الدعم</h3> + +<p dir="rtl">تعد هذه النسخة إصدار طويل الأجل من فايرفوكس نسخة سطح المكتب موجهة للاستخدام من قبل المنظمات مثل المدارس، والجامعات، والشركات وغيرها من المنظمات التي تحتاج دعم موسع لعمليات النشر الجماعي.</p> + +<p dir="rtl"><a href="/ar/Firefox/Firefox_ESR">تعرّف على المزيد حول نسخة فايرفوكس طويلة الدعم</a>.</p> + +<p dir="rtl"><a href="https://www.mozilla.org/firefox/organizations/all/" style="width: 250px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">نزّل النسخة طويلة الدعم</a></p> + +<h2 dir="rtl" id="ملفات_فايرفوكس_الشخصية">ملفات فايرفوكس الشخصية</h2> + +<p dir="rtl">إذا كنت تستخدم عدة نسخ — أو حتى عدة إعدادات مختلفة — بشكل منتظم، فعليك قراءة <a href="/ar/docs/Mozilla/Firefox/Multiple_profiles">كيف تستخدم عدة ملفات شخصية مع فايرفوكس</a> لتستخدم مدير الملف الشخصي الخاص بفايرفوكس وأدوات إدارة الملفات الشخصية الأخرى لصالحك.</p> diff --git a/files/ar/mozilla/firefox/releases/index.html b/files/ar/mozilla/firefox/releases/index.html new file mode 100644 index 0000000000..63372869bd --- /dev/null +++ b/files/ar/mozilla/firefox/releases/index.html @@ -0,0 +1,26 @@ +--- +title: Firefox developer release notes +slug: Mozilla/Firefox/Releases +tags: + - Firefox + - Landing + - Mozilla + - NeedsTranslation + - Release + - TopicStub +translation_of: Mozilla/Firefox/Releases +--- +<div>{{FirefoxSidebar}}</div> + +<p class="summary">Below you'll find links to the developer release notes for every Firefox release. These lovingly-crafted notes provide details on what features and APIs were added and improved and what bugs were eliminated in each version of Firefox. All written to give developers like you the information they need most. You're welcome.</p> + +<div class="multiColumnList">{{ListSubpages("",1,1,1)}}</div> + +<p><br> + Whew! That's a lot of Firefoxen!</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Mozilla/Thunderbird/Releases">Thunderbird developer release notes</a></li> +</ul> diff --git a/files/ar/mozilla/firefox_for_android/index.html b/files/ar/mozilla/firefox_for_android/index.html new file mode 100644 index 0000000000..4844391212 --- /dev/null +++ b/files/ar/mozilla/firefox_for_android/index.html @@ -0,0 +1,45 @@ +--- +title: Firefox for Android +slug: Mozilla/Firefox_for_Android +translation_of: Mozilla/Firefox_for_Android +--- +<p>For more and more people mobile devices are the primary way, or even the only way, to access the Web.<a class="link-https" href="https://www.mozilla.org/en-US/mobile/"> Firefox for Android</a> (codenamed Fennec) is an open, hackable, standards-based browser, just like the desktop Firefox.</p> +<p>Firefox for Android constructs its user interface from native Android widgets instead of XUL: this greatly improves performance, especially startup time, and memory consumption.</p> +<h2 id="Contribute_to_Firefox_for_Android">Contribute to Firefox for Android</h2> +<p>The main starting point for information about the Firefox for Android project itself is the project <a class="link-https" href="https://wiki.mozilla.org/Mobile/Get_Involved">"Get Involved" page</a>.</p> +<p>You can help us to create and improve Firefox for Android:</p> +<ul> + <li>Help us with <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_for_Android/Compatibility_Testing" title="https://developer-new.mozilla.org/en-US/docs/Mozilla/Firefox_for_Android/Compatibility_Testing">compatibility testing</a></li> + <li>Subscribe to the <a href="https://mail.mozilla.org/listinfo/mobile-firefox-dev">mobile-firefox-dev mailing list</a></li> + <li>Contact the team over <a class="link-irc" href="irc://irc.mozilla.org/#mobile">IRC</a></li> + <li>Join in our <a class="link-https" href="https://wiki.mozilla.org/Mobile/Notes">Wednesday development meeting</a></li> + <li>Keep up to date with project news on <a class="external" href="http://planet.firefox.com/mobile/">Planet Firefox Mobile</a>, <a href="http://fennecnightly.tumblr.com/">Tumblr</a> and <a class="link-https" href="https://twitter.com/FennecNightly" title="https://twitter.com/#!/mozmobile">Twitter</a></li> + <li><a href="https://wiki.mozilla.org/Mobile/Fennec/Android" title="https://wiki.mozilla.org/Mobile/Fennec/Android">Build and hack on Firefox for Android</a> (Fennec)</li> +</ul> +<h2 id="Develop_for_the_mobile_web">Develop for the mobile web</h2> +<p>We've started putting together a guide to <a href="/En/Mobile" title="En/Mobile">designing web sites for mobile devices</a>.</p> +<p>With Firefox for Android, you've got access a number of APIs that expose the underlying capabilities of the device, closing the gap between the Web and native applications:</p> +<ul> + <li><a class="external" href="http://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/" title="http://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/">Battery</a></li> + <li><a href="/en/DOM/Using_the_Camera_API" title="Using the Camera API">Camera</a></li> + <li><a href="/en/API/WebTelephony/Introduction_to_WebTelephony" title="Introduction to WebTelephony">WebTelephony</a></li> + <li><a href="/en/API/WebSMS/Introduction_to_WebSMS" title="Introduction to WebSMS">WebSMS</a></li> + <li><a href="/En/Using_geolocation" title="Using geolocation">Geolocation</a></li> + <li><a href="/en/Detecting_device_orientation" title="https://developer.mozilla.org/en/detecting_device_orientation">Orientation</a></li> + <li><a href="/en/WebAPI/Web_Activities" title="Web Activities">Web Activities</a></li> +</ul> +<p>To test your web site on Firefox for Android, you can <a class="link-https" href="https://www.mozilla.org/en-US/mobile/">install it on an Android device</a> or <a class="link-https" href="https://wiki.mozilla.org/Mobile/Fennec/Android/Emulator">run it on your desktop using the Android Emulator</a>.</p> +<h2 id="Build_mobile_add-ons">Build mobile add-ons</h2> +<p><a href="/en/Extensions/Mobile" title="en/Extensions/Firefox_on_Android">Firefox for Android supports add-ons</a> using the exact same <a href="/en/Extensions" title="en/Extensions">extension system</a> used by all other Gecko-based applications. We did not invent a new add-on system. This means that building an add-on for Firefox on Android is the <a href="/en/Building_an_Extension" title="en/Building_an_Extension">same process</a> that would be used for desktop Firefox. Add-ons that work with desktop Firefox <strong>do not</strong> automatically work in Firefox on Android. The user interfaces are just too different.</p> +<div class="note"> + Firefox on Android has a unique application identifier which must be used in <code>install.rdf</code>. The identifier is <code>{aa3c5121-dab2-40e2-81ca-7ea25febc110}</code></div> +<p>Both classic restart-required and newer <a href="/en/Extensions/Bootstrapped_extensions" title="en/Extensions/Bootstrapped_extensions">restartless</a> add-on approaches are supported. Using the restartless approach is preferred whenever possible because the user experience is far superior to forcing an application restart when installing or removing an add-on.</p> +<h3 id="Quick_Overview">Quick Overview</h3> +<ul> + <li>There is no visible XUL in the UI, so using overlays to try to add or change UI is useless.</li> + <li>Internal code and objects, like <code>gBrowser</code>, do not exist. Look at the Firefox on Android <a class="external" href="http://mxr.mozilla.org/mozilla-central/source/mobile/android/chrome/content/browser.js" title="http://mxr.mozilla.org/mozilla-central/source/mobile/android/chrome/content/browser.js"><code>browser.js</code></a> file to learn about the internals. Much of the same fundamental functionality exists.</li> + <li>Services like <code>nsIPromptService</code> and <code>nsIAlertsService</code> are implemented to use native Android UI.</li> + <li>There is a simple JavaScript object, called <a href="/en/Extensions/Mobile/API/NativeWindow" title="en/Extensions/Mobile/NativeWindow"><code>NativeWindow</code></a>, that allows you to manipulate parts of the native Android UI.</li> +</ul> +<h2 id="Get_help_with_Firefox_for_Android">Get help with Firefox for Android</h2> +<p>Documentation and tutorials for using and troubleshooting Firefox for Android are available on the <a class="external" href="http://support.mozilla.org/mobile" title="http://support.mozilla.org/mobile">Mozilla Support website</a>.</p> diff --git a/files/ar/mozilla/gecko/index.html b/files/ar/mozilla/gecko/index.html new file mode 100644 index 0000000000..ea2c73e891 --- /dev/null +++ b/files/ar/mozilla/gecko/index.html @@ -0,0 +1,58 @@ +--- +title: Gecko +slug: Mozilla/Gecko +translation_of: Mozilla/Gecko +--- +<div class="summary"> +<p class="summary"><span class="seoSummary"><strong><font><font><font><font>أبو بريص</font></font></font></font></strong><font><font><font><font> هو اسم محرك تخطيط وضعتها مشروع موزيلا. </font></font></font><font><font><font>كان اسمه في الأصل أنه NGLayout. </font></font></font><font><font><font>وظيفة أبو بريص هو لقراءة المحتوى على شبكة الإنترنت، مثل </font></font></font><font><font><font>HTML، </font></font></font><font><font><font>CSS، </font></font></font><font><font><font>كسول، </font></font></font><a href="/en-US/docs/JavaScript" title="جافا سكريبت"><font><font><font>جافا </font></font></font></a><font><font><font>سكريبت، </font></font></font><font><font><font>وجعله على شاشة المستخدم أو طباعته. </font></font></font><font><font><font>في التطبيقات المستندة XUL-يستخدم أبو بريص لتقديم واجهة المستخدم للتطبيق أيضا.</font></font></font></font></span></p> +</div> + +<p><font><font><font><font>يستخدم أبو بريص في العديد من التطبيقات، بما في ذلك عدد قليل من المتصفحات، مثل فايرفوكس، إضافات، وما إلى ذلك (للحصول على قائمة كاملة، يرجى الرجوع إلى </font></font></font></font><a class="external" href="http://en.wikipedia.org/wiki/Gecko_%28layout_engine%29#Web_browsers" rel="external" title="http://en.wikipedia.org/wiki/Gecko_(layout_engine)#Web_browsers"><font><font><font><font>ويكيبيديا المادة على أبو </font></font></font></font></a><font><font><font><font>بريص) </font></font></font><font><font><font>المنتجات التي تستخدم نفس الإصدار من أبو بريص على دعم مماثل للمعايير.</font></font></font></font></p> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="توثيق"><font><font><font><font>توثيق</font></font></font></font></h2> + + <dl> + <dt><a href="/en-US/docs/Gecko_FAQ" title="Gecko_FAQ"><font><font><font><font>أبو بريص التعليمات</font></font></font></font></a></dt> + <dd><font><font><font><font>الأسئلة المتداولة حول أبو بريص.</font></font></font></font></dd> + <dt><a href="/en-US/docs/Gecko_DOM_Reference" title="https://developer.mozilla.org/en-US/docs/Gecko_DOM_Reference"><font><font><font><font>إشارة زغة DOM</font></font></font></font></a></dt> + <dd><font><font><font><font>إشارة إلى DOM.</font></font></font></font></dd> + <dt><a href="/en-US/docs/Gecko-Specific_DOM_Events" title="إشارة حدث أبو بريص / أبو بريص"><font><font><font><font>إشارة حدث أبو بريص</font></font></font></font></a></dt> + <dd><font><font><font><font>الرجوع إلى أحداث المستخدمة في التطبيقات أبو بريص وموزيلا. </font></font></font><font><font><font>للأحداث DOM القياسية على شبكة الإنترنت، انظر </font></font></font></font><a href="/en-US/docs/DOM/DOM_event_reference" title="DOM / إشارة الحدث DOM"><font><font><font><font>المرجع الحدث </font></font></font></font></a><font><font><font><font>DOM.</font></font></font></font></dd> + <dt><a href="/en-US/docs/Gecko/Versions" title="أبو بريص / إصدارات"><font><font><font><font>إصدارات أبو بريص والإصدارات تطبيق</font></font></font></font></a></dt> + <dd><font><font><font><font>إصدارات أبو بريص والتطبيقات انهم المستخدمة في.</font></font></font></font></dd> + <dt><a class="external" href="/en-US/docs/Introduction_to_Layout_in_Mozilla" title="https://developer.mozilla.org/en-US/docs/Introduction_to_Layout_in_Mozilla"><font><font><font><font>مقدمة في التخطيط في موزيلا</font></font></font></font></a></dt> + <dd><font><font><font><font>التكنولوجيا الحديث في التخطيط.</font></font></font></font></dd> + <dt><a href="/en-US/docs/Embedding_Mozilla" title="Embedding_Mozilla"><font><font><font><font>تضمين موزيلا</font></font></font></font></a></dt> + <dd><font><font><font><font>عن طريق أبو بريص في التطبيق الخاص بك.</font></font></font></font></dd> + <dt><a href="/en-US/docs/Character_Sets_Supported_by_Gecko" title="مجموعات الأحرف المعتمدة من قبل أبو بريص"><font><font><font><font>مجموعات الأحرف التي تدعمها أبو بريص</font></font></font></font></a></dt> + <dd><font><font><font><font>قائمة مجموعات الأحرف التي يدعمها أبو بريص.</font></font></font></font></dd> + <dt><a href="/en-US/docs/Gecko/HTML_parser_threading" title="أبو بريص / HTML_parser_threading"><font><font><font><font>HTML محلل خيوط</font></font></font></font></a></dt> + <dd><font><font><font><font>وصف خاصية تعدد في محلل HTML.</font></font></font></font></dd> + <dt><font><font><font><font>{{إنترويكي ('wikimo'، 'أبو بريص: Home_Page'، 'أبو بريص الصفحة الرئيسية على MozillaWiki')}}</font></font></font></font></dt> + <dd><font><font><font><font>الصفحة الرئيسية للمطورين النشط. </font></font></font><font><font><font>خرائط الطريق وأكثر ما يصل إلى تاريخ الموارد.</font></font></font></font></dd> + </dl> + + <p><span class="alllinks"><a href="/en-US/docs/tag/Gecko" title="العلامة / أبو بريص"><font><font><font><font>مشاهدة الكل...</font></font></font></font></a></span></p> + </td> + <td> + <h2 class="Community" id="مجتمع"><font><font><font><font>مجتمع</font></font></font></font></h2> + + <ul> + <li><font><font><font><font>عرض المنتديات موزيلا ... {{DiscussionList ("ديف التكنولوجيا تخطيط"، "mozilla.dev.tech.layout")}}</font></font></font></font></li> + </ul> + + <h2 class="Related_Topics" id="مواضيع_ذات_صلة"><font><font><font><font>مواضيع ذات صلة</font></font></font></font></h2> + + <dl> + <dd><a href="/en-US/docs/Web_Standards" title="Web_Standards"><font><font><font><font>معايير </font></font></font></font></a><font><font><font><font>الويب، </font></font></font><font><font><font>كسول، </font></font></font><a href="/en-US/docs/Embedding_Mozilla" title="Embedding_Mozilla"><font><font><font>تضمين </font></font></font></a><font><font><font>موزيلا، </font></font></font><a href="/en-US/docs/Developer_Guide" title="Developing_Mozilla"><font><font><font>تطوير موزيلا</font></font></font></a></font></dd> + </dl> + </td> + </tr> + </tbody> +</table> + +<p> </p> diff --git a/files/ar/mozilla/index.html b/files/ar/mozilla/index.html new file mode 100644 index 0000000000..ecbabce71c --- /dev/null +++ b/files/ar/mozilla/index.html @@ -0,0 +1,13 @@ +--- +title: Mozilla +slug: Mozilla +tags: + - NeedsTranslation + - TopicStub +translation_of: Mozilla +--- +<div> + {{draft}}</div> +<p>This will soon be an awesome landing page for Mozilla internals. For now, it's not.</p> +<div> + {{LandingPageListSubpages}}</div> diff --git a/files/ar/mozilla/localization/index.html b/files/ar/mozilla/localization/index.html new file mode 100644 index 0000000000..18af36251d --- /dev/null +++ b/files/ar/mozilla/localization/index.html @@ -0,0 +1,29 @@ +--- +title: Localization at Mozilla +slug: Mozilla/Localization +tags: + - Landing + - Localization + - Mozilla + - NeedsTranslation + - TopicStub + - Translation + - l10n +translation_of: Mozilla/Localization +--- +<p><span class="seoSummary"><strong>Localization</strong> (L10n) is the process of translating software user interfaces from one language to another and adapting it to suit a foreign culture. These resources are for anyone with an interest in the technical aspects involved in localization.</span> They are for developers and all contributors.</p> + +<div class="warning"> +<p>The documentation here is no longer being maintained and is inaccurate. L10n documentation has moved to <a href="https://mozilla-l10n.github.io/localizer-documentation/">https://mozilla-l10n.github.io/localizer-documentation/</a> . To learn how to bootstrap a new locale for Mozilla projects, please see those documents</p> +</div> + +<h2 id="See_also">See also</h2> + +<dl> + <dt><a href="/en-US/docs/Project:MDN/Localizing" title="/en-US/docs/Project:MDN/Localizing">Localizing MDN</a></dt> + <dd>This resource covers localization of the documentation here on MDN.</dd> + <dt><a href="/en-US/Apps/Build/Localization">App localization</a></dt> + <dd>This set of documents applies more specifically to localizing apps, including Firefox OS apps.</dd> + <dt><a href="/en-US/docs/Web/API/L10n">L10n</a></dt> + <dd>Reference docs for the L10n API that Mozilla uses to localise Firefox OS.</dd> +</dl> diff --git a/files/ar/mozilla/localization/localizing_xliff_files/index.html b/files/ar/mozilla/localization/localizing_xliff_files/index.html new file mode 100644 index 0000000000..ec8609c60d --- /dev/null +++ b/files/ar/mozilla/localization/localizing_xliff_files/index.html @@ -0,0 +1,60 @@ +--- +title: Localizing XLIFF files for iOS +slug: Mozilla/Localization/Localizing_XLIFF_files +translation_of: Mozilla/Localization/Localizing_XLIFF_files +--- +<p>Firefox for iOS uses the XLIFF XML-based file format to hold and transfer localization data. <a href="https://www.oasis-open.org/committees/xliff/">XLIFF (eXtensible Localisation Interchange File Format)</a> is a localization standard governed by the OASIS standards body. The goal of the standard is to have an XML-based format to use when exchanging localization data between tools without the potential of data loss or corruption. Most translation tools support the XLIFF standard, making localizing the XLIFF files for Firefox for iOS easy to do using translation tools. Editing the raw XLIFF file is also rather easy, especially if you're already familiar with XML. This tutorial will walk you through the steps you need to take to translation strings within an XLIFF file.</p> + +<h3 id="String_repository_for_Firefox_on_iOS">String repository for Firefox on iOS</h3> + +<p>The firefox-ios.xliff file is located in SVN.</p> + +<ol> + <li>Decide where on your local computer you will store your copy of the github repo and navigate there in your terminal.</li> + <li>Enter the command <code>git clone </code>https://github.com/mozilla-l10n/firefoxios-l10n<code>/your-locale-code/</code></li> + <li>You should now see the firefox-ios project in your selected directoy with the <code>firefox-ios.xliff</code> file in it.</li> +</ol> + +<h3 id="Translating_the_XLIFF_file">Translating the XLIFF file</h3> + +<ol> + <li>Open the firefox-ios.xliff file in your favorite text editor.</li> + <li>In the <code><file></code> tag, add the <code>target-language</code> attribute with your locale code as the value (e.g., <code>target-language="xx-XX"</code>). Be aware that there may be many <code><file></code> tags within one XLIFF document. Each <code><file></code> tag requires the <code>target-language</code> attribute with your locale code as the value (e.g., <code>target-language="xx-XX"</code>).</li> + <li>Strings are located within <code><trans-unit></code> tags. Source English strings are contained in <code><source></code> child tags. Here is an example of such a <code><trans-unit></code> + <pre><trans-unit id="Add to Bookmarks"> + <source>Add to Bookmarks</source> +</trans-unit> +</pre> + Your translations must be contained inside <code><target></code> child tags. Go through the full xliff page adding <code><target></target></code> below each <code><source></code> tag set to help you to identify strings that need to be translated. Do not delete the <code><source></code> tag sets. + + <pre><trans-unit id="Add to Bookmarks"> + <source>Add to Bookmarks</source> + <target>YOUR_TRANSLATION_HERE</target> +</trans-unit> +</pre> + </li> + <li>Provide translations of the strings in the <code><source></code> tag sets by placing their translations in the <code><target></code> tag sets beneath them. Keep in mind the following sets of characters that need to remain untranslated: + <ol> + <li><code>$(SOME_TEXT_HERE)</code> is a variable format,</li> + <li><code>%1$@</code> is another variable format.</li> + <li><note> tags contain localizer notes from developers and should not be translated.</li> + </ol> + + <pre><trans-unit id="Add to Bookmarks"> + <source>Add to Bookmarks</source> + <target>Agregar a marcadores</target> + <note>No comment provided by engineer.</note> +</trans-unit> +</pre> + </li> + <li>Save your translations along the way.</li> + <li>Once you've completed translation, it's important to make sure the XML in your XLIFF file is valid (e.g., no broken tag sets). Open the file in Firefox to have it run a validity check and correct any errors it might yell about.</li> +</ol> + +<h3 id="Commiting_your_XLIFF_file">Commiting your XLIFF file</h3> + +<ol> + <li>Using this command, commit your translated XLIFF file into your locale's directory: <code>git commit -m "Commit message here"</code> .</li> + <li>Push your commit into the github repo: <code>git push</code></li> + <li>Kick up your feet, pop open a cold beer (or soda), and pat yourself on the back for doing something new, different, and exciting!</li> +</ol> diff --git a/files/ar/mozilla/localization/web_localizability/creating_localizable_web_applications/index.html b/files/ar/mozilla/localization/web_localizability/creating_localizable_web_applications/index.html new file mode 100644 index 0000000000..1971da3911 --- /dev/null +++ b/files/ar/mozilla/localization/web_localizability/creating_localizable_web_applications/index.html @@ -0,0 +1,437 @@ +--- +title: Creating localizable web applications +slug: Mozilla/Localization/Web_Localizability/Creating_localizable_web_applications +translation_of: Mozilla/Localization/Web_Localizability/Creating_localizable_web_applications +--- +<p>An important step of developing a web application or creating web content is making sure that it can be localized. Listed below are good practices and recommendations that should be followed in order to make your content easily localizable.</p> +<p><span style="font-size: x-small;"><em>Most of the code snippets used in the examples below come from an early version of the getpersonas.com website. In some cases, the code snippets were slightly changed to better illustrate the recommendations or for clarity.</em></span></p> +<h2 id="Cheatsheet">Cheatsheet</h2> +<ul> + <li><strong>Don't hardcode</strong> English text, formats (numbers, dates, addresses, etc.), word order or sentence structure.</li> + <li><strong>Don't put text or numbers in images</strong>.</li> + <li>Don't forget about <strong>right-to-left</strong> locales.</li> + <li>Take advantage of <code>printf()</code> (or equivalents) and <strong>use variables in the English strings</strong>.</li> + <li><strong>Write semantic code</strong> (e.g. don't use text and <code><img/></code> for decorations; instead, use CSS).</li> + <li><strong>Document your code</strong> so that localizers know what they're translating (e.g. in gettext <strong>use comments and contexts</strong>).</li> +</ul> +<h2 id="App_Logic">App Logic</h2> +<h3 id="Detect_the_locale_correctly">Detect the locale correctly</h3> +<p>Be smart about detecting the user's locale correctly. You can use one or more of the following techniques:</p> +<ul> + <li>HTTP <em>Accept</em>-<em>Language</em> headers,</li> + <li>the UA string,</li> + <li>IP geolocation.</li> +</ul> +<p>See examples of the addons.mozillaorg code at <a class="external" href="http://viewvc.svn.mozilla.org/vc/addons/trunk/site/app/config/language.php?view=markup" title="http://viewvc.svn.mozilla.org/vc/addons/trunk/site/app/config/language.php?view=markup">/addons/trunk/site/app/config/language.php</a> and <a class="external" href="http://viewvc.svn.mozilla.org/vc/addons/trunk/site/app/config/language.inc.php?view=markup" title="http://viewvc.svn.mozilla.org/vc/addons/trunk/site/app/config/language.inc.php?view=markup">/addons/trunk/site/app/config/language.inc.php</a>. The <code>LANGUAGE_CONFIG</code> class expects arrays of valid languages & supported languages.</p> +<p>Always give the user a possibility to change the locale (e.g. by adding locale dropdown menu at bottom of page) and remember this choice for the future visits.</p> +<h3 id="Use_the_locale_code_in_the_URLs">Use the locale code in the URLs</h3> +<p>Depending on how you detect user's locale, you may want to provide a way of overriding the autodetection. You can achieve this by setting a cookie when the changes the locale with the language dropdown, or by looking for locale code in the URL. The latter involves rewriting the URLs to include the locale code and rewriting Apache's aliases to handle locale in URLs.</p> +<p>You can put the locale code as the top-most element of the URL's path (e.g. <code><a class="external" href="http://example.com/en-US/foo/bar" rel="freelink">http://example.com/en-US/foo/bar</a></code>) or on its end (e.g. <code><a class="external" href="http://example.com/foo/bar/en-US" rel="freelink">http://example.com/foo/bar/en-US</a></code>). Avoid using it in a subdomain, as it can cause problems with certificates (this is wrong: <strike><code><a class="external" href="http://en-us.example.com/foo/bar" rel="freelink">http://en-us.example.com/foo/bar</a></code></strike>).</p> +<h3 id="Simplify_localized_versions_if_necessary">Simplify localized versions if necessary</h3> +<p>Oftentimes, it is better to slightly simplify the localized version of your web application than to serve a mix of localized and English content. For example, if not all the pages of your website are going to be localized, you may consider removing links to the English-only pages from the navigation (headers, footers, sidebars) in the localized versions.</p> +<h3 id="Define_the_locale_and_the_direction_in_the_HTML">Define the locale and the direction in the HTML</h3> +<p>Generate the lang attribute dynamically, depending on the current locale. Use the <code>dir</code> attribute on the <code><html/></code> element and consider using a <code>rtl</code> class on <code><html/> </code>or <code><body/></code> as well, in order to easily change CSS rules like in the example below.</p> +<p><strong>Snippet 1. Bad:</strong></p> +<pre class="brush: html"><html lang="en"> +</pre> +<p><strong>Snippet 2. Good:</strong></p> +<p>CSS:</p> +<pre class="brush: css"><code>html[dir='rtl'] foo { + /* RTL-specific rules for the FOO element */ +}</code> + +<code>body.rtl foo { + /* RTL-specific rules for the FOO element */ +}</code></pre> +<p>HTML/PHP:</p> +<pre class="brush: php"><?php + function isRTL($locale) { + $RTL_locales = array('ar', 'fa', 'he'); + return in_array($locale, $RTL_locales); + } +?> +<html lang="<?= $locale?>" dir="<?= isRTL($locale) ? 'rtl' : 'ltr' ?>" > + <body class="<?= $locale?> <?= isRTL($locale) ? 'rtl' : 'ltr' ?>"> + </body> +</html></pre> +<p>Notice that <code><body/></code> is given a class equal to the current locale. This is useful to add minor corrective rules to the CSS that apply only for selected locales. For example, for locales that tend to have longer words than English, you may want to make an element slightly wider.</p> +<p><strong>Snippet 3. Good:</strong></p> +<pre class="brush: css"><code>body.de foo, body.fr foo, body.pl foo { + /* locale-specific rules for the FOO element */ + width: 10em; /* originally 8em */ +}</code></pre> +<h3 id="Adapt_the_interaction_to_RTL_locales">Adapt the interaction to RTL locales</h3> +<p>Right-to-left locales not only require good images handling (see <a name="Images">Images</a>), but also should be taken into account when designing the interaction on the website. Consider the following example: a filmreel-like slideshow showcasing highlighted features of the product or featured designs. For right-to-left languages, the slideshow should go from right to left as well, making the last element in the HTML the first one to be displayed.</p> +<h3 id="Separate_URLs_from_navigation">Separate URLs from navigation</h3> +<p>Sometimes, when the URLs are well-designed, you may want to use the URL to do something in the code depending on when the user is. Take the URL structure of the getpersonas.com website for example. The URL <code><a class="external" href="http://getpersonas.com/nature/popular/2" rel="freelink">http://getpersonas.com/nature/popular/2</a></code> points to the second page of the listing of the popular Personas in the "Nature" category. You could easily use <code>list($category, $tab, $page) = explode('/', $path);</code> to get this information directly from the URL. After that, it is tempting to use the $category or $tab variables in the interface. However, this is problematic for localization. You probably don't want to localize the URLs to keep them uniform across locales as well as to avoid issues with non-Latin and/or RTL characters. So in order to display a localized label of a category or a tab, you should create a mapping between the non-localizable English names used in the URLs and the localizable English strings used in the interface. Consider the following example:</p> +<p><strong>Snippet 1. Good:</strong></p> +<pre class="brush: php">$tab_labels = array( "popular" => _('Popular'), + "recent" => _('Recent'), + "all" => _('All'), + "my" => _('My'), + "favorites" => _('Favorites') + ); +list($category, $tab, $page) = explode('/', $path); +if ($tab == 'popular') { // $tab is always English + // .... + echo $tab_labels($tab); // this will display the translation +}</pre> +<h3 id="Indicate_the_language_of_the_pages_you_link_to">Indicate the language of the pages you link to</h3> +<p>Indicate the language of the pages you link to if it is different from the user's current language. For English, add<code> hreflang="en"</code> to links to resources that are not going to be localized or are external to your web application. Then, use CSS to give a cue to the user that if she follows the link, she will be served English content.</p> +<p><strong>Snippet 1. Bad:</strong></p> +<pre class="brush: php"><a href="http://www.mozilla.com/en-US/privacy-policy.html"><?= _('Privacy policy'); ?></a> +</pre> +<p><strong>Snippet 2. Good:</strong></p> +<p>CSS:</p> +<pre class="brush: css">a[hreflang="en"]::after { + content: " [en]" +} +</pre> +<p>HTML/PHP:</p> +<pre class="brush: php"><a href="http://www.mozilla.com/en-US/privacy-policy.html" hreflang="en"><?= _('Privacy policy'); ?></a></pre> +<p> </p> +<h3 id="Don't_mingle_app_logic_and_localizable_content_when_using_pure_HTML">Don't mingle app logic and localizable content when using pure HTML</h3> +<p>If you decide not to use gettext on some pages (e.g. because they contain a lot of text and localizing source HTML is easier), make sure to keep the code responsible for application logic separate from the localizable content. The logic of the website should not be exposed directly in the localization files, to avoid any accidental changes by localizers.</p> +<p><strong>Snippet 1. Bad:</strong></p> +<pre class="brush: php">require_once('lib/user.php'); +$user = new PersonaUser();</pre> +<p><strong>Snippet 2. Good:</strong></p> +<pre class="brush: php">require_once('templates/footer.php');</pre> +<p>If it's not possible to remove the app logic code, you should consider using gettext. Gettext extracts localizable content form the source files, thus making it impossible for localizers to accidentally change them. You can learn more about the choice of the format for your project at <a class="link-https" href="https://wiki.mozilla.org/L10n:Requirements/Web_l10n_filetypes" title="https://wiki.mozilla.org/L10n:Requirements/Web_l10n_filetypes">File formats</a>.</p> +<h2 id="Text_messages">Text messages</h2> +<h3 id="Don't_hardcode_English_content">Don't hardcode English content</h3> +<p>Allow localizers to localize English content, such as:</p> +<ul> + <li>text messages,</li> + <li>number formats,</li> + <li>date formats,</li> + <li>word order and sentence structure.</li> +</ul> +<p>Note that some strings might be hidden in libraries' code (e.g. error messages), or in JavaScript libraries and scripts.</p> +<p>If you are using pure HTML instead of gettext to localize your webapp, consider using an additional gettext-like format such as <a class="link-https" href="https://wiki.mozilla.org/L10n:Requirements/Web_l10n_filetypes#.lang_files" title="https://wiki.mozilla.org/L10n:Requirements/Web_l10n_filetypes#.lang_files">.lang</a> to streamline localizers' work with repeating content. This is useful for strings occurring in the webapp multiple times, like "return to top", "comments", "click to see larger image" etc. Might be also helpful for headers and footers, if you're not using templates to display them.</p> +<p>In most of the cases though, you should use gettext whenever technically possible (i.e. the server's PHP has been built with gettext support).</p> +<h3 id="Localize_the_date_format">Localize the date format</h3> +<p>Localizing the date format is as easy as localizing any other string. Just let the localizers localize the format specification string.</p> +<p><strong>Snippet 1. Bad:</strong></p> +<pre class="brush: php">$persona['date'] = date("n/j/Y", strtotime($persona['approve'])); +</pre> +<p><strong>Snippet 2. Good:</strong></p> +<pre class="brush: php">$persona['date'] = date(_("n/j/Y"), strtotime($persona['approve'])); +</pre> +<h3 id="Localize_the_number_format">Localize the number format</h3> +<p>You can make the number format localizable using the information returned by <a class="external" href="http://php.net/manual/en/function.localeconv.php" title="http://php.net/manual/en/function.localeconv.php">localeconv()</a> in PHP.</p> +<p><strong>Snippet 1. Bad:</strong></p> +<pre class="brush: php">printf(_("%s MB>"), $size); +</pre> +<p><strong>Snippet 2. Good:</strong></p> +<pre class="brush: php">function num_format($num, $decimals) { + $locale_info = localeconv(); + return number_format($num, $decimals, $locale_info['decimal_point'], $locale_info['thousands_sep']); +} + +printf(_("%s MB"), num_format($size, 1)); +</pre> +<h3 id="Wrap_as_few_HTML_tags_as_possible">Wrap as few HTML tags as possible</h3> +<p>When wrapping the localizable content with the gettext function calls, put all the code that irrelevant to localization outside the function call.</p> +<p><strong>Snippet 1. Bad:</strong></p> +<pre class="brush: php"><?= _("<a href=\"https://addons.mozilla.org/firefox/downloads/latest/10900\" class=\"get-personas\" id=\"download\"><span>Get Personas for Firefox - Free</span>");?><span class="arrow"></span></a> +</pre> +<p><strong>Snippet 2. Good:</strong></p> +<pre class="brush: php"><a href="https://addons.mozilla.org/firefox/downloads/latest/10900" class="get-personas" id="download"> + <span><?= _("Get Personas for Firefox - Free");?></span><span class="arrow"></span> +</a></pre> +<p> </p> +<p><strong>Snippet 3. Bad:</strong></p> +<pre class="brush: php"><p><?= _("<strong class=\"legal\">Design Acceptance:</strong> If a design is accepted, we will send the following message:");?></p> +<p><?= _("<strong class=\"legal\">Design Rejection:</strong> If a design is rejected, we will send the following message:");?></p> +</pre> +<p><strong>Snippet 4. Good:</strong></p> +<pre class="brush: php"><p><strong class="legal"><?= _("Design Acceptance:");?></strong> <?= _("If a design is accepted, we will send the following message:");?></p> +<p><strong class="legal"><?= _("Design Rejection:");?></strong> <?= _("If a design is rejected, we will send the following message:");?></p></pre> +<p> </p> +<p><strong>Snippet 5. Bad:</strong></p> +<pre class="brush: php"><p id="breadcrumbs"> + <?printf(_("<a href=\"%s\">Personas Home</a> : <a href=\"%s\">Sign In</a> : Forgot Your Password?"), + $locale_conf->url('/'), + $locale_conf->url('/signin'));?> +</p> +</pre> +<p><strong>Snippet 6. Good:</strong></p> +<pre class="brush: php"><p id="breadcrumbs"> + <?printf("<a href=\"%s\">" . _("Personas Home") . "</a> : <a href=\"%s\">" . _("Sign In") . "</a> : " . _("Forgot Your Password?"), + $locale_conf->url('/'), + $locale_conf->url('/signin'));?> +</p></pre> +<p> </p> +<p><strong>Snippet 7. Bad:</strong></p> +<pre class="brush: php"><p class="description"><?= _("<strong>Description:</strong>");?></p></pre> +<p><strong>Snippet 8. Good:</strong></p> +<pre class="brush: php"><p class="description"><strong><?= _("Description:");?></strong></p></pre> +<p> </p> +<p><strong>Snippet 9. Good:</strong></p> +<pre class="brush: php"><h1> + <?printf("<a href=\"%s\"><img src=\"/static/img/logo.png\" alt=\"" . _("Mozilla Labs Personas") . "\" /></a>", + $locale_conf->url('/'));?> +</h1> +</pre> +<p><strong>Snippet 10. Better:</strong></p> +<pre class="brush: php"><h1> + <a href="<?= $locale_conf->url('/') ?>"> + <img src="/static/img/logo.png" alt="<?= /* L10N: link title attribute */ _("Mozilla Labs Personas"); ?> " /> + </a> +</h1></pre> +<h3 id="...but_don't_sacrifice_flexibility">...but don't sacrifice flexibility</h3> +<p>Don't sacrifice flexibility trying to satisfy the rule above. Make sure the content supports changing the order of the sentence, which may be required by some grammars.</p> +<p><strong>Snippet 1. Bad:</strong></p> +<pre class="brush: php"><p class="added"><?= _("<strong>Added:</strong>") . $persona['date']; ?></p></pre> +<p><strong>Snippet 2. Bad:</strong></p> +<pre class="brush: php"><p class="added"><strong><?= _("Added:") ?></strong><?= $persona['date']; ?></p></pre> +<p><strong>Snippet 3. Good:</strong></p> +<pre class="brush: php"><p class="added"><? printf( /* L10N: %s is a date */ _("<strong>Added:</strong> %s"), $persona['date']);?></p></pre> +<p>The first bad snippet puts the <code><strong/></code> HTML elements inside the gettext function call and concatenates the <code>$persona['date']</code> variable to it. Following the rule about wrapping as few HTML elements with the gettext function call as possible, you could try to put the <code><strong/></code> HTML tag outside of the PHP code (cf. snippet 2). However, in this snippet, the concatenation of the <code>$persona['date']</code> variable is still hardcoded and only allows one ordering of the sentence, while some grammars might require, for instance, to put the date in front of the "Added" descriptor. For this reason, it is better to leave the <code><strong/></code> HTML tags inside the gettext function call and take advantage of the <code>printf()</code> variable that will be substituted by the date upon interpretation of the code (snippet 3).</p> +<p><strong>Snippet 4. Good:</strong></p> +<pre class="brush: php"><h3> + <?printf( /* L10N: %s is the author's username */ _("created by <a href=\"%s\">%s</a>"), + $locale_conf->url('/gallery/Designer/' . $persona['author']), + $persona['display_username']);?> +</h3></pre> +<p>In this example the link is in the <code>_()</code> call so that localizers can adjust the position of the author's name, depending on the grammar of their language.</p> +<h3 id="Use_printf()_for_string_substitution">Use printf() for string substitution</h3> +<p>Whenever there is content that will change, either upon interpretation of the code or as part of development, don't use concatenation. Instead, use <code>printf()</code> and string formatting. For instance, don't put URIs into msgid's. If you do, if the static URI changes, you'll have to regenerate the *.po files to include the new msgids.</p> +<p><strong>Snippet 1. Bad:</strong></p> +<pre class="brush: php"><?= _("View a sample Persona Header <b><a href=\"/static/img/Persona_Header_LABS.jpg\">here</a></b>.");?></pre> +<p><strong>Snippet 2. Good:</strong></p> +<pre class="brush: php"><?php printf(_("View a sample Persona Header <b><a href=\"%s\">here</a></b>."), '/static/img/Persona_Header_LABS.jpg'); ?></pre> +<p> </p> +<p><strong>Snippet 3. Bad:</strong></p> +<pre class="brush: php"><p><?=_("If you are interested in supporting the approval process by becoming an approver, please email <a href=\"mailto:personas@mozilla.com\">personas@mozilla.com</a>.")?></p></pre> +<p><strong>Snippet 4. Good:</strong></p> +<pre class="brush: php"><p><?= printf(_("If you are interested in supporting the approval process by becoming an approver, please email <a href=\"mailto:%s\">%s</a>."), + 'personas@mozilla.com', + 'personas@mozilla.com')?> +</p></pre> +<p><strong>Snippet 5. Also good:</strong></p> +<pre class="brush: php"><p><?= printf(_("If you are interested in supporting the approval process by becoming an approver, please email <a href=\"mailto:%1$s\">%1$s</a>."), + 'personas@mozilla.com')?> +</p></pre> +<p>The same goes for variables that are unknown until the code is interpreted. Localizers should have a possibility to adapt the order of the sentence (including the variable part) to the grammar and preferred style used in their language. Consider the following example.</p> +<p><strong>Snippet 6. Bad:</strong></p> +<pre class="brush: php"><p class="added"><?= _("<strong>Added:</strong>") . $persona['date']; ?></p></pre> +<p><strong>Snippet 7. Good:</strong></p> +<pre class="brush: php"><p class="added"><? printf( /* L10N: %s is a date */ _("<strong>Added:</strong> %s"), $persona['date']);?></p></pre> +<p>In Snippet 6 the concatenation causes the ordering of the sentence to be fixed, while some grammars might require, for instance, to put the date in front of the "Added" descriptor. You should take advantage of the <code>printf()</code> variable that will be substituted by the date upon interpretation of the code (snippet 7).</p> +<h3 id="Use_gettext_comments">Use gettext comments</h3> +<p>Use comments in the code to help localizers understand what they are translating. You can explain where the string will appear in the application, or what the variables used in the string will be replaced with. Put comments in the same line as the gettext function call (inline comments, in PHP these are <code>/* ... */</code>), or one line directly above the gettext function call (block comments, in PHP they start with <code># ...</code> or <code>// ...</code>). In either way, use a consistent prefix for localization-related comments, e.g. "L10n". When extracting strings with <a class="external" href="http://www.gnu.org/software/hello/manual/gettext/xgettext-Invocation.html" title="http://www.gnu.org/software/hello/manual/gettext/xgettext-Invocation.html"><code>xgettext</code></a> you will be able to include only comments starting with this prefix using the <code>--add-comments=PREFIX</code> option, for example <code>xgettext --add-comments=L10n</code>.</p> +<p><strong>Snippet 1. Bad:</strong></p> +<pre class="brush: php"><h1> + <a href="<?= $locale_conf->url('/') ?>"> + <img src="/static/img/logo.png" alt="<?= _("Mozilla Labs Personas"); ?>" /> + </a> +</h1> +</pre> +<p><strong>Snippet 2. Good:</strong></p> +<pre class="brush: php"><h1> + <a href="<?= $locale_conf->url('/') ?>"> + <img src="/static/img/logo.png" alt="<?= /* L10n: link title attribute */ _("Mozilla Labs Personas") ?> " /> + </a> +</h1></pre> +<p> </p> +<p><strong>Snippet 3. Bad:</strong></p> +<pre class="brush: php"><p class="added"><? printf(_("<strong>Added:</strong> %s"), $persona['date']);?></p> +</pre> +<p><strong>Snippet 4. Good:</strong></p> +<pre class="brush: php"><p class="added"><? printf( /* L10N: %s is a date */ _("<strong>Added:</strong> %s"), $persona['date']);?></p></pre> +<p> </p> +<p><strong>Snippet 5. Bad:</strong></p> +<pre class="brush: php">printf(_("%1$s by %2$s"), $persona['name'], $persona['display_username']); +</pre> +<p><strong>Snippet 6. Good:</strong></p> +<pre class="brush: php">// %1$s is persona name, %2$s is athor's username +printf(_("%1$s by %2$s"), $persona['name'], $persona['display_username']); +</pre> +<h3 id="Use_printf_variables_swapping">Use printf variables swapping</h3> +<p>Use <code>printf()</code> ordered variables (<code>%1$s</code>, <code>%2$s</code>, etc.) to allow changes to the order of the sentence. Some languages may require this. Remember to use single quotes around the strings containing the formatting symbols. Otherwise, PHP will treat <code>$s</code> as a regular variable, instead of parsing the whole <code>%1$s</code> formatting symbol.</p> +<p><strong>Snippet 1. Bad:</strong></p> +<pre class="brush: php">$page_header = $persona['name'] . ' by ' . $persona['display_username'];</pre> +<p><strong>Snippet 2. Better:</strong></p> +<pre class="brush: php">printf(_("%s by %s"), $persona['name'], $persona['display_username']);</pre> +<p><strong>Snippet 3. Good:</strong></p> +<pre>// %1$s is the persona's name, %2$s is the athor's username +printf(_('%1$s by %2$s'), $persona['name'], $persona['display_username']);</pre> +<p>Note the single quotes around <code>'%1$s by %2$s'</code>.</p> +<h3 id="Don't_nest_gettext_calls">Don't nest gettext calls</h3> +<p><strong>Snippet 1. Bad:</strong></p> +<pre class="brush: php"><?printf(_("<a href=\"%s\">" . _("Personas Home") . "</a> : How to Create Personas"), $locale_conf->url('/'));?></pre> +<p><strong>Snippet 2. Good:</strong></p> +<pre class="brush: php"><?printf("<a href=\"%s\">" . _("Personas Home") . "</a> : " . _("How to Create Personas"), $locale_conf->url('/'));?></pre> +<h3 id="Don't_break_long_text_content_into_multiple_strings">Don't break long text content into multiple strings</h3> +<p>Don't break long text messages into smaller pieces if the text is a coherent whole. Examples include long paragraphs or e-mail bodies. Gettext doesn't specify the order of the strings in the messages.po file, so a localizer may end up seeing the partial strings of your content scattered all over the file. If you really have to use multiple strings, then make sure you're using comments or event contexts to let localizers know which part they're translating (<em>cf.</em> snippet 2 below).</p> +<p><strong>Snippet 1. Bad:</strong></p> +<pre>echo _("Long text\n"); +echo _("Second part\n"); +echo _("Third part\n");</pre> +<p><strong>Snippet 2. Still bad (but slightly better than snippet 1):</strong></p> +<pre># L10n: Long text example, part 1. +echo _("Long text\n"); +# L10n: Long text example, part 2. +echo _("Second part\n"); +# L10n: Long text example, part 3. +echo _("Third part\n");</pre> +<p><strong>Snippet 3. Good:</strong></p> +<pre># L10n: No indentation is possible after the first line. +echo _("Long text +Second part +Third part\n");</pre> +<p><strong>Snippet 4. Good (even better):</strong></p> +<pre># L10n: You can indent lines to your liking. +echo _("Long text\n" + . "Second part\n" + . "Third part\n");</pre> +<p>The solution in snippet 3 doesn't allow to use code indentation for "Second part" and "Third part". If you indent "Second part", the resulting string (interpreted by PHP and Gettext) will end up indented as well. It is thus recommended to use the solution from snippet 4. Consider the following example:</p> +<p><strong>Snippet 5. Bad indentation:</strong></p> +<p>PHP code:</p> +<pre># L10n: This will be wrongly indented. +echo _("Long text + Second part + Third part\n");</pre> +<p>PHP output:</p> +<pre>Long text + Second part + Third part +</pre> +<p>messages.po:</p> +<pre>#. L10n: This will be wrongly indented. +msgid "" +"Long text\n" +" Second part\n" +" Third part\n" +msgstr ""</pre> +<p>In order to indent your code, you must use string concatenation. See snippet 4 above for an example of how to do this.</p> +<h3 id="Use_gettext_contexts">Use gettext contexts</h3> +<p>Depending on context in which it is used, one English string might require two or more different translations. This is particularly true for short strings, like "File" or "Log in". For instance, "Log in" as a button label might be translated by a localizer as the imperative, but for a dialog title, the localizer may choose to use a different form, like gerund (much like "Logging in"). <a href="/en/gettext#Using_context_with_msgctxt" title="en/gettext#Using context with msgctxt">Gettext's context feature</a> allows the developer to distinguish between two identical English strings and disambiguate the translation.</p> +<h3 id="Use_gettext_plurals">Use gettext plurals</h3> +<p>Whenever you put numbers in your messages, make it possible to use different singular and plural forms.</p> +<p><strong>Snippet 1. Bad:</strong></p> +<pre class="brush: php">print '<p class="numb-users">' . sprintf(_("%d active daily users"), number_format($persona['popularity'])) . '</p>';</pre> +<p><strong>Snippet 2. Good:</strong></p> +<pre class="brush: php">print '<p class="numb-users">' . sprintf(ngettext("%d active daily user", "%d active daily users"), + number_format($persona['popularity'])) . '</p>';</pre> +<p>One might argue that adding plural support here is not necessary because, for instance, the number of daily users in the example above will always be greater than 1, i.e. will always require the use of the plural form. While this is true for English, it should be noted that some languages require different forms of strings for numbers greater than 1 as well. For example, all numbers ending in 2, 3 or 4 (be it 21 or 1021) might require a special plural form.</p> +<p>Read more about <a href="/en/gettext#Plurals" title="en/gettext#Plurals">plurals in gettext</a> and about <a href="/en/Localization_and_Plurals" title="en/Localization and Plurals">plural rules for different languages</a>.</p> +<h3 id="Don't_use_text_as_decoration">Don't use text as decoration</h3> +<p><span style="color: rgb(128, 128, 128);"> <em>This needs more work.</em></span></p> +<pre><?printf("<a href=\"%s\">" . _("Step 3: Testing your Persona Images") . "</a> &raquo;", $locale_conf->url('/demo_create_3'));?> +<?printf("<a href=\"%s\">" . _("Step 2: Creating a Persona Footer Image") . "</a> &raquo;", $locale_conf->url('/demo_create_2'));?> +<?printf("<a href=\"%s\">" . _("Step 4: Submit your Persona!") . "</a> &raquo;", $locale_conf->url('/demo_create_4'));?> + +<div class="tut_left"><?printf("<b>&laquo; <a href=\"%s\">" . _("Back to Step 1") . "</a></b>", $locale_conf->url('/demo_create'));?></div> +<div class="tut_right"><?printf("<b><a href=\"%s\">" . _("Continue to Step 3") . "</a> &raquo;</b>", $locale_conf->url('/demo_create_3'));?></div></pre> +<p>Using <code>&laquo;</code> and <code>&raquo;</code> should be OK here for RTL languages (they are flipped correctly if there are no Latin characters next to them, which there aren't any), so let's leave it as it is. In general though, we should consider implementing such decorations as CSS images (background-image or ::after's/::before's content) and then select them with "html[dir="rtl"] > ...". It a safer method.</p> +<pre class="brush: php"><?php if($showWearThis) { ?> + $(".try-button").personasButton({ + 'hasPersonas':'<span><?= _("wear this");?></span><span>&nbsp;</span>', + 'hasFirefox':'<span><?= _("get personas now!");?></span><span>&nbsp;</span>', + 'noFirefox':'<span><?= _("get personas with firefox");?></span><span>&nbsp;</span>' + }); +<?php } ?></pre> +<h2 id="Images_2">Images</h2> +<h3 id="Don't_put_text_or_numbers_in_the_images">Don't put text or numbers in the images</h3> +<p>Just don't do that. Applies also to numbers.</p> +<p><strong>Image 1. Bad:</strong></p> +<p><img alt="personas-btn-get.png" class="internal default" src="/@api/deki/files/3806/=personas-btn-get.png"></p> +<p><strong>Image 2. Bad:</strong></p> +<p><img alt="personas-faq-header.png" class="internal default" src="/@api/deki/files/3807/=personas-faq-header.png"></p> +<p>If you wish to use a non-standard font (as in the image above), take advantage of the CSS's on-line fonts feature available via <a href="/en/CSS/@font-face" title="en/CSS/@font-face">@font-face</a>.</p> +<p><strong>Image 3. Bad:</strong></p> +<p><img alt="personas-logo-beta.png" class="internal default" src="/@api/deki/files/3808/=personas-logo-beta.png"></p> +<p>The trouble with the above image is the "for Firefox" part, which should be made localizable. Keep in mind that you should allow to localize the whole "for Firefox" part, not only the "for" preposition to which you'd concatenate the "Firefox" part. That's because some languages might require changing the word order, and others might require putting the word Firefox in the correct grammatical case.</p> +<p><strong>Image 4. Bad:</strong></p> +<p><img alt="feature-bg-performance.png" class="internal default" src="/@api/deki/files/3815/=feature-bg-performance.png"></p> +<p><strong>Image 5 & Snippet 1. Good:</strong></p> +<p>Image file (<code>/img/tignish/firefox/performance-chart.png</code>):</p> +<p><img alt="performance-chart.png" class="internal default" src="/@api/deki/files/3816/=performance-chart.png"></p> +<p>HTML: <span style="font-size: x-small;">(in this case, no gettext was used and the localizers worked on pure HTML files)</span></p> +<pre><div id="performance-chart"> + <h4>Firefox Performance: Fast — Faster — <em>Fastest</em></h4> + <p>Results of a SunSpider test on a Windows XP machine</p> + <img src="/img/tignish/firefox/performance-chart.png" alt="Firefox 2, Firefox 3, Firefox 3.5 performance chart" /> + <ul> + <li>18,148 ms</li> + <li>3,669 ms</li> + <li>1,524 ms!</li> + </ul> +</div></pre> +<p>In the above example, not only does the text above the clock charts require translation, but so do the milliseconds captions below them. Many languages use different number formats than English, like <em>18 148</em> or <em>18.148</em>. Also, the last caption includes an exclamation mark, and for some languages (e.g. French), the orthographic rules might require putting a space between the exclamation mark and the preceding word.</p> +<h3 id="Make_icons_flippable_for_RTL">Make icons flippable for RTL</h3> +<p><strong>Image 1. </strong></p> +<p><img alt="question-64.png" class="internal default" src="/@api/deki/files/3809/=question-64.png"></p> +<p>This icon should have its right-to-left equivalent, with the "؟" character which is used in some RTL languages, like Arabic and Persian (note that Hebrew uses "?"). You should then display the right icon depending on the locale. The following example shows how to achieve this with CSS.</p> +<p><strong>Snippet 1. Bad:</strong></p> +<pre class="brush: php"><div class="tut_didyouknow"> + <img src="/static/img/question-64.png" class="tut_icon"> + <?printf (_("Did you know you can test a Persona before you submit it? <b><a href=\"%s\">Find out how!</a>&raquo;</b>"), + $locale_conf->url('/demo_create_3#test'));?> +</div></pre> +<p><strong>Snippet 2. Good:</strong></p> +<p>CSS:</p> +<pre class="brush: css">div.tut_didyouknow { + background: url(/static/img/question-64.png) no-repeat 0 0; + padding-left: 64px; +} + +html[dir='rtl'] div.tut_didyouknow { + background-image: url(/static/img/question-64.png); + background-position: 100% 0; + padding-left: 0; + padding-right: 64px; +} +</pre> +<p>HTML/PHP:</p> +<pre class="brush: php"><div class="tut_didyouknow"> + <?printf (_("Did you know you can test a Persona before you submit it? <b><a href=\"%s\">Find out how!</a>&raquo;</b>"), + $locale_conf->url('/demo_create_3#test'));?> +</div></pre> +<p>Notice that the icon has been moved to CSS, so that it doesn't sit in a <code><img/></code> element. This is generally considered a good practice for decorative graphics.</p> +<h3 id="Don't_use_images_as_buttons">Don't use images as buttons</h3> +<p>Instead, use <code><button/></code> and style it with CSS.</p> +<p><strong>Image 1. Bad:</strong></p> +<p><img alt="tut_btn_getStarted.gif" class="internal default" src="/@api/deki/files/3811/=tut_btn_getStarted.gif"></p> +<p><strong>Snippet 1. Good:</strong></p> +<p>CSS:</p> +<pre class="brush: css">.button { + font-weight: bold; + color: #0077a6; + font-family: Arial, sans-serif; + border: none; + background: none; + cursor: pointer; + overflow: visible; + width: auto; + height: 30px; + text-decoration: none; + vertical-align: middle; +} + +.button span { + background: #fff url(../img/main-sprites.png) no-repeat scroll -384px 1px; + display:inline; + line-height: 25px; + padding: 6px 6px 6px 10px; +} + +.button .arrow { + background: transparent url(../img/main-sprites.png) no-repeat scroll -651px 1px; + padding: 6px 15px; +} + +html[dir='rtl'] .button .arrow { + /* Flip the arrow to point to the left*/ + background: transparent url(../img/main-sprites.png) no-repeat scroll -601px 1px; +} +</pre> +<p>HTML/PHP:</p> +<pre class="brush: php"><button type="submit" class="button"><span><?= _('get started'); ?></span><span class="arrow"></span></button> +</pre> +<h3 id="Don't_put_captions_in_the_images">Don't put captions in the images</h3> +<p><strong>Image 1. Bad:</strong></p> +<p><a href="/@api/deki/files/3813/=tut_headerImage.jpg" title="tut_headerImage.jpg"><img alt="tut_headerImage.jpg" class="internal default" src="/@api/deki/files/3813/=tut_headerImage.jpg?size=webview" style="width: 349px; height: 102px;"></a></p> diff --git a/files/ar/mozilla/localization/web_localizability/index.html b/files/ar/mozilla/localization/web_localizability/index.html new file mode 100644 index 0000000000..d8a814e46b --- /dev/null +++ b/files/ar/mozilla/localization/web_localizability/index.html @@ -0,0 +1,19 @@ +--- +title: Web Localizability +slug: Mozilla/Localization/Web_Localizability +tags: + - Internationalization + - Localizability + - Localization + - NeedsTranslation + - TopicStub + - Web Development +translation_of: Mozilla/Localization/Web_Localizability +--- +<p>Localizability (or <em>l12y</em> for short) is a characteristic found in an application or content that enables localization. The following list contains links to pages that highlight steps that can be taken to make web content localizable. The documentation is divided into 4 parts:</p> +<ol> <li><a href="/en/Web_Localizability/Creating_localizable_web_content" title="en/Web Localizability/Creating localizable web content">How to create localizable content.</a></li> <li><a href="/en/Web_Localizability/Localization_formats" title="en/Web Localizability/Localization formats">How to choose the right localization format.</a></li> <li><a href="/en/Web_Localizability/Creating_localizable_web_applications" title="en/Web Localizability/Creating localizable web applications">How to create localizable web applications.</a></li> <li><a href="/en/Web_Localizability/Setting_up_the_infrastructure" title="en/Web Localizability/Setting up the infrastructure">How to set up the infrastructure for localization.</a></li> +</ol> +<h3 id="Why_localizability_is_important">Why localizability is important</h3> +<p>There are many reasons why you should start thinking about making your web app localizable as soon as possible.</p> +<ol> <li>You will make localizer's life easier, for which they will be grateful.</li> <li>You will have quality content, localized and adapted to the needs of the local market.</li> <li>Extending you web app to support new languages will be easy.</li> <li>The content will be easier to maintain and update.</li> <li>You will end up writing more semanticly-correct code, which is good for your SEO.</li> <li>By reviewing your content and code for l12y, you will find and fix bugs in your original language too.</li> +</ol> diff --git a/files/ar/mozilla/localization/الترجمة_مع_بونتوون/index.html b/files/ar/mozilla/localization/الترجمة_مع_بونتوون/index.html new file mode 100644 index 0000000000..5feb5c26be --- /dev/null +++ b/files/ar/mozilla/localization/الترجمة_مع_بونتوون/index.html @@ -0,0 +1,135 @@ +--- +title: الترجمة باستخدام بونتوون +slug: Mozilla/Localization/الترجمة_مع_بونتوون +translation_of: Mozilla/Localization/Localizing_with_Pontoon +--- +<p dir="rtl">يعد <a href="https://pontoon.mozilla.org">بونتوون</a> اداة ترجمة (l10n) من نوع "<em>ما تراه هو ما تحصل عليه</em>" (WYSIWYG). نستخدم بونتوون في موزيلا لترجمة جميع المنتجات و المواقع، ابتداءً من فايرفوكس إلى موقع موزيلا. يعد بونتوون أداة بسيطة جداً وبديهية والتي تتطلب مهارات قليلة غير تقنية لاستخدامها في الترجمة. هنا، سوف نناقش كيف يمكنك استخدام بونتوون لترجمة المشاريع، ابتداءً من ولوجك للموقع إلى إنهاء مساهمتك. في أثناء الشرح سنشير إلى بعض المزايا المفيدة التي ستجعل مساهمتك أكثر فعالية و سهولة.</p> + +<div class="note" dir="rtl"> +<p><strong>هل أنت مطور؟ </strong>أقرأ حول <a href="/en-US/docs/Implementing_Pontoon_Mozilla">استخدام بونتوون في مشروعك</a> أو تعلم كيفية المساهمة في المشروع على <a href="https://github.com/mozilla/pontoon">غيت هاب</a>.</p> +</div> + +<h2 dir="rtl" id="الخطوات_الأولى">الخطوات الأولى</h2> + +<p dir="rtl">تعد <a href="https://pontoon.mozilla.org">الصفحة الرئيسية لموقع بونتوون</a> سهلة الاستخدام. لبدئ ترجمة مشروع قم بالضغط على أيقونة الشخصية في الأعلى وسجل دخولك. بعد ذلك، قم ببساطة باختيار المشروع الذي تريد العمل عليه واللغة من القوائم المسندلة. سيقوم بونتوون تلقائياً بفتح مشروع الترجمة من أجل البدئ. لاحظ أنه في حالتنا سنقوم باستخدام موقع <a href="https://affiliates.mozilla.org/">Firefox Affiliates</a> كعينة لإظهار وظائف وطريقة عمل بونتوون. والصورة التالية توضح شكل الموقع وهو مفتوح بداخل بونتوون:</p> + +<p><em><img alt="Browser app and workspace" src="https://mdn.mozillademos.org/files/8323/affiliates.png" style="height: 558px;"></em></p> + +<h3 dir="rtl" id="شريط_الأدوات_الرئيسي">شريط الأدوات الرئيسي</h3> + +<p dir="rtl">كما ترى، الموقع الذي يتم ترجمته يملأ معظم الواجهة. فقط شريط الأدوات يخص بونتوون، والذي يحتوي العناصر التالية (من اليسار إلى اليمين):</p> + +<p><img alt="Main toolbar" src="https://mdn.mozillademos.org/files/8325/toolbar.png"></p> + +<h4 dir="rtl" id="قائمة_بالنصوص">قائمة بالنصوص</h4> + +<p dir="rtl">لفتح شريط جانبي بقائمة فيها جميع النصوص لترجمتها.</p> + +<h4 dir="rtl" id="محدد_المشروع_(بحالتنا_Affiliates)">محدد المشروع (بحالتنا Affiliates)</h4> + +<p dir="rtl">للتبديل بين المشاريع لترجمتها.</p> + +<h4 dir="rtl" id="محدد_المورد_(بحالتنا_الصفحة_الرئيسية)"><span id="cke_bm_939S" style="display: none;"> </span>محدد المورد (بحالتنا الصفحة الرئيسية)</h4> + +<p dir="rtl">للتبديل بين موارد المشروع لترجمتها، مثل الصفحات الفرعية أو ملفات الترجمة. ويكون هذا الخيار مخفي في حالة عدم وجود موارد متوفرة للمشروع.</p> + +<h4 dir="rtl" id="محدد_اللغة_(بحالتنا_السلوفينية)"><span id="cke_bm_940S" style="display: none;"> </span>محدد اللغة (بحالتنا السلوفينية)</h4> + +<p dir="rtl">للتبديل بين اللغات للترجمة.</p> + +<h4 id="sect1"><span id="cke_bm_941S" style="display: none;"> </span></h4> + +<dl> +</dl> + +<h4 dir="rtl" id="انطلاق">انطلاق</h4> + +<p dir="rtl">لتطبيق الخيارات السابقة.</p> + +<h4 dir="rtl" id="مؤشر_التقدم">مؤشر التقدم</h4> + +<p dir="rtl">لعرض تقدمك في المورد الذي يجري ترجمته. يتم عرض المزيد من التفاصيل في النافذة المنبثقة (عند الضغط على المؤشر).</p> + +<dl> +</dl> + +<h4 dir="rtl" id="سسسسقائمة_المستخدم"><span id="cke_bm_943S" style="display: none;">سسسس</span>قائمة المستخدم</h4> + +<p dir="rtl">تسمح بالقيام بمهام مخصصة بالمستخدم، مثل الإيداع إلى مستودع، وتحميل الملفات، وتسجيل الخروج.</p> + +<h4 dir="rtl" id="قائمة_المعلومات">قائمة المعلومات</h4> + +<p dir="rtl">تقدم معلومات مهمة، <span id="result_box" lang="ar"><span>مثل الجدول الزمني المتوقع للمشروع وقائمة باختصارات لوحة المفاتيح.</span></span></p> + +<p dir="rtl">حسناً، والآن كيف يمكننا القيام ببعض الترجمة؟</p> + +<dl> +</dl> + +<dl> +</dl> + +<h2 dir="rtl" id="ترجمة_النصوص">ترجمة النصوص</h2> + +<p dir="rtl">عندما تستخدم بونتوون في الترجمة، لديك بضعة خيارات لتترجم نصوصك. حيث يمكنك الترجمة من محتوى الموقع مباشرة (بالمحتوى)، أو بشريط جانبي يظهر النصوص وترجمتها (خارج المحتوى) أو يمكنك استخدام كليهما. سنبدأ بنظرة على الترجمة بالمحتوى.</p> + +<h3 dir="rtl" id="الترجمة_بالمحتوى">الترجمة بالمحتوى</h3> + +<p dir="rtl">وضع الترجمة بالمحتوى الخاص ببونتوون هو عبارة عن استبدال النصوص بترجمتها. فهو يقوم بفتح صفحة ويب (أو تطبيق ويب) ويسمح بتحرير مباشر على نصوص الصفحة. هذه الصورة تظهر كيفية ترجمة نصك الأول:</p> + +<p><img alt="In-context localization" src="https://mdn.mozillademos.org/files/8331/in-context.png"></p> + +<ol dir="rtl"> + <li>قم بتحويم (تمرير) الفأرة فوق النص الذي تريد ترجمته.</li> + <li>سوف يظهر زر تعديل فوق النص. قم بالضغط عليه لتفعيل وضع الترجمة.</li> + <li>استبدل النص الأصلي بنظيره المقابل باللغتك.</li> + <li>قم بالضغط على زر الحفظ لحفظ ترجمتك.</li> +</ol> + +<div> +<h3 dir="rtl" id="الترجمة_خارج_المحتوى">الترجمة خارج المحتوى</h3> + +<p dir="rtl">بعض النصوص من المستحيل ترجمتها بوضع الترجمة بالمحتوى، مثل محتوى الوسم <title> في الموقع. عند الضغط على أيقونة الهمبورغر (الأيقونة التي تشبه شطيرة اللحم) في قائمة الأدوات، سيتم فتح شريط جانبي يحتوي على قائمة النصوص والترجمات المتوفرة. يمكنك استخدام هذا الشريط الجانبي للترجمة بوضع خارج المحتوى:</p> + +<p><img alt="Out-of-context localization: list" src="https://mdn.mozillademos.org/files/8337/out-of-context-1.png"> <img alt="Out-of-context localization: translate" src="https://mdn.mozillademos.org/files/8335/out-of-context-2.png"></p> + +<ol dir="rtl"> + <li>قم بالضغط على النص الذي تريد ترجمته. </li> + <li>سيفتح شريط يحتوي على النص الأصلي وتفاصيله (مثل التعليقات).</li> + <li>قم بترجمة النص في منطقة الترجمة أدناه.</li> + <li>قم بالضغط على زر الحفظ لحفظ ترجمتك.</li> +</ol> + +<p dir="rtl">بينما تقوم بالترجمة بوضع الترجمة خارج المحتوى، ستظهر هذه الترجمة أيضاً في الموقع (إن كانت قابلة للترجمة بوضع المحتوى).</p> + +<h3 dir="rtl" id="مساعدات_الترجمة">مساعدات الترجمة</h3> + +<p dir="rtl">كما ترى، الإقتراحات من السجل، وذاكرة الترجمة، والترجمة الآلية وغيرها من الترجمات (باللغات مختلفة) متوفرة في شريط الترجمة خارج المحتوى. ندعو كل ما سبق بمساعدات الترجمة وهنا سنسرد كيف ستساعدك كلاً منهم أثناء ترجمتك للنصوص:</p> +</div> + +<p><img alt="Translation helpers: History" src="https://mdn.mozillademos.org/files/8339/helpers-history.png"> <img alt="Translation helpers: Machinery" src="https://mdn.mozillademos.org/files/8341/helpers-machinery.png"> <img alt="Translation helpers: Other locales" src="https://mdn.mozillademos.org/files/8343/helpers-locales.png"> <img alt="Translation helpers: Search" src="https://mdn.mozillademos.org/files/8345/helpers-menu.png"></p> + +<h4 dir="rtl" id="السجل">السجل</h4> + +<p dir="rtl">يعرض الترجمات المقترحة سابقاً، متضمناً الترجمات من مستخدمين أخرين.</p> + +<h4 dir="rtl" id="الآليات_(تقنيات_آلية)">الآليات (تقنيات آلية)</h4> + +<p dir="rtl">تعرض الترجمات المتطابقة من خدمات متنوعة: ذاكرة الترجمة الداخلية، و <a href="http://transvision.mozfr.org/">موزيلا ترانسفيسيون</a>، و <a href="https://amagama-live.translatehouse.org/">ذاكرة الترجمة المفتوحة المصدر</a>، و <a href="http://www.microsoft.com/Language/">مصطلح مايكروسوفت</a>، و <a href="http://www.bing.com/translator">مترجم آلي</a>.</p> + +<h4 dir="rtl" id="ترجمات_أخرى">ترجمات أخرى</h4> + +<p dir="rtl">تعرض ترجمات متطابقة من لغات أخرى.</p> + +<h4 dir="rtl" id="البحث">البحث</h4> + +<p dir="rtl">تشبه تقريباً الآليات، ولكنها تأخد مدخلات كمعاملات بدلاً من النص الأصلي.</p> + +<p dir="rtl">بالضغط على إقتراح، سيتم نسخ النص المترجم (الذي أدخلته) إلى منطقة الترجمة.</p> + +<dl> +</dl> + +<h2 dir="rtl" id="نشر_ترجمتك">نشر ترجمتك</h2> + +<p dir="rtl">لنفترض أنك تريد الآن نشر ترجمتك بإيداعها إلى مستودع. يوفر لك بونتوون ميزة للقيام بذلك أيضاً! في الحقيقة، إنه يقوم بهذا تلقائياً بالمزامنة مع المستودع دورياً. يمكنك الأن أن تشعر بالرضى، تقوم برقصة صغيرة، تذهب إلى النوم أو أن تفعل شيئاً أخر للاحتفال بعملك!</p> diff --git a/files/ar/mozilla/mobile/index.html b/files/ar/mozilla/mobile/index.html new file mode 100644 index 0000000000..669a69a9ed --- /dev/null +++ b/files/ar/mozilla/mobile/index.html @@ -0,0 +1,32 @@ +--- +title: Mobile +slug: Mozilla/Mobile +tags: + - Mozilla + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Mobile +--- +<h2 id="Firefox_OS" name="Firefox_OS"><a href="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a></h2> + +<p>Firefox OS is an open source mobile operating system which uses Linux and Mozilla's Gecko engine to run a user interface and set of applications written entirely in HTML, CSS and JavaScript.</p> + +<p>Read about how to install Firefox OS and how to develop apps for it.</p> + +<h2 id="Firefox_for_Android" name="Firefox_for_Android"><a href="/en-US/docs/Mozilla/Firefox_for_Android">Firefox for Android</a></h2> + +<p>Firefox for Android is Mozilla's mobile web browser for Android devices. It's recently been rewritten to use Android's native UI, making it faster, leaner and more responsive. It provides support for powerful APIs to access device capabilities such as the camera and telephony stack.</p> + +<p>Read about how to help create Firefox for Android, how to use its device APIs, and how to build mobile add-ons.</p> + +<h2 id="Firefox_for_iOS" name="Firefox_for_iOS"><a href="/en-US/docs/Mozilla/Firefox_for_iOS">Firefox for iOS</a></h2> + +<p>Firefox for iOS is Mozilla's upcoming mobile web browser for iOS devices. Because of AppStore restrictions, it uses the built in WebView supplied by iOS rather than Gecko.</p> + +<p>Read about how to help with Firefox for iOS, and how to integrate it with your other iOS Apps.</p> + +<h2 id="Mobile_web_development" name="Mobile_web_development"><a href="/en-US/docs/Web/Guide/Mobile">Mobile web development</a></h2> + +<p>Mobile devices have very different hardware characteristics from desktop or laptop computers, and many of the APIs used to work with them are still in the process of being standardized.</p> + +<p>Read about how to develop web sites that look good on mobile devices and take advantage of the new possibilities they offer. Learn how to make sure your web site works well on different browsers.</p> diff --git a/files/ar/mozilla/mobile/viewport_meta_tag/index.html b/files/ar/mozilla/mobile/viewport_meta_tag/index.html new file mode 100644 index 0000000000..ed8d36f6c8 --- /dev/null +++ b/files/ar/mozilla/mobile/viewport_meta_tag/index.html @@ -0,0 +1,91 @@ +--- +title: Using the viewport meta tag to control layout on mobile browsers +slug: Mozilla/Mobile/Viewport_meta_tag +translation_of: Mozilla/Mobile/Viewport_meta_tag +--- +<p>The upcoming release of <a class="link-https" href="https://wiki.mozilla.org/Mobile/Fennec">Mobile Firefox (Fennec)</a> 1.1 features improved support for the <a href="/en-US/docs/Web/HTML/Element/meta#Attributes"><code><meta name="viewport"></code></a> tag. Previous versions of Fennec supported the <code>width</code>, <code>height</code>, and <code>initial-scale</code> viewport properties, but had <a class="external" href="http://starkravingfinkle.org/blog/2010/01/perils-of-the-viewport-meta-tag/">problems</a> with some sites designed for iPhone and Android browsers. We now support the same properties Mobile Safari does, and we also changed Fennec to render mobile sites more consistently on screens of different sizes and resolutions.</p> + +<p class="caption">touch.facebook.com before:</p> + +<p class="figure"><img alt="05-11-fennec-meta-viewport-2.png" class="default internal" src="/@api/deki/files/4371/=05-11-fennec-meta-viewport-2.png"></p> + +<p class="caption">touch.facebook.com after:</p> + +<p class="figure"><img alt="05-11-fennec-meta-viewport-1.png" class="default internal" src="/@api/deki/files/4372/=05-11-fennec-meta-viewport-1.png"></p> + +<p>You can see these changes for yourself in the latest <a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/mobile/nightly/latest-mobile-1.9.2/">Fennec 1.1</a> and <a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/mobile/nightly/latest-mobile-trunk/">trunk</a> nightly builds for Maemo, Windows, Mac, or Linux.</p> + +<h2 id="Background">Background</h2> + +<p>Mobile browsers like Fennec render pages in a virtual "window" (the viewport), usually wider than the screen, so they don't need to squeeze every page layout into a tiny window (which would break many non-mobile-optimized sites). Users can pan and zoom to see different areas of the page.</p> + +<p>Mobile Safari introduced the "viewport meta tag" to let web developers control the viewport's size and scale. Many other mobile browsers now support this tag, although it is not part of any web standard. Apple's <a class="external" href="http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW29">documentation</a> does a good job explaining how web developers can use this tag, but we had to do some detective work to figure out exactly how to implement it in Fennec. For example, Safari's documentation says the content is a "comma-delimited list," but existing browsers and web pages use any mix of commas, semicolons, and spaces as separators.</p> + +<p>Learn more about viewports in different mobile browsers in <a class="external" href="http://www.quirksmode.org/mobile/viewports2.html" title="http://www.quirksmode.org/mobile/viewports2.html">A Tale of Two Viewports</a> at quirksmode.org.</p> + +<h2 id="Viewport_basics">Viewport basics</h2> + +<p>A typical mobile-optimized site contains something like the following:</p> + +<pre><meta name="viewport" content="width=device-width, initial-scale=1"></pre> + +<p>The <code>width</code> property controls the size of the viewport. It can be set to a specific number of pixels like <code>width=600</code> or to the special value <code>device-width</code> value which is the width of the screen in CSS pixels at a scale of 100%. (There are corresponding <code>height</code> and <code>device-height</code> values, which may be useful for pages with elements that change size or position based on the viewport height.)</p> + +<p>The <code>initial-scale</code> property controls the zoom level when the page is first loaded. The <code>maximum-scale</code>, <code>minimum-scale</code>, and <code>user-scalable</code> properties control how users are allowed to zoom the page in or out.</p> + +<h2 id="A_pixel_is_not_a_pixel">A pixel is not a pixel</h2> + +<p>The iPhone and many popular Android phones have 3- to 4-inch (7–10 cm) screens with 320—480 pixels (~160 dpi). Firefox for Maemo runs on the Nokia N900, which has the same physical size but 480—800 pixels (~240 dpi). Because of this, the last version of Fennec displayed many pages about one third smaller (in actual, physical size) than iPhone or Android. This caused usability and readability problems on many touch-optimized web sites. Peter-Paul Koch wrote about this problem in <a class="external" href="http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html">A pixel is not a pixel</a>.</p> + +<p>Fennec 1.1 for Maemo will use 1.5 hardware pixels for each CSS "pixel," following the lead of Android's WebKit-based browser. This means a page with <code>initial-scale=1</code> will render at close to the same physical size in Fennec for Maemo, Mobile Safari for iPhone, and the Android Browser on both <a class="external" href="http://developer.android.com/guide/practices/screens_support.html#range">HDPI and MDPI</a> phones. This is consistent with the <a class="external" href="http://www.w3.org/TR/CSS2/syndata.html#length-units">CSS 2.1 specification</a>, which says:</p> + +<blockquote> +<p>If the pixel density of the output device is very different from that of a typical computer display, the user agent should rescale pixel values. It is recommended that the pixel unit refer to the whole number of device pixels that best approximates the reference pixel. It is recommended that the reference pixel be the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length.</p> +</blockquote> + +<p>For web developers, this means that 320px be full width in portrait mode at scale=1, on all of the above-mentioned handheld devices, and they may size their layouts and images accordingly. But remember that not all mobile devices are the same width; you should also make sure that your pages work well in landscape mode, and on larger devices like the iPad and Android tablets.</p> + +<p>On 240-dpi screens, pages with <code>initial-scale=1</code> will effectively be zoomed to 150% by both Fennec and Android WebKit. Their text will be smooth and crisp, but their bitmap images will probably not take advantage of the full screen resolution. To get sharper images on these screens, web developers may want to design images – or whole layouts – at 150% of their final size (or 200%, to support 320-dpi devices such as a retina display iPhone) and then scale them down using CSS or viewport properties.</p> + +<p>The default ratio depends on the display density. On a display with density less than 200dpi, the ratio is 1.0. On displays with density between 200 and 300dpi, the ratio is 1.5. For displays with density over 300dpi, the ratio is the integer floor(<em>density</em>/150dpi). Note that the default ratio is true only when the viewport scale equals 1. Otherwise, the relationship between CSS pixels and device pixels depends on the current zoom level.</p> + +<h2 id="Viewport_width_and_screen_width">Viewport width and screen width</h2> + +<p>Many sites set their viewport to <code>"width=320, initial-scale=1"</code> to fit precisely onto the iPhone display in portrait mode. As mentioned above, this caused <a class="external" href="http://starkravingfinkle.org/blog/2010/01/perils-of-the-viewport-meta-tag/">problems</a> when Fennec 1.0 rendered these sites, especially in landscape mode. To fix this, Fennec 1.1 will expand the viewport width if necessary to fill the screen at the requested scale. This matches the behavior of Android and Mobile Safari, and is especially useful on large-screen devices like the iPad. (Allen Pike's <a class="external" href="http://www.antipode.ca/2010/choosing-a-viewport-for-ipad-sites/">Choosing a viewport for iPad sites</a> has a good explanation for web developers.)</p> + +<p>For pages that set an initial or maximum scale, this means the <code>width</code> property actually translates into a <em>minimum</em> viewport width. For example, if your layout needs at least 500 pixels of width then you can use the following markup. When the screen is more than 500 pixels wide, the browser will expand the viewport (rather than zoom in) to fit the screen:</p> + +<pre><meta name="viewport" content="width=500, initial-scale=1"></pre> + +<p>Fennec 1.1 also adds support for <code>minimum-scale</code>, <code>maximum-scale</code>, and <code>user-scalable</code>, with defaults and limits similar to <a class="external" href="http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html">Safari's</a>. These properties affect the initial scale and width, as well as limiting changes in zoom level.</p> + +<p>Mobile browsers handle orientation changes slightly differently. For example, Mobile Safari often just zooms the page when changing from portrait to landscape, instead of laying out the page as it would if originally loaded in landscape. If web developers want their scale settings to remain consistent when switching orientations on the iPhone, they must add a <code>maximum-scale</code> value to prevent this zooming, which has the sometimes-unwanted side effect of preventing users from zooming in:</p> + +<pre><meta name="viewport" content="initial-scale=1, maximum-scale=1"></pre> + +<p>This is not necessary in Fennec; when the device changes orientation, Fennec updates the viewport size, the page layout, and JavaScript/CSS properties like <code>device-width</code>, based on its new window dimensions.</p> + +<h2 id="Common_viewport_sizes_for_mobile_and_tablet_devices">Common viewport sizes for mobile and tablet devices</h2> + +<p>If want to know what mobile and tablet devices have which viewport widths, there is a comprehensive list of <a href="http://viewportsizes.com/" title="http://viewportsizes.com/">mobile and tablet viewport sizes here</a>. This gives information such as viewport width on portrait and landscape orientation as well as physical screen size, operating system and the pixel density of the device.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Device', '#viewport-meta', '<meta name="viewport">')}}</td> + <td>{{Spec2('CSS3 Device')}}</td> + <td>Non-normatively describes the Viewport META element</td> + </tr> + </tbody> +</table> + +<p>There is clearly demand for the viewport meta tag, since it is supported by most popular mobile browsers and used by thousands of web sites. It would be good to have a true standard for web pages to control viewport properties. As the standardization process proceeds, we at Mozilla will work to make sure we can implement any changes made during standardization.</p> diff --git a/files/ar/mozilla/preferences/index.html b/files/ar/mozilla/preferences/index.html new file mode 100644 index 0000000000..4628f957cb --- /dev/null +++ b/files/ar/mozilla/preferences/index.html @@ -0,0 +1,45 @@ +--- +title: Preferences +slug: Mozilla/Preferences +translation_of: Mozilla/Preferences +--- +<p>The preference system makes it possible to store data for Mozilla applications using a key/value pairing system. These articles provide information about how to use the preference system.</p> +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Documentation" name="Documentation">Documentation</h2> + <dl> + <dt><a href="/en-US/docs/Preferences/Preferences_system" title="Preferences/Preferences system">Preferences system</a></dt> + <dd>An introduction to using the preference system in Mozilla.</dd> + <dt><a href="/en-US/docs/XUL_School/Handling_Preferences" title="XUL School/Handling Preferences">XUL School: Handling preferences</a></dt> + <dd>The XUL School tutorial chapter on preferences.</dd> + <dt><a href="/en-US/docs/Preferences/Preference_reference" title="Preferences/Preference_reference">Mozilla preference reference</a></dt> + <dd>A reference guide to all Mozilla preferences; currently a work in progress.</dd> + <dt><a href="/en-US/docs/Preferences/A_brief_guide_to_Mozilla_preferences" title="Preferences/A brief guide to Mozilla preferences">A brief guide to Mozilla preferences</a></dt> + <dd>An introductory guide to where preferences are stored and other useful information about the core preference system.</dd> + <dt><a href="/en-US/docs/Preferences/Using_preferences_from_application_code" title="Preferences/Using preferences from application code">Using preferences from application code</a> {{gecko_minversion_inline("6.0")}}</dt> + <dd>Firefox 6 introduced static functions for accessing preferences efficiently from within application code. This API is not available for add-ons, but if you're working on a Gecko application, this API is the preferred way to access preferences.</dd> + <dt><a href="/en-US/docs/Preferences/Mozilla_networking_preferences" title="Preferences/Mozilla networking preferences">Mozilla networking preferences</a></dt> + <dd>A guide to key networking-related preferences.</dd> + <dt><a href="/en-US/docs/Preferences/Mozilla_preferences_for_uber-geeks" title="Preferences/Mozilla preferences for uber-geeks">Mozilla preferences for uber-geeks</a></dt> + <dd>A guide to preferences that only truly elite geeks should play with.</dd> + </dl> + <p><span class="alllinks"><a href="/en-US/docs/tag/Preferences" title="tag/Preferences">View all pages tagged with "Preferences"...</a></span></p> + </td> + <td> + <h2 class="Community" id="Examples" name="Examples">Examples</h2> + <dl> + <dt><a href="/en-US/docs/Code_snippets/Preferences" title="Code snippets/Preferences">Code snippets</a></dt> + <dd>Preference-related code snippets.</dd> + <dt><a href="/en-US/docs/Adding_preferences_to_an_extension" title="Adding preferences to an extension">Adding preferences to an extension</a></dt> + <dd>How to add preferences to an existing extension.</dd> + </dl> + <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related Topics</h2> + <ul> + <li><a href="/en-US/docs/XUL" title="XUL">XUL</a>, <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>, <a href="/en-US/docs/XPCOM" title="XPCOM">XPCOM</a>, <a href="/en-US/docs/Extensions" title="Extensions">Extensions</a>, <a href="/en-US/docs/Developer_Guide" title="Developing_Mozilla">Developing Mozilla</a></li> + </ul> + </td> + </tr> + </tbody> +</table> diff --git a/files/ar/mozilla/projects/index.html b/files/ar/mozilla/projects/index.html new file mode 100644 index 0000000000..d7e62c6882 --- /dev/null +++ b/files/ar/mozilla/projects/index.html @@ -0,0 +1,15 @@ +--- +title: Projects +slug: Mozilla/Projects +tags: + - Landing + - Mozilla + - NeedsContent + - NeedsTranslation + - Projects + - TopicStub +translation_of: Mozilla/Projects +--- +<p>Here you'll find links to documentation about various Mozilla projects; these are often parts of Firefox or other products, but may also be used in other projects as well.</p> + +<p>{{ LandingPageListSubpages() }}</p> diff --git a/files/ar/mozilla/projects/spidermonkey/index.html b/files/ar/mozilla/projects/spidermonkey/index.html new file mode 100644 index 0000000000..f39621af26 --- /dev/null +++ b/files/ar/mozilla/projects/spidermonkey/index.html @@ -0,0 +1,115 @@ +--- +title: 'SpiderMonkey: The Mozilla JavaScript runtime' +slug: Mozilla/Projects/SpiderMonkey +tags: + - NeedsTranslation + - SpiderMonkey + - TopicStub +translation_of: Mozilla/Projects/SpiderMonkey +--- +<div>{{SpiderMonkeySidebar}}</div> + +<div class="summary"> +<p><strong>SpiderMonkey</strong> is Mozilla's <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a> engine written in C and C++. It is used in various Mozilla products, including Firefox, and is available under the MPL2.</p> +</div> + +<p>Standalone source code releases can be found on the <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey/Releases">Releases page</a>.</p> + +<div class="column-container"> +<div class="column-half"> +<h2 id="Creating" name="Creating">Guides</h2> + +<h3 id="Building">Building</h3> + +<dl> + <dt><a href="/en-US/docs/Mozilla/Projects/SpiderMonkey/Build_Documentation" title="SpiderMonkey build documentation">SpiderMonkey Build Documentation</a></dt> + <dd>How to get SpiderMonkey source code, build it, and run the test suite.</dd> +</dl> + +<h3 id="Using_SpiderMonkey">Using SpiderMonkey</h3> + +<dl> + <dt><a href="/en-US/docs/Mozilla/Projects/SpiderMonkey/Introduction_to_the_JavaScript_shell" title="Introduction to the JavaScript shell">Introduction to the JavaScript shell</a></dt> + <dd>Documentation of the command-line JavaScript shell, <code>js</code>.</dd> + <dt><a href="/en-US/docs/Mozilla/Projects/SpiderMonkey/JSAPI_User_Guide" title="en-US/docs/JSAPI_User_Guide">JSAPI User Guide</a></dt> + <dd>This guide provides an overview of SpiderMonkey and describes how you can embed engine calls in your applications to make them JavaScript-aware.</dd> + <dt><a href="/en-US/docs/Mozilla/Projects/SpiderMonkey/JSAPI_Cookbook" title="en-US/docs/SpiderMonkey/JSAPI_Phrasebook">JSAPI cookbook</a></dt> + <dd>Shows the JSAPI translation of some commonly used JavaScript expressions and statements.</dd> + <dt><a href="/en-US/docs/SpiderMonkey/GC_Rooting_Guide">GC Rooting Guide</a></dt> + <dd>Guide on how to write code compatible with the Generational GC in SpiderMonkey.</dd> + <dt><a href="/en-US/docs/How_to_embed_the_JavaScript_engine" title="en-US/docs/How_to_embed_the_JavaScript_engine">How to embed the JavaScript engine</a></dt> + <dd>An older tutorial about embedding SpiderMonkey.</dd> +</dl> + +<h2 id="Hacking_on_SpiderMonkey">Hacking on SpiderMonkey</h2> + +<dl> + <dt><a class="link-https" href="https://wiki.mozilla.org/JavaScript:New_to_SpiderMonkey" title="https://wiki.mozilla.org/JavaScript:New_to_SpiderMonkey">New to SpiderMonkey</a></dt> + <dd>A guide to hacking on SpiderMonkey.</dd> + <dt><a href="/en-US/docs/SpiderMonkey/Setting_up_CDT_to_work_on_SpiderMonkey" title="en-US/docs/SpiderMonkey/Setting up CDT to work on SpiderMonkey">Setting up CDT to work on SpiderMonkey</a></dt> + <dd>How to configure Eclipse to work on the SpiderMonkey code.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/SpiderMonkey/Running_Automated_JavaScript_Tests" title="Running automated JavaScript tests">Running Automated JavaScript Tests</a></dt> + <dd>How to run the JavaScript test suites.</dd> + <dt><a href="/en-US/docs/SpiderMonkey/Creating_JavaScript_tests" title="en-US/docs/SpiderMonkey/Creating JavaScript tests">Creating JavaScript tests</a></dt> + <dd>How to add tests to the JavaScript test suites.</dd> +</dl> +</div> + +<div class="column-half"> +<h2 id="Reference">Reference</h2> + +<dl> + <dt><a href="/en-US/docs/Mozilla/Projects/SpiderMonkey/JSAPI_reference" title="en-US/docs/SpiderMonkey/JSAPI_Reference">JSAPI Reference</a></dt> + <dd>SpiderMonkey API reference.</dd> + <dt><a href="/en-US/docs/SpiderMonkey/JS_Debugger_API_Reference" title="en-US/docs/SpiderMonkey/JS Debugger API Reference">JS Debugger API Reference</a></dt> + <dd>API reference for the <code>Debugger</code> object introduced in SpiderMonkey 1.8.6, which corresponds to Gecko 8.0 {{ geckoRelease("8.0") }}.</dd> + <dt><a href="/en-US/docs/Mozilla/Projects/SpiderMonkey/Internals/Bytecode">Bytecode descriptions</a></dt> + <dd>Listing of SpiderMonkey's bytecodes.</dd> + <dt><a href="/en-US/docs/Mozilla/Projects/SpiderMonkey/Parser_API">Parser API</a></dt> + <dd>Reflection of the SpiderMonkey parser, made available as a JavaScript API.</dd> +</dl> + +<h2 id="Tips_tricks_and_philosophy">Tips, tricks and philosophy</h2> + +<dl> + <dt><a href="/en-US/docs/SpiderMonkey/Future_directions" title="en-US/docs/SpiderMonkey/Future_directions">Future Directions</a></dt> + <dd>Future directions for functionality, design, and coding practices.</dd> + <dt><a href="/en-US/docs/SpiderMonkey/Internals" title="en-US/docs/SpiderMonkey_Internals">SpiderMonkey Internals</a></dt> + <dd>A design overview and a file-by-file walkthrough of the implementation.</dd> + <dt><a href="/en-US/docs/SpiderMonkey/Bytecodes" title="en-US/docs/SpiderMonkey/Bytecodes">Bytecode Reference</a></dt> + <dd>SpiderMonkey bytecode reference.</dd> + <dt><a href="/en-US/docs/SpiderMonkey/Internals/Garbage_collection" title="en-US/docs/SpiderMonkey/Internals/GC">SpiderMonkey Internals: GC</a></dt> + <dd>Separate internals article on the GC</dd> + <dt><a href="/en-US/docs/SpiderMonkey/Hacking_Tips" title="en-US/docs/SpiderMonkey/Hacking_Tips">SpiderMonkey Internals: Hacking Tips </a></dt> + <dd>Collection of helpful tips & tools for hacking on the engine</dd> +</dl> + +<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related Topics</h2> + +<ul> + <li><a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a></li> + <li><a href="/en-US/docs/SpiderMonkey/FOSS" title="en-US/docs/SpiderMonkey/FOSS">FOSS projects using or based on SpiderMonkey</a></li> +</ul> + +<h2 id="Releases">Releases</h2> + +<dl> + <dt><a href="/en-US/docs/Mozilla/Projects/SpiderMonkey/Releases">SpiderMonkey release notes</a></dt> + <dd>Current and past versions: <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey/Releases/52">52</a>, <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey/Releases/45">45</a>, <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey/Releases/38">38</a>, <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey/Releases/31">31</a>, <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey/Releases/24">24</a>, <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey/Releases/17">17</a></dd> +</dl> + +<h2 id="Community">Community</h2> + +<ul> + <li><a href="https://lists.mozilla.org/listinfo/dev-tech-js-engine">Mailing list</a></li> + <li><a href="http://stackoverflow.com/questions/tagged/spidermonkey">SpiderMonkey questions on Stack Overflow</a></li> + <li><a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Core&component=JavaScript%20Engine">Report a bug</a></li> +</ul> + +<dl> +</dl> +</div> +</div> diff --git a/files/ar/mozilla/projects/spidermonkey/introduction_to_the_javascript_shell/index.html b/files/ar/mozilla/projects/spidermonkey/introduction_to_the_javascript_shell/index.html new file mode 100644 index 0000000000..80998587aa --- /dev/null +++ b/files/ar/mozilla/projects/spidermonkey/introduction_to_the_javascript_shell/index.html @@ -0,0 +1,373 @@ +--- +title: Introduction to the JavaScript shell +slug: Mozilla/Projects/SpiderMonkey/Introduction_to_the_JavaScript_shell +translation_of: Mozilla/Projects/SpiderMonkey/Introduction_to_the_JavaScript_shell +--- +<div><font><font>{{SpiderMonkeySidebar ("عام")}}</font></font></div> + +<div class="summary"> +<p><font><font>و </font></font><strong><font><font>جافا سكريبت قذيفة</font></font></strong><font><font> ( </font></font><code>js</code><font><font>) هو برنامج سطر الأوامر المدرجة في </font></font><a href="/en-US/docs/Mozilla/Projects/SpiderMonkey" title="ar / SpiderMonkey"><font><font>سبايدر مونكي</font></font></a><font><font> توزيع المصدر. </font><font>إنه مكافئ جافا سكريبت لموجه Python التفاعلي ، أو حلقة Lisp للقراءة والتقييم والطباعة ، أو Ruby's </font></font><code>irb</code><font><font>. </font><font>تشرح هذه المقالة كيفية استخدام الصدفة لتجربة كود JavaScript وتشغيل برامج JavaScript.</font></font></p> +</div> + +<p><font><font>للحصول على SpiderMonkey JavaScript shell ، راجع </font></font><a href="/en-US/docs/Mozilla/Projects/SpiderMonkey/Build_Documentation"><font><font>SpiderMonkey Build Documentation</font></font></a><font><font> أو قم بتنزيل ملف ثنائي </font><a href="/en-US/docs/Mozilla/Projects/SpiderMonkey/Build_Documentation"><font>مترجم لمنصتك</font></a><font> من </font></font><a class="external" href="https://archive.mozilla.org/pub/firefox/nightly/latest-mozilla-central/" title="http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/"><font><font>Nightly Builds</font></font></a><font><font> .</font></font></p> + +<p><font><font>للحصول على قائمة بأغلفة JavaScript الأخرى ، راجع </font></font><a class="internal" href="/en-US/docs/Web/JavaScript/Shells" title="قذائف En / JavaScript"><font><font>قذائف JavaScript</font></font></a><font><font> .</font></font></p> + +<div class="note"> +<p><font><font>ملاحظة: بدءًا من SpiderMonkey 44 {{geckoRelease (44)}} ، يتم استخدام إصدار JavaScript القياسي المتوافق مع الويب افتراضيًا (وليس JS1.7 + بعد الآن). </font><font>و </font></font><code>version()</code><font><font>قذيفة المضمن لا يزال هناك لاختبار الميزات القديمة.</font></font></p> +</div> + +<h2 id="Using_the_JavaScript_shell" name="Using_the_JavaScript_shell"><font><font>تشغيل قشرة JavaScript</font></font></h2> + +<p><font><font>تقدم القذيفة وضعين للتشغيل. </font><font>يمكنك استخدامه كصدفة تفاعلية ، حيث تكتب رمز JavaScript في الحال وتحصل على إشباع فوري ، وهو مفيد لتجربة الميزات الجديدة أو اختبارها. </font><font>يمكنك أيضًا تمرير ملف برنامج JavaScript في سطر الأوامر ليتم تشغيله ، وفي هذه الحالة يتم تشغيل البرنامج تلقائيًا.</font></font></p> + +<p><font><font>بعد اتباع وثائق الإنشاء وتثبيت الغلاف المدمج باستخدام إجراء التثبيت ، يمكنك تشغيل الصدفة في الوضع التفاعلي باستخدام الأمر:</font></font></p> + +<pre class="eval notranslate"><font><font>شبيبة +</font></font></pre> + +<p style="text-align: right;"><font><font>[إذا حصلت على "خطأ في البحث عن الرمز: ./js: رمز غير محدد: PR_SetCurrentThreadName" على سبيل المثال من وحدة تحكم Bash عند استخدام برنامج ثنائي تم تجميعه مسبقًا ، جرب <path to your Firefox's run-mozilla.sh> /run-mozilla.sh. / js - لقد نجحت معي]</font></font></p> + +<p><font><font>إذا كنت ترغب في تشغيل كود JavaScript في الملف </font></font><code>foo.js</code><font><font>، يمكنك استخدام هذا الأمر:</font></font></p> + +<pre class="eval notranslate"><font><font>js foo.js +</font></font></pre> + +<p><font><font>للتشغيل </font></font><code>foo.js</code><font><font>ثم الإسقاط في الغلاف التفاعلي ، قم بما يلي:</font></font></p> + +<pre class="eval notranslate"><font><font>js -f foo.js -i +</font></font></pre> + +<h2 id="مرجع"><font><font>مرجع</font></font></h2> + +<div class="note"><strong><font><font>ملاحظة:</font></font></strong><font><font> نظرًا لاستخدام JavaScript shell كبيئة اختبار لمحرك JavaScript ، يمكن أن تتغير الخيارات المتاحة والوظائف المضمنة بمرور الوقت.</font></font></div> + +<h3 id="Command_line_options" name="Command_line_options"><font><font>خيارات سطر الأوامر</font></font></h3> + +<p><font><font>هناك عدد من خيارات سطر الأوامر التي يمكنك تحديدها للتحكم في الغلاف. </font><font>هذه ملخصة أدناه. </font><font>تأكد من استخدام </font></font><strong><font><font>-h</font></font></strong><font><font> مع jsshell الخاص بك لمعرفة ما إذا كان هناك أي شيء غير موثق.</font></font></p> + +<dl> + <dt><code>-c, --compileonly</code></dt> + <dd><font><font>يخبر الغلاف بتجميع البرنامج ولكن لا يقوم بتشغيله. </font><font>هذه طريقة مناسبة للتحقق بسرعة من أخطاء بناء الجملة في برنامجك دون تشغيله فعليًا.</font></font></dd> + <dt><code>-e <em>script</em></code></dt> + <dd><font><font>يقوم بتشغيل </font></font><em><font><font>البرنامج النصي</font></font></em><font><font> المحدد </font><font>، وهو سلسلة حرفية تحتوي على الكود المطلوب تنفيذه.</font></font></dd> + <dt><code>-f <em>filename</em></code></dt> + <dd><font><font>يقوم بتشغيل برنامج JavaScript المحدد بواسطة </font></font><em><font><font>اسم الملف</font></font></em><font><font> .</font></font></dd> + <dt><code>-i</code></dt> + <dd><font><font>تمكن الوضع التفاعلي. </font><font>(افتراضي إذا لم يتم توفير اسم ملف.)</font></font></dd> + <dt><code>--no-ion</code></dt> + <dd><font><font>تعطيل برنامج التحويل البرمجي الأمثل JIT.</font></font></dd> + <dt><code>--no-baseline</code></dt> + <dd><font><font>تعطيل مترجم JIT الأساسي.</font></font></dd> + <dt><code>-P</code></dt> + <dd><font><font>إذا كان السطر الأول من الملف هو "/ usr / bin / env js -P" ، فسيتم تفسير محتوى الملف بواسطة محرك JavaScript.</font></font></dd> + <dd><font><font>يمكّنك هذا من إنشاء ملف JavaScript قابل للتنفيذ على أجهزة unix و OS X.</font></font></dd> + <dt><code>-s</code></dt> + <dd><font><font>لتمكين وضع التحذير الصارم.</font></font></dd> + <dt><code>-w, --warnings</code></dt> + <dd><font><font>تمكن رسائل التحذير.</font></font></dd> + <dt><code>-W</code><font><font>، - المعلومات</font></font></dt> + <dd><font><font>تعطيل رسائل التحذير.</font></font></dd> +</dl> + +<h3 id="Environment_options" name="Environment_options"><font><font>خيارات البيئة</font></font></h3> + +<p><font><font>هناك بعض متغيرات البيئة التي يمكن ضبطها لتغيير سلوك js shell.</font></font></p> + +<dl> + <dt><code>JS_STDOUT=<em>file</em></code></dt> + <dd><font><font>إعادة توجيه stdout إلى </font></font><em><font><font>ملف</font></font></em><font><font> .</font></font></dd> + <dt><code>JS_STDERR=<em>file</em></code></dt> + <dd><font><font>إعادة توجيه stderr إلى </font></font><em><font><font>ملف</font></font></em><font><font> .</font></font></dd> +</dl> + +<h3 id="Built-in_functions" name="Built-in_functions"><font><font>وظائف مدمجة</font></font></h3> + +<p><font><font>لجعل JavaScript shell أكثر فائدة ، هناك عدد من الوظائف المضمنة بشرط أن يمكنك استخدامها إما من برامج JavaScript أو في الوضع التفاعلي.</font></font></p> + +<div class="warning"> +<p><strong><font><font>ملاحظة</font></font></strong><font><font> : هذه القائمة غير مكتملة وتتداخل مع </font></font><a href="/en-US/docs/SpiderMonkey/Shell_global_objects"><font><font>كائنات شل العامة</font></font></a><font><font> . </font><font>راجع {{Source ("js / src / shell / js.cpp")}} (حول </font></font><code>shell_functions</code><font><font>) للمزيد.</font></font></p> +</div> + +<h4 id="build.28.29" name="build.28.29"><code>build()</code></h4> + +<p><font><font>لعرض التاريخ والوقت اللذين تم فيهما إنشاء غلاف JavaScript.</font></font></p> + +<div class="note"><strong><font><font>ملاحظة:</font></font></strong> <code>clear()</code><font><font> بدون أي معلمات يزيل كل شيء حقًا. </font><font>وهذا يشمل كل هذه الوظائف المدمجة.</font></font></div> + +<h4 id="clone.28function.2C_.5Bscope.5D.29" name="clone.28function.2C_.5Bscope.5D.29"><code>clone(<em>function, [scope]</em>)</code></h4> + +<p><font><font>استنساخ </font><font>كائن </font></font><var><font><font>الوظيفة</font></font></var><font><font> المحدد </font><font>. </font><font>إذا </font><font>لم يتم تحديد </font></font><var><font><font>النطاق</font></font></var><font><font> ، فسيكون الكائن الرئيسي الجديد هو نفسه الكائن الأصلي. </font><font>خلاف ذلك ، يتم وضع الكائن الجديد في نطاق الكائن المحدد بواسطة </font></font><var><font><font>النطاق</font></font></var><font><font> .</font></font></p> + +<h4 id="countHeap" name="countHeap"><code>countHeap(<em>[start[, kind]]</em>)</code></h4> + +<p><font><font>{{jsapi_minversion_inline ("1.8")}} احسب عدد أشياء GC الحية في الكومة ، أو الأشياء التي يمكن الوصول إليها من </font></font><var><font><font>البداية</font></font></var><font><font> عندما يتم تقديمها وليست فارغة. </font></font><var><font><font>النوع</font></font></var><font><font> هو إما </font></font><code>'all'</code><font><font>(افتراضي) لعد كل الأشياء أو واحد من </font></font><code>'object'</code><font><font>، </font></font><code>'double'</code><font><font>، </font></font><code>'string'</code><font><font>، </font></font><code>'function'</code><font><font>، </font></font><code>'qname'</code><font><font>، </font></font><code>'namespace'</code><font><font>، </font></font><code>'xml'</code><font><font>لحساب الأشياء من هذا النوع فقط.</font></font></p> + +<h4 id="evalcx.28string.5B.2C_object.5D.29" name="evalcx.28string.5B.2C_object.5D.29"><code>dumpHeap(<em>[fileName[, start[, toFind[, maxDepth[, toIgnore]]]]]</em>)</code></h4> + +<p><font><font>{{jsapi_minversion_inline ("1.8")}} تفريغ الرسم البياني لجميع الكائنات الموجودة (أو رسم فرعي محدد مثير للاهتمام) إلى ملف. </font><font>لمزيد من المعلومات ، راجع إصدار C / C ++ من هذه الوظيفة ، </font></font><code>JS_DumpHeap</code><font><font>.</font></font></p> + +<h4 id="evalcx.28string.5B.2C_object.5D.29" name="evalcx.28string.5B.2C_object.5D.29"><code>evalcx(<em>string[, object]</em>)</code></h4> + +<p><font><font>يقيم كود JavaScript في </font></font><em><font><font>السلسلة</font></font></em><font><font> . </font><font>إذا </font><font>تم تحديد </font></font><em><font><font>الكائن</font></font></em><font><font> ، فسيتم تنفيذ الكود في هذا الكائن ، ومعاملته كصندوق حماية.</font></font></p> + +<p><font><font>إذا كانت </font></font><em><font><font>السلسلة</font></font></em><font><font> فارغة ولم </font><font>يتم تحديد </font></font><em><font><font>الكائن</font></font></em><font><font> ، يتم </font></font><code>evalcx()</code><font><font>إرجاع كائن جديد بفئات قياسية متلهفة.</font></font></p> + +<p><font><font>إذا كانت </font></font><em><font><font>السلسلة</font></font></em><font><font> "lazy" ولم </font><font>يتم تحديد </font></font><em><font><font>الكائن</font></font></em><font><font> ، يتم </font></font><code>evalcx()</code><font><font>إرجاع كائن جديد بفئات قياسية كسولة.</font></font></p> + +<div class="note"><strong><font><font>ملاحظة:</font></font></strong> <code>evalcx()</code><font><font> هذا مفيد فقط للأشخاص الذين يقومون بعمل داخلي عميق على محرك JavaScript ، </font></font><code>evalInSandbox</code><font><font>لبيئات تشبه </font><font>الاختبار </font><font>في الغلاف.</font></font></div> + +<h4 id="gc.28.29" name="gc.28.29"><code>gc()</code></h4> + +<p><font><font>يدير جامع القمامة لتحرير الذاكرة.</font></font></p> + +<h4 id="gcparam.28.29" name="gcparam.28.29"><code>gcparam(<em>name[, value]</em>)</code></h4> + +<p><font><font>{{jsapi_minversion_inline ("1.8")}} قراءة أو تهيئة معلمات أداة تجميع البيانات المهملة.</font></font></p> + +<p><font><font>و </font></font><em><font><font>اسم</font></font></em><font><font> يجب أن يكون واحدا من مفاتيح المعلمة (مثل </font></font><code>'maxBytes'</code><font><font>، </font></font><code>'maxMallocBytes'</code><font><font>أو ' </font></font><code>gcNumber</code><font><font>') حددها </font></font><code>FOR_EACH_GC_PARAM</code><font><font>في </font></font><a href="https://searchfox.org/mozilla-central/source/js/src/builtin/TestingFunctions.cpp#464"><font><font>https://searchfox.org/mozilla-central/source/js/src/builtin/TestingFunctions.cpp#464</font></font></a><font><font> .</font></font></p> + +<p><font><font>إذا </font><font>لم يتم تحديد </font></font><em><font><font>القيمة</font></font></em><font><font> ، يتم </font></font><code>gcparam()</code><font><font>إرجاع القيمة الحالية المرتبطة بمعلمة GC المسماة </font></font><em><font><font>بالاسم</font></font></em><font><font> .</font></font></p> + +<p><font><font>إذا </font><font>تم تحديد </font></font><em><font><font>القيمة</font></font></em><font><font> ، يجب أن تكون قابلة للتحويل إلى uint32 موجب ؛ </font></font><code>gcparam()</code><font><font>يحدد </font></font><em><font><font>اسم</font></font></em><font><font> معلمة GC </font><font>إلى </font></font><em><font><font>قيمة</font></font></em><font><font> .</font></font></p> + +<p><font><font>لمزيد من المعلومات ، راجع دالات C / C ++ </font></font><a href="/en-US/docs/Mozilla/Projects/SpiderMonkey/JSAPI_reference/JS_GetGCParameter"><code>JS_GetGCParameter</code></a><font><font>و </font></font><a href="/en-US/docs/Mozilla/Projects/SpiderMonkey/JSAPI_reference/JS_GetGCParameter"><code>JS_SetGCParameter</code></a><font><font>.</font></font></p> + +<h4 id="gczeal.28.29" name="gczeal.28.29"><code>gczeal(level)</code></h4> + +<p><font><font>{{jsapi_minversion_inline ("1.8")}} </font></font><code>DEBUG</code><font><font>فقط. </font><font>اضبط مستوى حماسة GC ، ميزة تصحيح الأخطاء. </font><font>يمكن أن يكون هذا 0 لجمع القمامة الدورية العادية ، أو 1 لـ GC المتكرر للغاية ، أو 2 لـ </font><font>GC المتكرر </font></font><em><font><font>للغاية</font></font></em><font><font> . </font><font>أي شيء بخلاف 0 سيجعل JavaScript يعمل ببطء شديد ولكنه قد يساعد في الكشف عن الأخطاء المتعلقة بـ GC أو إعادة إنتاجها. </font><font>لمزيد من المعلومات ، راجع إصدار C / C ++ من هذه الوظيفة ، </font></font><a class="internal" href="/en-US/docs/Mozilla/Projects/SpiderMonkey/JSAPI_reference/JS_SetGCZeal" title="ar / SpiderMonkey / JSAPI Reference / JS SetGCZeal"><code>JS_SetGCZeal</code></a><font><font>.</font></font></p> + +<h4 id="getpda.28object.29" name="getpda.28object.29"><code>getpda(<em>object</em>)</code></h4> + +<p><font><font>إرجاع واصفات الخصائص </font></font><em><font><font>للكائن</font></font></em><font><font> المحدد </font><font>.</font></font></p> + +<h4 id="getslx.28object.29" name="getslx.28object.29"><code>getslx(<em>object</em>)</code></h4> + +<p>Returns the script line extent, which is the number of lines of code comprising the specified object.</p> + +<h4 id="help.28.5Bcommand_....5D.29" name="help.28.5Bcommand_....5D.29"><code>help(<em>[command ...]</em>)</code></h4> + +<p>Displays brief help information about the specified commands, or about all available functions if none are specified.</p> + +<h4 id="intern.28string.29" name="intern.28string.29"><code>intern(<em>string</em>)</code></h4> + +<p>Internalizes the specified <var>string</var> into the atom table. Every string has a unique identifier, called an atom. This system makes it easier to do comparisons between strings.</p> + +<div class="note"><strong>Note:</strong> This function is intended only for use when testing the JavaScript engine.</div> + +<h4 id="line2pc.28.5Bfunction.2C_.5D_line.29" name="line2pc.28.5Bfunction.2C_.5D_line.29"><code>line2pc(<em>[function, ] line</em>)</code></h4> + +<p>Returns the program counter value corresponding to the specified <em>line</em> of code. If <em>function</em> is specified, <em>line</em> is an offset into the specified function.</p> + +<h4 id="load.28filename1_.5Bfilename.5D.29" name="load.28filename1_.5Bfilename.5D.29"><code>load(<em>filename1</em> <em>[filename]</em>)</code></h4> + +<p>Loads the JavaScript files with the specified names.</p> + +<div class="note"><strong>Note:</strong> For loading non-JavaScript files, use <code>read()</code>.</div> + +<h4 id="options.28.5Boption_....5D.29" name="options.28.5Boption_....5D.29"><code>options(<em>[option ...]</em>)</code></h4> + +<p>Lets you set or get options. If you specified options on the command line, the results of calling <code>options</code> will indicate which options you requested. You can also pass in new options to set.</p> + +<p>The available options are:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Option Name</td> + <td class="header">Description</td> + </tr> + <tr> + <td><code>strict</code></td> + <td>Strict mode is enabled.</td> + </tr> + <tr> + <td><code>werror</code></td> + <td>Warnings should be treated as errors.</td> + </tr> + <tr> + <td><code>atline</code></td> + <td>When <code>atline</code> is enabled, comments of the form <code>//@line <em>num</em></code> set the number of the following line to <code><em>num</em></code>.</td> + </tr> + </tbody> +</table> + +<h4 id="pc2line.28function.2C_.5Bpc.5D.29" name="pc2line.28function.2C_.5Bpc.5D.29"><code>pc2line(<em>function, [pc]</em>)</code></h4> + +<p>Returns the line number of the JavaScript code that corresponds to the first line of the specified <em>function</em>. If you specify a program counter offset into the function, the line number of the line of code containing that offset is returned.</p> + +<h4 id="print.28.5Bexpression_....5D.29" name="print.28.5Bexpression_....5D.29"><code>print(<em>[expression ...]</em>)</code></h4> + +<p>Evaluates the <em>expression(s)</em> and displays the result(s) on <code>stdout</code>, separated by spaces (" ") and terminated by a newline ("\n").</p> + +<h4 id="print.28.5Bexpression_....5D.29" name="print.28.5Bexpression_....5D.29"><code>putstr(<em>expression</em>)</code></h4> + +<p>Evaluates the <em>expression</em> and displays the result on <code>stdout</code>.</p> + +<h4 id="quit.28.29" name="quit.28.29"><code>quit(<em>[status]</em>)</code></h4> + +<p>Exits the shell. <em>status</em> defaults to 0 if omitted.</p> + +<h4 id="read.28filename.5B.2C_type.5D.29" name="read.28filename.5B.2C_type.5D.29"><code>read(<em>filename[, type]</em>)</code></h4> + +<p>Reads and returns the contents of file. If type is "binary" returns an <code>Uint8Array</code>, otherwise returns an UTF-8 decoded string.</p> + +<h4 id="readline.28.29" name="readline.28.29"><code>readline()</code></h4> + +<p>Reads a single line of input from <code>stdin</code>, returning it to the caller. You can use this to create interactive shell programs in JavaScript.</p> + +<h4 id="scatter.28fnArray.29" name="scatter.28fnArray.29">Reflect.parse()</h4> + +<p>See <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey/Parser_API" title="ar / SpiderMonkey / Parser_API">Parser API</a>.</p> + +<div class="note"><strong>Note:</strong> This function is intended only for use when testing the JavaScript engine.</div> + +<h4 id="seal.28object.5B.2C_deep.5D.29" name="seal.28object.5B.2C_deep.5D.29"><code>seal(<em>object[, deep]</em>)</code></h4> + +<p>Seals the specified <em>object</em>, or an object graph if <em>deep</em> is <code>true</code>. By sealing an object or object graph, you disable modification of those objects.</p> + +<h4 id="sleep.28dt.29" name="sleep.28dt.29"><code>sleep(dt)</code></h4> + +<p>{{ jsapi_minversion_inline("1.8") }} Only in <code><a href="/en-US/docs/Mozilla/Projects/SpiderMonkey/JSAPI_reference/JS_THREADSAFE" title="en/SpiderMonkey/JSAPI_Reference/JS_THREADSAFE">JS_THREADSAFE</a></code> builds. Sleep for <em>dt</em> seconds. Fractions of a second are supported. Returns <code>true</code> on success, <code>false</code> if the sleep was interrupted.</p> + +<h4 id="stackQuota" name="stackQuota"><code>stackQuota(<em>[number]</em>)</code> {{obsolete_inline}}</h4> + +<p>Get or set the script stack quota.</p> + +<h4 id="throwError.28.29" name="throwError.28.29"><code>throwError()</code></h4> + +<p>Throws an error from the <code>JS_ReportError()</code> function.</p> + +<div class="note"><strong>Note:</strong> This function is intended only for use when testing the JavaScript engine.</div> + +<h4 id="trap.28.5Bfunction.2C_.5Bpc.2C.5D.5D_expression.29" name="trap.28.5Bfunction.2C_.5Bpc.2C.5D.5D_expression.29"><code>trap(<em>[function, [pc,]] expression</em>)</code></h4> + +<p>Sets a trap at the specific point in the JavaScript code. When the bytecode at the offset specified by <em>pc</em> in the function <em>function</em> is about to be executed, the <em>expression</em> is evaluated.</p> + +<p>This is a powerful debugging mechanism when used in concert with <code>line2pc()</code>. For example, if you want to display a message when line 6 of a function, <code>doSomething()</code> is executed, you can enter the following:</p> + +<pre class="notranslate">trap(doSomething, line2pc(doSomething, 6), "print('line 6!\n')"); +</pre> + +<div class="note"><strong>Note:</strong> When a trap is set, the corresponding bytecode in the program is replaced with a <code>trap</code> bytecode until you use <code>untrap()</code> to remove the trap.</div> + +<h4 id="untrap.28function_.5B.2C_pc.5D.29" name="untrap.28function_.5B.2C_pc.5D.29"><code>untrap(<em>function [, pc]</em>)</code></h4> + +<p>Removes a trap from the specified <em>function</em> at the offset <em>pc</em>. If <em>pc</em> isn't specified, the trap is removed from the function's entry point.</p> + +<p>This function has no effect if there is no trap at the specified location.</p> + +<h4 id="version.28.5Bnumber.5D.29" name="version.28.5Bnumber.5D.29"><code>version(<em>[number]</em>)</code></h4> + +<p>The <code>version()</code> function lets you get or set the JavaScript version number. This may be useful for gaining access to syntax only available in certain versions of JavaScript (for example, see <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.7#Using_JavaScript_1.7" title="ar / New_in_JavaScript_1.7 # Using_JavaScript_1.7">Using JavaScript 1.7</a>).</p> + +<h3 id="Debug_functions" name="Debug_functions">Debug functions</h3> + +<p>These built-in functions are only available in <code>DEBUG</code> builds.</p> + +<h4 id="dis.28.5Bfunction.5D.29" name="dis.28.5Bfunction.5D.29"><code>dis(<em>[function]</em>)</code></h4> + +<p>Disassembles the JavaScript bytecode for the entire program, or for the specified <em>function</em>.</p> + +<p>For example, if you enter the JavaScript function below:</p> + +<pre class="eval notranslate">function test() { + var i = 3; + print(i+2); +} +</pre> + +<p>Then run the command <code>dis(test);</code>, you get this output:</p> + +<pre class="notranslate">main: +00000: uint16 3 +00003: setvar 0 +00006: pop +00007: name "print" +00010: pushobj +00011: getvar 0 +00014: uint16 2 +00017: add +00018: call 1 +00021: pop +00022: stop + +Source notes: + 0: 0 [ 0] newline + 1: 3 [ 3] decl offset 0 + 2: 7 [ 4] newline + 3: 18 [ 11] xdelta + 4: 18 [ 0] pcbase offset 11 +</pre> + +<h4 id="dissrc.28.5Bfunction.5D.29" name="dissrc.28.5Bfunction.5D.29"><code>dissrc(<em>[function]</em>)</code></h4> + +<p>Disassembles the JavaScript bytecode for the entire program, or for the specified <em>function</em>, showing the source lines. This function only works with programs loaded from files, either using the <code>-f</code> flag on launching the shell, or by using the <code>load()</code> function.</p> + +<p>If your program includes a function, <code>doStuff()</code>, like this:</p> + +<pre class="notranslate">function doStuff(input) { + print("Enter a number: "); + var n1 = readline(); + print("Enter another one: "); + var n2 = readline(); + + print("You entered " + n1 + " and " + n2 + "\n"); +} +</pre> + +<p>Calling <code>dissrc(doStuff)</code> function would give this output:</p> + +<pre class="notranslate">;------------------------- 10: print("Enter a number: "); +00000: 10 name "print" +00003: 10 pushobj +00004: 10 string "Enter a number: " +00007: 10 call 1 +00010: 10 pop +;------------------------- 11: var n1 = readline(); +00011: 11 name "readline" +00014: 11 pushobj +00015: 11 call 0 +00018: 11 setvar 0 +00021: 11 pop +;------------------------- 12: print("Enter another one: "); +00022: 12 name "print" +00025: 12 pushobj +00026: 12 string "Enter another one: " +00029: 12 call 1 +00032: 12 pop +;------------------------- 13: var n2 = readline(); +00033: 13 name "readline" +00036: 13 pushobj +00037: 13 call 0 +00040: 13 setvar 1 +00043: 13 pop +;------------------------- 14: +;------------------------- 15: print("You entered " + n1 + " and " + n2 + "\n"); +00044: 15 name "print" +00047: 15 pushobj +00048: 15 string "You entered " +00051: 15 getvar 0 +00054: 15 add +00055: 15 string " and " +00058: 15 add +00059: 15 getvar 1 +00062: 15 add +00063: 15 string "\\n" +00066: 15 add +00067: 15 call 1 +00070: 15 pop +00071: 15 stop +</pre> + +<h4 id="dumpheap.28.28.5BfileName.5B.2C_start.5B.2C_toFind.5B.2C_maxDepth.5B.2C_toIgnore.5D.5D.5D.5D.5D.29" name="dumpheap.28.28.5BfileName.5B.2C_start.5B.2C_toFind.5B.2C_maxDepth.5B.2C_toIgnore.5D.5D.5D.5D.5D.29"><code>dumpheap((<em>[fileName[, start[, toFind[, maxDepth[, toIgnore]]]]]</em>)</code></h4> + +<p>Dump GC information. This is a thin wrapper for <code><a href="/en-US/docs/Mozilla/Projects/SpiderMonkey/JSAPI_reference/JS_DumpHeap" title="en/SpiderMonkey/JSAPI_Reference/JS_DumpHeap">JS_DumpHeap</a></code>.</p> + +<h4 id="gczeal.28zeal.29" name="gczeal.28zeal.29"><code>gczeal(<em>zeal</em>)</code></h4> + +<p><font><font>قم بتمكين GC المتكرر للمساعدة في العثور على مخاطر GC. </font></font><em><font><font>الحماسة</font></font></em><font><font> عدد صحيح. </font><font>المعنى هو نفسه بالنسبة للمعلمة </font></font><sup><code><a href="/en-US/docs/Mozilla/Projects/SpiderMonkey/JSAPI_reference/JS_SetGCZeal" title="en/SpiderMonkey/JSAPI_Reference/JS_SetGCZeal">JS_SetGCZeal</a></code></sup><font><font>.</font></font></p> + +<h4 id="notes.28.5Bfunction.5D.29" name="notes.28.5Bfunction.5D.29"><code>notes(<em>[function]</em>)</code></h4> + +<p><font><font>يظهر ملاحظات المصدر للوظيفة المحددة. </font><font>تحتوي ملاحظات المصدر على معلومات تقوم بتعيين الرمز الثانوي إلى الكود المصدري ، والذي يتم استخدامه عند فك الشفرة ، مثل عند استخدام </font></font><code>dissrc()</code><font><font>الوظيفة.</font></font></p> diff --git a/files/ar/mozilla/tech/index.html b/files/ar/mozilla/tech/index.html new file mode 100644 index 0000000000..f9682e62e1 --- /dev/null +++ b/files/ar/mozilla/tech/index.html @@ -0,0 +1,14 @@ +--- +title: Mozilla technologies +slug: Mozilla/Tech +tags: + - Landing + - Mozilla + - NeedsTranslation + - Reference + - TopicStub + - XUL +translation_of: Mozilla/Tech +--- +<p>Mozilla has several technologies used as components of its projects. These are documented here. (flesh out this text).</p> +<p>{{LandingPageListSubpages}}</p> diff --git a/files/ar/mozilla_mathml_project/index.html b/files/ar/mozilla_mathml_project/index.html new file mode 100644 index 0000000000..2b45c419b6 --- /dev/null +++ b/files/ar/mozilla_mathml_project/index.html @@ -0,0 +1,76 @@ +--- +title: Mozilla MathML Project +slug: Mozilla_MathML_Project +tags: + - MathML + - MathML Project + - NeedsTranslation + - TopicStub +translation_of: Mozilla/MathML_Project +--- +<h2 id="Updates">Updates</h2> +<p><img alt="mathboard.png" class="internal default" src="/@api/deki/files/4238/=mathboard.png" style="float: right;"></p> +<ul> + <li><a href="/en/Mozilla_MathML_Project/Status" title="en/Mozilla MathML Project/Status">Status of each tag</a></li> + <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite" title="en/Mozilla MathML Project/MathML3Testsuite">Result of the MathML 3 Testsuite</a></li> + <li><a class="external" href="http://www.wg9s.com/mozilla/firefox/">Unofficial nightly builds with MathML patches applied</a> (maintained by Bill Gianopoulos)</li> + <li><a href="/en-US/docs/Mozilla_MathML_Project/Student_Projects" title="/en-US/docs/Mozilla_MathML_Project/Student_Projects">Student Projects</a></li> + <li><a href="/en/Mozilla_MathML_Project/Updates" title="en/Mozilla_MathML_Project/Updates">All Updates...</a> + <p><span style="display: none;"> </span></p> + </li> +</ul> +<h3 id="November_16_2012">November 16, 2012</h3> +<p><a href="http://www.glazman.org/weblog/dotclear/index.php?post/2012/11/16/MathML-and-Thunderbird">MathML and Thunderbird</a></p> +<h3 id="November_14_2012">November 14, 2012</h3> +<p><a href="http://www.maths-informatique-jeux.com/blog/frederic/?post/2012/11/14/Writing-mathematics-in-emails">Writing mathematics in emails </a></p> +<h3 id="October_12_2012">October 12, 2012</h3> +<p>MathML has been enabled in Chrome Canary!</p> +<h3 id="September_25_2012">September 25, 2012</h3> +<p>Story of a MathML summer project by Quentin Headen: <a href="http://phaseshiftsoftware.com/post/538" title="http://phaseshiftsoftware.com/post/538">Summer of Mozilla</a>.</p> +<h3 id="September_1_2012">September 1, 2012</h3> +<p><a href="http://www.maths-informatique-jeux.com/blog/frederic/?post/2012/09/01/Mozilla-MathML-Project%3A-Roadmap" title="http://www.maths-informatique-jeux.com/blog/frederic/?post/2012/09/01/Mozilla-MathML-Project%3A-Roadmap">Mozilla MathML Project: Roadmap</a></p> +<p>Thank you to all the contributors who have worked on the MathML project this summer!</p> +<h3 id="May_3_2012">May 3, 2012</h3> +<p>New MathJax option available in Wikipedia. If you have a Wikipedia account, <a class="external" href="http://groups.google.com/group/mozilla.dev.tech.mathml/browse_frm/thread/0ec9c3ccaee4964c#">mathematical formulas can now be rendered with MathML</a>!</p> +<h2 id="Community">Community</h2> +<ul> + <li>View Mozilla forums... {{ DiscussionList("dev-tech-mathml", "mozilla.dev.tech.mathml") }}</li> + <li><a class="link-irc" href="irc://irc.mozilla.org/%23mathml" rel="external" title="irc://irc.mozilla.org/%23mathml">IRC channel</a></li> + <li><a class="link-https" href="https://wiki.mozilla.org/MathML:Home_Page">Wiki used by contributors</a> - check out the latest developments and help us improving MathML in Mozilla.</li> +</ul> +<h2 id="Links">Links</h2> +<ul> + <li>Installing <a href="/en/Mozilla_MathML_Project/Fonts" title="en/Mozilla MathML Project/Fonts">fonts for Mozilla's MathML engine</a></li> + <li><a class="external" href="http://www.w3.org/TR/MathML3/">MathML Version 3.0</a> - W3C Recommendation, 21 October 2010</li> + <li><a class="external" href="http://www.w3.org/Math/testsuite/"><abbr>W3C</abbr> <abbr>MathML</abbr> Test Suite</a> - Designed to check the implementation of each element one attribute (or built-in rendering behavior) at a time in a fairly thorough manner.</li> + <li><a href="/en/MathML" title="MathML">MathML in Mozilla Developer Network</a></li> +</ul> +<h3 id="Sample_MathML_Documents">Sample <abbr>MathML</abbr> Documents</h3> +<ul> + <li><a href="/en/Mozilla_MathML_Project/Screenshots" title="en/Mozilla MathML Project/Screenshots">Screenshots</a></li> + <li><a class="external" href="http://www.mozilla.org/projects/mathml/start.html"><abbr>MathML</abbr> Start Page</a> - with translations in different languages (<a class="external" href="http://www.mozilla.org/projects/mathml/start-ar.html">Arabic</a>, <a class="external" href="http://www.mozilla.org/projects/mathml/start-zh.html">Chinese</a>, <a class="external" href="http://www.mozilla.org/projects/mathml/start-hebrew.html">Hebrew</a>, <a class="external" href="http://www.mozilla.org/projects/mathml/start-thai.html">Thai</a>)</li> + <li><a class="external" href="http://www.mozilla.org/projects/mathml/demo/basics.html">MathML Basics</a> - Document tailored to display correctly with just the Symbol font that is pre-installed by default on most OS configurations.</li> + <li><a class="external" href="http://www.mozilla.org/projects/mathml/demo/texvsmml.html"><abbr>MathML</abbr> Torture Test</a> - Comparative testing of MathML rendering against TeX.</li> + <li>Demo of some MathML tags: <a class="external" href="http://www.mozilla.org/projects/mathml/demo/mfrac.html">mfrac</a>, <a class="external" href="http://www.mozilla.org/projects/mathml/demo/mo.html">mo</a>, <a class="external" href="http://www.mozilla.org/projects/mathml/demo/mtable.html">mtable</a>, <a class="external" href="http://www.mozilla.org/projects/mathml/demo/mspace.html">mspace</a>, <a class="external" href="http://www.mozilla.org/projects/mathml/demo/mmultiscripts.html">mmultiscripts</a>, <a class="external" href="http://www.mozilla.org/projects/mathml/demo/roots.html">msqrt-mroot</a>.</li> + <li><a class="external" href="http://www.mozilla.org/projects/mathml/demo/extras.html">MathML Extras</a> - Technology demonstration of some interesting upshots from building natively upon the browser environment.</li> + <li><a class="external" href="http://golem.ph.utexas.edu/~distler/blog/archives/000104.html">Blog</a> with comments that include MathML.</li> +</ul> +<h3 id="Create_MathML_Documents">Create <abbr>MathML</abbr> Documents</h3> +<ul> + <li><a href="/en/Mozilla_MathML_Project/Authoring" title="en/Mozilla MathML Project/Authoring">Authoring MathML</a></li> + <li><a class="external" href="http://www.w3.org/Math/Software/mathml_software_cat_editors.html">Editors</a></li> + <li><a class="external" href="http://www.w3.org/Math/Software/mathml_software_cat_converters.html">Converters</a></li> + <li><a class="external" href="http://www.w3.org/Math/Software/mathml_software_cat_stylesheets.html">Stylesheets</a></li> +</ul> +<div class="originaldocinfo"> + <h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2> + <ul> + <li>Author(s): Roger B. Sidje</li> + <li>Other Contributors: Frédéric Wang</li> + <li>Last Updated Date: April 4, 2010</li> + <li>Copyright Information: Portions of this content are © 1999–2010 by individual mozilla.org contributors; content available under a Creative Commons license | <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Details</a>.</li> + </ul> +</div> +<p> </p> +<div id="cke_pastebin" style="position: absolute; top: 196.667px; width: 1px; height: 1px; overflow: hidden; left: -1000px;"> + </div> diff --git a/files/ar/mozilla_mathml_project/start/index.html b/files/ar/mozilla_mathml_project/start/index.html new file mode 100644 index 0000000000..a05d52cd44 --- /dev/null +++ b/files/ar/mozilla_mathml_project/start/index.html @@ -0,0 +1,76 @@ +--- +title: MathML اثناء العمل +slug: Mozilla_MathML_Project/Start +translation_of: Mozilla/MathML_Project/Start +--- +<h2 id="MathML_اثناء_العمل" style="text-align: center;">MathML اثناء العمل</h2> +<p>هل ترى المعادلات الأنيقة خلال هذه الصفحة؟ لا؟ سيء للغاية. هنالك <a href="https://developer.mozilla.org/@api/deki/files/5690/=start.png">لقطة شاشة</a> بالشيء الذي تفتقده. <a href="./">قم بتنزيل </a> نسخة من موزيلا مفّعل فيها MathML لكي تقوم بإصلاح هذا الوضع السيء.</p> +<p>لديك نسخة موزيلا مفّعل فيها MathML ولكن ما تراه على شاشة ليس ما حصلت عليه؟ في هذه الحالة فربما تفتقد لأحد <a href="fonts/">خطوط MathML</a>.</p> +<p>والأن بما أنك أصبحت جاهزا، يمكنك رؤية المعادلة التالية بمختلف علامتها : <math dir="rtl"> <mrow> <mover> <mi>س</mi> <mo>^</mo> </mover> <mo>+</mo> <mover> <mrow><mi>س</mi><mo></mo><mi>ص</mi></mrow> <mo>^</mo> </mover> <mo>+</mo> <mover> <mrow><mi>س</mi><mo></mo><mi>ص</mi><mo></mo><mi>ع</mi></mrow> <mo>^</mo> </mover> <mo>.</mo> </mrow> </math> وبجانبها هذه المعادلة الصغيرة، <math> <mrow> <mo>محدد</mo> <mo lspace="0" rspace="0" symmetric="false">|</mo> <mfrac linethickness="0"> <mi>ا</mi> <mi>ج</mi> </mfrac> <mfrac linethickness="0"> <mi>ب</mi> <mi>د</mi> </mfrac> <mo lspace="0" rspace="0" symmetric="false">|</mo> <mo>=</mo> <mi>ا</mi> <mi>د</mi> <mo>-</mo> <mi>ب</mi> <mi>ج</mi> <mo>،</mo> </mrow> </math> ويمكن كتابتها ايضا بهذا النمط <math dir="rtl" display="block"> <mrow> <mo>محدد</mo> <mo>|</mo> <mtable> <mtr> <mtd> <mi>ا</mi> </mtd> <mtd> <mi>ب</mi> </mtd> </mtr> <mtr> <mtd> <mi>ج</mi> </mtd> <mtd> <mi>د</mi> </mtd> </mtr> </mtable> <mo>|</mo> <mo>=</mo> <mi>ا</mi> <mi>د</mi> <mo>-</mo> <mi>ب</mi> <mi>ج</mi> <mo>.</mo> </mrow> </math></p> +<p>المعادلات الرياضية لا تكتب بسهولة. <a href="./">موزيلا MathML</a> يهدف إلى الالتزام <a href="http://www.w3.org/Math/">بمواصفات MathML</a> بذلك <i>أن ما تراه هو ما تحصل عليه</i>، أو بعبارة أخرى <i>ما تراه هو ما قمت به</i>، أو باختصار "WYSIWYM". الفرق بين هاتين المعادلتين هي طريقة الترقيم! <math dir="rtl" display="block"> <msup> <mrow> <mo minsize="3" symmetric="false">(</mo> <mo>...</mo> <msup> <mrow> <mo minsize="2" symmetric="false">(</mo> <msup> <mrow> <mo symmetric="false">(</mo> <msub> <mi>ا</mi> <mn>٠</mn> </msub> <mo>+</mo> <msub> <mi>ا</mi> <mn>١</mn> </msub> <mo symmetric="false">)</mo> </mrow> <msub> <mi>ن</mi> <mn>١</mn> </msub> </msup> <mo>+</mo> <msub> <mi>ا</mi> <mn>٢</mn> </msub> <mo minsize="2" symmetric="false">)</mo> </mrow> <msub> <mi>ن</mi> <mn>٢</mn> </msub> </msup> <mo>+</mo> <mo>...</mo> <mo>+</mo> <msub> <mi>ا</mi> <mi>هـ</mi> </msub> <mo minsize="3" symmetric="false">)</mo> </mrow> <msub> <mi>ن</mi> <mi>هـ</mi> </msub> </msup> </math> <math dir="rtl" display="block"> <msup> <mrow> <mo>(</mo> <mo>...</mo> <msup> <mrow> <mo>(</mo> <msup> <mrow> <mo>(</mo> <msub> <mi>ا</mi> <mn>٠</mn> </msub> <mo>+</mo> <msub> <mi>ا</mi> <mn>١</mn> </msub> <mo>)</mo> </mrow> <msub> <mi>ن</mi> <mn>١</mn> </msub> </msup> <mo>+</mo> <msub> <mi>ا</mi> <mn>٢</mn> </msub> <mo>)</mo> </mrow> <msub> <mi>ن</mi> <mn>٢</mn> </msub> </msup> <mo>+</mo> <mo>...</mo> <mo>+</mo> <msub> <mi>ا</mi> <mi>هـ</mi> </msub> <mo>)</mo> </mrow> <msub> <mi>ا</mi> <mi>هـ</mi> </msub> </msup> </math></p> +<p>طريقة كتابة جذور هذه المعادلة <math dir="rtl"> <mstyle mathvariant="bold"> <msup> <mi>ص</mi> <mn>٣</mn> </msup> <mo>+</mo> <mi>هـ</mi> <mi>ص</mi> <mo>+</mo> <mi>م</mi> <mo>=</mo> <mn>٠</mn> </mstyle> </math> ليست سهلة كما المعادلة نفسها <math dir="rtl" display="block"> <mstyle mathvariant="bold"> <mi>ص</mi> <mo>=</mo> <mroot> <mrow> <mo>-</mo> <mfrac> <mi>م</mi> <mn>٢</mn> </mfrac> <mo>+</mo> <mroot> <mrow> <mfrac> <msup> <mi>م</mi> <mn>٢</mn> </msup> <mn>٤</mn> </mfrac> <mo>+</mo> <mfrac> <msup> <mi>هـ</mi> <mn>٣</mn> </msup> <mn>٢٧</mn> </mfrac> </mrow> <mn>٢</mn> </mroot> </mrow> <mn>٣</mn> </mroot> <mo>+</mo> <mroot> <mrow> <mo>-</mo> <mfrac> <mi>م</mi> <mn>٢</mn> </mfrac> <mo>-</mo> <mroot> <mrow> <mfrac> <msup> <mi>م</mi> <mn>٢</mn> </msup> <mn>٤</mn> </mfrac> <mo>+</mo> <mfrac> <msup> <mi>هـ</mi> <mn>٣</mn> </msup> <mn>٢٧</mn> </mfrac> </mrow> <mn>٢</mn> </mroot> </mrow> <mn>٣</mn> </mroot> <mo>.</mo> </mstyle> </math></p> +<p>أما بالنسبة لجذور المعادلة <math dir="rtl"> <mrow> <mi>ا</mi> <msup> <mi>س</mi> <mn>٢</mn> </msup> <mo>+</mo> <mi>ب</mi> <mi>س</mi> <mo>+</mo> <mi>ج</mi> <mo>=</mo> <mn>٠</mn> <mo>،</mo> </mrow> </math> انقر فوق المنطقة الصفراء لعمل تكبير أو تصغير:</p> +<div style="display: none;"> + <h2 id="Zoomable_Math" name="Zoomable_Math">Zoomable Math</h2> + <h3 id="HTML_Content">HTML Content</h3> + <pre class="brush: html"> <p> +<math display="block" dir="rtl"> +<mstyle id="zoomableMath" mathbackground="yellow"> +<mrow> +<mi>س</mi> +<mo>=</mo> +<mfrac> +<mrow> +<mrow> +<mo>-</mo> +<mi>ب</mi> +</mrow> +<mo>&#xB1;</mo> +<msqrt> +<mrow> +<msup> +<mi>ب</mi> +<mn>٢</mn> +</msup> +<mo>-</mo> +<mrow> +<mn>٤</mn> +<mi>ا</mi> +<mi>ج</mi> +</mrow> +</mrow> +</msqrt> +</mrow> +<mrow> +<mn>٢</mn> +<mi>ا</mi> +</mrow> +</mfrac> +</mrow> +</mstyle> +</math></p> + +</pre> + <h3 id="JavaScript_Content">JavaScript Content</h3> + <pre class="brush: js"> function zoomToggle() + { + if (this.hasAttribute("mathsize")) { + this.removeAttribute("mathsize"); + } else { + this.setAttribute("mathsize", "200%"); + } + } + + function load() + { + document.getElementById("zoomableMath"). + addEventListener("click", zoomToggle, false); + } + + window.addEventListener("load", load, false);</pre> +</div> +<p style="text-align: center;">{{ EmbedLiveSample('Zoomable_Math') }}</p> +<p>انظر إلى طريقة كتابة هذه المعادلة <math dir="rtl" display="block"> <mrow> <mo>{</mo> <mtable> <mtr> <mtd> <mrow> <msub> <mi>ق</mi> <mi>ل</mi> </msub> <mo>+</mo> <msub> <mrow> <mi>د</mi> <mo>(</mo> <mi>ق</mi> <mo>)</mo> </mrow> <mi>س</mi> </msub> <mo>=</mo> <mn>٠</mn> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mi>ق</mi> <mo stretchy="false">(</mo> <mn>٠</mn> <mo>،</mo> <mi>س</mi> <mo stretchy="false">)</mo> <mo>=</mo> <mrow> <mo>{</mo> <mtable> <mtr> <mtd> <mrow> <msup> <mi>ق</mi> <mo>-</mo> </msup> </mrow> </mtd> <mtd> <mrow> <mtext>اذا كان </mtext> <mi>س</mi> <mo><</mo> <mn>٠</mn> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <msup> <mi>ق</mi> <mo>+</mo> </msup> </mrow> </mtd> <mtd> <mrow> <mtext>اذا كان </mtext> <mi>س</mi> <mo>></mo> <mn>٠</mn> </mrow> </mtd> </mtr> </mtable> </mrow> </mrow> </mtd> </mtr> </mtable> </mrow> </math> أو بطريقة أكثر تعقيدا كهؤلاء <math dir="rtl" display="block"> <mrow> <msub> <mover> <mi>Ell</mi> <mo>^</mo> </mover> <mi>ص</mi> </msub> <mo stretchy="false">(</mo> <mi>ع</mi> <mo>;</mo> <mi>ع</mi> <mo>,</mo> <mi>τ</mi> <mo stretchy="false">)</mo> <mo>:=</mo> <msub> <mo>∫</mo> <mi>ص</mi> </msub> <mo>(</mo> <munder> <mo>∏</mo> <mi>l</mi> </munder> <mfrac> <mrow> <mrow> <mo>(</mo> <mfrac> <msub> <mi>ص</mi> <mi>l</mi> </msub> <mrow> <mn>٢</mn> <mi>π</mi> <mi mathvariant="normal">ن</mi> </mrow> </mfrac> <mo>)</mo> </mrow> <mrow> <mi>θ</mi> <mo>(</mo> <mfrac> <msub> <mi>ص</mi> <mi>l</mi> </msub> <mrow> <mn>٢</mn> <mi>π</mi> <mi mathvariant="normal">ن</mi> </mrow> </mfrac> <mo>-</mo> <mi>ع</mi> <mo>)</mo> </mrow> <msup> <mi>θ</mi> <mo>′</mo> </msup> <mo stretchy="false">(</mo> <mn>٠</mn> <mo stretchy="false">)</mo> </mrow> <mrow> <mi>θ</mi> <mo stretchy="false">(</mo> <mo>-</mo> <mi>ع</mi> <mo stretchy="false">)</mo> <mrow> <mi>θ</mi> <mo>(</mo> <mfrac> <msub> <mi>ص</mi> <mi>l</mi> </msub> <mrow> <mn>٢</mn> <mi>π</mi> <mi mathvariant="normal">ن</mi> </mrow> </mfrac> <mo>)</mo> </mrow> </mrow> </mfrac> <mo>)</mo> <mo>×</mo> <mo>(</mo> <munder> <mo>∏</mo> <mi>ك</mi> </munder> <mfrac> <mrow> <mrow> <mi>θ</mi> <mo>(</mo> <mfrac> <msub> <mi>ي</mi> <mi>ك</mi> </msub> <mrow> <mn>٢</mn> <mi>π</mi> <mi mathvariant="normal">ن</mi> </mrow> </mfrac> <mo>-</mo> <mo stretchy="false">(</mo> <msub> <mi>α</mi> <mi>k</mi> </msub> <mo>+</mo> <mn>١</mn> <mo stretchy="false">)</mo> <mi>ع</mi> <mo>)</mo> </mrow> <mi>θ</mi> <mo stretchy="false">(</mo> <mo>-</mo> <mi>ع</mi> <mo stretchy="false">)</mo> </mrow> <mrow> <mrow> <mi>θ</mi> <mo>(</mo> <mfrac> <msub> <mi>ي</mi> <mi>ك</mi> </msub> <mrow> <mn>٢</mn> <mi>π</mi> <mi mathvariant="normal">i</mi> </mrow> </mfrac> <mo>-</mo> <mi>ع</mi> <mo>)</mo> </mrow> <mi>θ</mi> <mo stretchy="false">(</mo> <mo>-</mo> <mo stretchy="false">(</mo> <msub> <mi>α</mi> <mi>ك</mi> </msub> <mo>+</mo> <mn>١</mn> <mo stretchy="false">)</mo> <mi>ع</mi> <mo stretchy="false">)</mo> </mrow> </mfrac> <mo>)</mo> </mrow> </math> <math dir="rtl" display="block"> <mrow> <mi>π</mi> <mo stretchy="false">(</mo> <mi>ن</mi> <mo stretchy="false">)</mo> <mo>=</mo> <munderover> <mo>∑</mo> <mrow> <mi>م</mi> <mo>=</mo> <mn>٢</mn> </mrow> <mi>ن</mi> </munderover> <mrow> <mo>⌊</mo> <msup> <mrow> <mo>(</mo> <mrow> <munderover> <mo>∑</mo> <mrow> <mi>ك</mi> <mo>=</mo> <mn>١</mn> </mrow> <mrow> <mi>م</mi> <mo>-</mo> <mn>١</mn> </mrow> </munderover> <mrow> <mo minsize="1.5">⌊</mo> <mo>(</mo> <mi>م</mi> <mo>∕</mo> <mi>ك</mi> <mo>)</mo> <mo minsize="2">∕</mo> <mo>⌈</mo> <mi>م</mi> <mo>∕</mo> <mi>ك</mi> <mo>⌉</mo> <mo minsize="1.5">⌋</mo> </mrow> </mrow> <mo>)</mo> </mrow> <mrow> <mo>-</mo> <mn>١</mn> </mrow> </msup> <mo>⌋</mo> </mrow> </mrow> </math> <math dir="rtl" display="block"> <mrow> <msub> <mrow> <mo>‖</mo> <mi>ϕ</mi> <mo>‖</mo> </mrow> <mrow> <msubsup> <mi>و</mi> <mi>ل</mi> <mi>ك</mi> </msubsup> <mo stretchy="false">(</mo> <msub> <mi>Ω</mi> <mi>ت</mi> </msub> <mo stretchy="false">)</mo> </mrow> </msub> <mo>≝</mo> <msup> <mrow> <mo>(</mo> <munder> <mo>∑</mo> <mrow> <mo>|</mo> <mi>α</mi> <mo>|</mo> <mo>≦</mo> <mi>ك</mi> </mrow> </munder> <msubsup> <mfenced close="‖" open="‖"> <mfrac> <mrow> <msup> <mo>∂</mo> <mi>α</mi> </msup> <mi>ϕ</mi> </mrow> <mrow> <mo>∂</mo> <msup> <mi>ξ</mi> <mi>α</mi> </msup> </mrow> </mfrac> </mfenced> <mrow> <msup> <mi>ح</mi> <mi>ل</mi> </msup> <mo stretchy="false">(</mo> <msub> <mi>Ω</mi> <mi>ت</mi> </msub> <mo stretchy="false">)</mo> </mrow> <mi>ل</mi> </msubsup> <mo>)</mo> </mrow> <mrow> <mn>١</mn> <mo>∕</mo> <mi>ل</mi> </mrow> </msup> </mrow> </math></p> +<p>لمزيد من الأمثلة، قم بمراجعة صفحة <a href="./">مشروع MathML</a>، وأما إذا رغبت <a href="build.html">ببناء</a> Mozilla Binary الخاص بك، راجع المجلد <i>mozilla/layout/mathml/tests</i>.</p> +<p>ماذا بعد؟ خلال قيامك بتجربة موزيلا MathML، ووجدت بعض الاشياء القليلة اللي لا تظهر حسب مواصفات MathML أو الاشياء التى تحتاج إلى تعديلات طفيفة لكي تبدو بشكل أفضل؟ في كلتا الحالتين السابقتين أو عندما تظهر لك مشكلة ما، إذهب إلى <a href="../../quality/bug-writing-guidelines.html">Bugzilla</a> للإبلاغ عن هذه المشاكل فـ Bugzilla يتحفظ بها جميعا. واذا لم يتم الإبلاغ عن المشاكل التي واجهتك فكيف لنا ان نقوم بإصلاحها!</p> +<p><a href="../../get-involved.html">مساهمتك معنا </a> هي جزء من عملية إثراء <a href="../../newlayout/">Gecko</a> بمواصفات متطورة وقياسية لـ MathML. رأيك يمكنه المساعدة في <a href="authoring.html">وضع محتوى MathML على الوب،</a>، والتبليغ عن أخطاء في <a href="../../quality/bug-writing-guidelines.html">Bugzilla</a>, وإذا امكنك كذلك المساعدة في البرمجة، <a href="http://lxr.mozilla.org/seamonkey/source/layout/mathml/">أو فحص أو تحسين الشفرة الحالية </a>أو إختيار أحد البنود من <a href="update.html">قائمة المهام</a> .</p> diff --git a/files/ar/new_compatibility_tables_beta/index.html b/files/ar/new_compatibility_tables_beta/index.html new file mode 100644 index 0000000000..d1fdc7b5b5 --- /dev/null +++ b/files/ar/new_compatibility_tables_beta/index.html @@ -0,0 +1,24 @@ +--- +title: New Compatibility Tables Beta +slug: New_Compatibility_Tables_Beta +translation_of: Archive/MDN/New_Compatibility_Tables_Beta +--- +<p><font><font>ربما تكون هنا لأنك اتبعت رابط الإشعار التجريبي من أحد جداول التوافق الجديدة. </font><font>(لا؟ تريد أن ترى الجداول الجديدة؟ </font></font><a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Be_a_beta_tester"><font><font>جعل نفسك اختبار بيتا.</font></font></a><font><font> )</font></font></p> + +<p><font><font>شكرا لمساعدتنا على اختبار هذه. </font><font>انهم جزء من مشروع أكبر من ذلك بكثير. </font><font>نحن ننقل جميع </font></font><a href="https://github.com/mdn/browser-compat-data"><font><font>بيانات توافق المتصفح إلى JSON منظم</font></font></a><font><font> .</font></font></p> + +<p><font><font>ستظهر الجداول الجديدة على الصفحات حيث يتم تحويل البيانات إلى التنسيق الجديد.</font></font></p> + +<h2 id="التحرير"><font><font>التحرير</font></font></h2> + +<p><font><font>تم نقل بيانات التوافق إلى ملفات JSON في </font></font><a href="https://github.com/mdn/browser-compat-data"><font><font>مستودع GitHub المتوافق مع المستعرض</font></font></a><font><font> .</font></font></p> + +<p><font><font>للمساهمة ببيانات متوافقة ، يمكنك الآن إرسال طلب سحب أو تقديم مشكلة في المستودع.</font></font></p> + +<h2 id="كيف_أساعد"><font><font>كيف أساعد</font></font></h2> + +<p><font><font>إذا وجدت مشكلة في البيانات ، فيرجى </font></font><a href="https://github.com/mdn/browser-compat-data"><font><font>تقديم مشكلة في مستودع GitHub</font></font></a><font><font> .</font></font></p> + +<p><font><font>إذا كان هناك خطأ ما في مظهر الطاولة أو وظيفتها ، فيرجى النقر على الزر </font></font><strong><font><font>"الإبلاغ عن خطأ"</font></font></strong><font><font> في القائمة المنسدلة أعلى الجدول.</font></font></p> + +<p><font><font>إذا كانت لديك لحظة ، فسنقدر ذلك إذا كان بإمكانك </font></font><a class="external external-icon" href="http://www.surveygizmo.com/s3/2342437/0b5ff6b6b8f6"><font><font>إجراء استطلاع الرأي</font></font></a><font><font> .</font></font></p> diff --git a/files/ar/sandbox/index.html b/files/ar/sandbox/index.html new file mode 100644 index 0000000000..e422da79d7 --- /dev/null +++ b/files/ar/sandbox/index.html @@ -0,0 +1,75 @@ +--- +title: Sandbox +slug: Sandbox +translation_of: Sandbox +--- +<p class="summary" id="bob">{{EmbedLiveSample('Sample')}}</p> + +<p class="summary">كيف تحرير ساند بوكس للنشر</p> + +<p>There should be a video editing add-on.</p> + +<h2 id="vvv" name="vvv">Another in this article section (<em>maybe</em>)</h2> + +<h3 id="adam" name="adam">Nesting?</h3> + +<p>Hmmm, maybe this works? I don't <a href="http://google.com/">know</a>.</p> + +<h4 id="H4_heading">H4 heading</h4> + +<h5 id="h5_indicates_that_you've_dug_too_deep!">h5 indicates that you've dug too deep!</h5> + +<h2 id="Code_Sample">Code Sample</h2> + +<pre class="brush: cpp">#include <iostream> + +int main() + +{ + +print("This is my first work with you!"); + +return 3; + +}</pre> + +<h2 id="My_Alert">My Alert</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p id='test_code'> + Test Sample Code +</p></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">#test_code { + background-color: purple; +}</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">console.log("Hi there !!");</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample('My_Alert')}}</p> + +<h2 id="Hello_World">Hello World</h2> + +<h3 id="HTML_2">HTML</h3> + +<pre class="brush: html"><input type="date"> +</pre> + +<h3 id="Result_2">Result</h3> + +<p>{{EmbedLiveSample('Hello_World')}}</p> + +<h2 id="sand" name="sand">Conclusion</h2> + +<p>This document aims to sound sciencey.</p> + +<h2 id="webgl" name="webgl">WebGL Fundamentals</h2> + +<p>The shaderSource method of the WebglRenderingContext is super cool!</p> diff --git a/files/ar/tools/browser_console/index.html b/files/ar/tools/browser_console/index.html new file mode 100644 index 0000000000..81a9a8d321 --- /dev/null +++ b/files/ar/tools/browser_console/index.html @@ -0,0 +1,181 @@ +--- +title: Browser Console +slug: Tools/Browser_Console +translation_of: Tools/Browser_Console +--- +<p>{{ToolsSidebar}}</p> + +<p>The Browser Console is like the <a href="/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Web Console</a>, but applied to the whole browser rather than a single content tab.</p> + +<p>So it logs the same sorts of information as the Web Console - network requests, JavaScript, CSS, and security errors and warnings, and messages explicitly logged by JavaScript code. However, rather than logging this information for a single content tab, it logs information for all content tabs, for add-ons, and for the browser's own code.</p> + +<p>If you also want to use the other web developer tools in the regular Web <a href="/en-US/docs/Tools/Tools_Toolbox">Toolbox</a> with add-on or browser code, consider using the <a href="/en-US/docs/Tools/Browser_Toolbox">Browser Toolbox</a>.</p> + +<p>Similarly, you can execute JavaScript expressions using the Browser Console. But while the Web Console executes code in the page window scope, the Browser Console executes them in the scope of the browser's chrome window. This means you can interact with all the browser's tabs using the <a href="/en-US/docs/Code_snippets/Tabbed_browser" title="/en-US/docs/Code_snippets/Tabbed_browser"><code>gBrowser</code></a> global, and even with the XUL used to specify the browser's user interface.</p> + +<div class="blockIndicator geckoVersionNote"> +<p>NB: The Browser Console command line (to execute JavaScript expressions) is disabled by default. To enable it set the <code>devtools.chrome.enabled</code> preference to <code>true</code> in about:config, or set the "Enable browser {{Glossary("chrome")}} and add-on debugging toolboxes" (Firefox 40 and later) option in the <a href="/en-US/docs/Tools/Settings">developer tool settings</a>.</p> +</div> + +<h2 id="Opening_the_Browser_Console">Opening the Browser Console</h2> + +<p>You can open the Browser Console in one of two ways:</p> + +<ol> + <li>from the menu: select "Browser Console" from the Web Developer submenu in the Firefox Menu (or Tools menu if you display the menu bar or are on macOS).</li> + <li>from the keyboard: press Ctrl+Shift+J (or Cmd+Shift+J on a Mac).</li> +</ol> + +<p>You can also start the Browser Console by launching Firefox from the command line and passing the <code>-jsconsole</code> argument:</p> + +<pre>/Applications/FirefoxAurora.app/Contents/MacOS/firefox-bin -jsconsole</pre> + +<p>The Browser Console looks like this:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16787/browser_console_68.png" style="display: block; height: 339px; margin-left: auto; margin-right: auto; width: 800px;"></p> + +<p>You can see that the Browser Console looks and behaves very much like the <a href="/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Web Console</a>:</p> + +<ul> + <li>most of the window is occupied by a <a href="/en-US/docs/Tools/Web_Console#Message_Display_Pane" title="/en-US/docs/Tools/Web_Console#Message_Display_Pane">pane that display messages</a>.</li> + <li>at the top, a <a href="/en-US/docs/Tools/Web_Console#Filtering_and_searching" title="/en-US/docs/docs/Tools/Web_Console#Filtering_and_searching">toolbar</a> enables you to filter the messages that appear.</li> + <li>at the bottom, a <a href="/en-US/docs/Tools/Web_Console#The_command_line_interpreter" title="/en-US/docs/docs/Tools/Web_Console#The_command_line_interpreter">command line interpreter</a> enables you to evaluate JavaScript expressions.</li> +</ul> + +<p>Beginning with Firefox 68, the Browser Console allows you to show or hide messages from the content process (i.e. the messages from scripts in all the opened pages) by setting or clearing the checkbox labeled <strong>Show Content Messages</strong>. The following image shows the browser console focused on the same page as above after clicking on the <strong>Show Content Messages</strong> checkbox.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16788/browser_console_68_02.png" style="display: block; height: 339px; margin: 0 auto; width: 800px;"></p> + +<h2 id="Browser_Console_logging">Browser Console logging</h2> + +<p>The Browser console logs the same sorts of messages as the Web Console:</p> + +<ul> + <li><a href="/en-US/docs/Tools/Web_Console#HTTP_requests" title="/en-US/docs/Tools/Web_Console#HTTP_requests">HTTP requests</a></li> + <li><a href="/en-US/docs/Tools/Web_Console#Warnings_and_errors" title="/en-US/docs/Tools/Web_Console#Warnings_and_errors">Warnings and errors</a> (including JavaScript, CSS, security warnings and errors, and messages explicitly logged by JavaScript code using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/console" title="/en-US/docs/Web/API/console">console</a> API).</li> + <li><a href="/en-US/docs/Tools/Web_Console#Input.2Foutput_messages" title="/en-US/docs/Tools/Web_Console#Input.2Foutput_messages">Input/output messages</a>: commands send to the browser via the command line, and the result of executing them.</li> +</ul> + +<p>However, it displays such messages from:</p> + +<ul> + <li>web content hosted by all browser tabs</li> + <li>the browser's own code</li> + <li>add-ons.</li> +</ul> + +<h3 id="Messages_from_add-ons">Messages from add-ons</h3> + +<p>The Browser Console displays messages logged by all Firefox add-ons.</p> + +<h4 id="Console.jsm">Console.jsm</h4> + +<p>To use the console API from a traditional or bootstrapped add-on, get it from the Console module.</p> + +<p>One exported symbol from Console.jsm is "console". Below is an example of how to access it, which adds a message to the Browser Console.</p> + +<pre class="brush: js">Components.utils.import("resource://gre/modules/Console.jsm"); +console.log("Hello from Firefox code"); //output messages to the console</pre> + +<p>Learn more:</p> + +<ul> + <li><a href="/en-US/docs/Web/API/console">console API reference</a></li> + <li><a href="https://dxr.mozilla.org/mozilla-central/source/toolkit/modules/Console.jsm">Console.jsm source code in the Mozilla DXR</a></li> +</ul> + +<h4 id="HUDService">HUDService</h4> + +<p>There is also the HUDService which allows access to the Browse Console. The module is available at <a href="https://dxr.mozilla.org/mozilla-central/source/devtools/client/webconsole/hudservice.js">Mozilla DXR</a>. We see we can not only access the Browser Console but also Web Console.</p> + +<p>Here is an example on how to clear the contents of the Browser console:</p> + +<pre class="brush: js">Components.utils.import("resource://devtools/shared/Loader.jsm"); +var HUDService = devtools.require("devtools/client/webconsole/hudservice"); + +var hud = HUDService.getBrowserConsole(); +hud.jsterm.clearOutput(true);</pre> + +<p>If you would like to access the content document of the Browser Console this can be done with the HUDService. This example here makes it so that when you mouse over the "Clear" button it will clear the Browser Console:</p> + +<pre class="brush: js">Components.utils.import("resource://devtools/shared/Loader.jsm"); +var HUDService = devtools.require("devtools/client/webconsole/hudservice"); + +var hud = HUDService.getBrowserConsole(); + +var clearBtn = hud.chromeWindow.document.querySelector('.webconsole-clear-console-button'); +clearBtn.addEventListener('mouseover', function() { + hud.jsterm.clearOutput(true); +}, false);</pre> + +<h4 id="Bonus_Features_Available">Bonus Features Available</h4> + +<p>For <a href="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/index.html" title="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/index.html">Add-on SDK</a> add-ons, the console API is available automatically. Here's an example add-on that just logs an error when the user clicks a widget:</p> + +<pre class="brush: js">widget = require("sdk/widget").Widget({ + id: "an-error-happened", + label: "Error!", + width: 40, + content: "Error!", + onClick: logError +}); + +function logError() { + console.error("something went wrong!"); +}</pre> + +<p>If you <a href="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/tutorials/installation.html" title="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/tutorials/installation.html">build this as an XPI file</a>, then open the Browser Console, then open the XPI file in Firefox and install it, you'll see a widget labeled "Error!" in the Add-on bar:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5937/browser-console-addon.png" style="display: block; margin-left: auto; margin-right: auto;">Click the icon. You'll see output like this in the Browser Console:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5851/browser-console-addon-output.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>For Add-on SDK-based add-ons only, the message is prefixed with the name of the add-on ("log-error"), making it easy to find all messages from this add-on using the <a href="/en-US/docs/Tools/Web_Console#Filtering_and_searching" title="/en-US/docs/Tools/Web_Console#Filtering_and_searching">"Filter output"</a> search box. By default, only error messages are logged to the console, although <a href="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/console.html#Logging%20Levels" title="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/console.html#Logging%20Levels">you can change this in the browser's preferences</a>.</p> + +<h2 id="Browser_Console_command_line">Browser Console command line</h2> + +<div class="blockIndicator geckoVersionNote"> +<p>The Browser Console command line is disabled by default. To enable it set the <code>devtools.chrome.enabled</code> preference to <code>true</code> in about:config, or set the "Enable chrome debugging" option in the <a href="/en-US/docs/Tools/Settings">developer tool settings</a>.</p> +</div> + +<p>Like the Web Console, the command line interpreter enables you to evaluate JavaScript expressions in real time:<img alt="" src="https://mdn.mozillademos.org/files/5855/browser-console-commandline.png" style="display: block; margin-left: auto; margin-right: auto;">Also like the Web Console's command line interpreter, this command line supports <a href="/en-US/docs/Tools/Web_Console#Autocomplete" title="/en-US/docs/Tools/Web_Console#Autocomplete">autocomplete</a>, <a href="/en-US/docs/Tools/Web_Console#Command_history" title="/en-US/docs/Tools/Web_Console#Command_history">history</a>, and various <a href="/en-US/docs/Tools/Web_Console#Keyboard_shortcuts" title="/en-US/docs/docs/Tools/Web_Console#Keyboard_shortcuts">keyboard shortcuts </a>and <a href="/en-US/docs/Tools/Web_Console#Helper_commands" title="/en-US/docs/Tools/Web_Console#Helper_commands">helper commands</a>. If the result of a command is an object, you can <a href="/en-US/docs/Tools/Web_Console#Inspecting_objects" title="/en-US/docs/Tools/Web_Console#Inspecting_objects">click on the object to see its details</a>.</p> + +<p>But while the Web Console executes code in the scope of the content window it's attached to, the browser console executes code in the scope of the chrome window of the browser. You can confirm this by evaluating <code>window</code>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5867/browser-console-chromewindow.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>This means you can control the browser: opening, closing tabs and windows and changing the content that they host, and modify the browser's UI by creating, changing and removing XUL elements.</p> + +<h3 id="Controlling_the_browser">Controlling the browser</h3> + +<p>The command line interpreter gets access to the <a href="/en-US/docs/XUL/tabbrowser" title="/en-US/docs/XUL/tabbrowser"><code>tabbrowser</code></a> object, through the <code>gBrowser</code> global, and that enables you to control the browser through the command line. Try running this code in the Browser Console's command line (remember that to send multiple lines to the Browser Console, use Shift+Enter):</p> + +<pre class="brush: js">var newTabBrowser = gBrowser.getBrowserForTab(gBrowser.selectedTab); +newTabBrowser.addEventListener("load", function() { + newTabBrowser.contentDocument.body.innerHTML = "<h1>this page has been eaten</h1>"; +}, true); +newTabBrowser.contentDocument.location.href = "https://mozilla.org/";</pre> + +<p>It adds a listener to the currently selected tab's <code>load</code> event that will eat the new page, then loads a new page.</p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: You can restart the browser with the command <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>R</kbd> (Windows, Linux) or <kbd>Cmd</kbd> + <kbd>Alt</kbd> + <kbd>R</kbd> (Mac) This command restarts the browser with the same tabs open as before the restart.</p> +</div> + +<h3 id="Modifying_the_browser_UI">Modifying the browser UI</h3> + +<p>Since the global <code>window</code> object is the browser's chrome window, you can also modify the browser's user interface. On Windows, the following code will add a new item to the browser's main menu:</p> + +<pre class="brush: js">var parent = window.document.getElementById("appmenuPrimaryPane"); +var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem"); +makeTheTea.setAttribute("label", "A nice cup of tea?"); +parent.appendChild(makeTheTea);</pre> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5859/browser-console-modify-ui-windows.png" style="display: block; margin-left: auto; margin-right: auto;">On macOS, this similar code will add a new item to the "Tools" menu:</p> + +<pre class="brush: js">var parent = window.document.getElementById("menu_ToolsPopup"); +var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem"); +makeTheTea.setAttribute("label", "A nice cup of tea?"); +parent.appendChild(makeTheTea);</pre> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5861/browser-console-modify-ui-osx.png" style="display: block; margin-left: auto; margin-right: auto;"></p> diff --git a/files/ar/tools/index.html b/files/ar/tools/index.html new file mode 100644 index 0000000000..7fe4951617 --- /dev/null +++ b/files/ar/tools/index.html @@ -0,0 +1,209 @@ +--- +title: أدوات مطور فايرفوكس +slug: Tools +translation_of: Tools +--- +<div>{{ToolsSidebar}}</div> + +<p class="summary">Examine, edit, and debug HTML, CSS, and JavaScript on the desktop and on mobile.</p> + +<p>If you are looking for information on using the web developer tools available in Firefox, you've come to the right place — this page provides links to detailed information on all of the core tools and additional tools, and further information such as how to connect to and debug Firefox for Android, how to extend the devtools, and how to debug the browser as a whole.</p> + +<p>Please explore the links found in the sidebar, and further down the page. If you have any feedback or questions about the devtools, send us messages on our mailing list or IRC channel (see the <a href="/en-US/docs/Tools#Join_the_Developer_tools_community">community links near the bottom of the page</a>). If you have any feedback or questions specifically about the documentation, the <a href="https://discourse.mozilla.org/c/mdn">MDN discourse</a> is a good place to post.</p> + +<div class="note"> +<p><strong>Note</strong>: If you are just getting started with web development and using developer tools, our <a href="/en-US/docs/Learn">learning web development</a> docs will help you — see <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the Web</a> and <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools?</a> for good starting points.</p> +</div> + +<h2 id="The_Core_Tools">The Core Tools</h2> + +<p>You can open the Firefox Developer Tools from the menu by selecting <em>Tools</em> > <em>Web Developer</em> > <em>Toggle Tools</em> or use the keyboard shortcut <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> or <kbd>F12</kbd> on Windows and Linux, or <kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd> on macOS.</p> + +<p>The ellipsis menu on the right-hand side of Developer Tools, contains several commands that let you perform actions or change tool settings.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16087/DevTools_LayoutMenu.png" style="display: block; height: 290px; margin: 0 auto; width: 225px;"></p> + +<table class="standard-table" style="height: 178px; width: 840px;"> + <tbody> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16092/iframe_button.png" style="height: 69px; width: 69px;"></td> + <td>This button only appears when there are multiple iframes on a page. Click it to display a list of the iframes on the current page and select the one with which you want to work.</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16088/camera_button.png" style="height: 69px; width: 69px;"></td> + <td>Click this button to take a screenshot of the current page. (<strong>Note:</strong> This feature is not turned on by default and must be enabled in settings before the icon will appear.)</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16089/responsive_button.png" style="height: 69px; width: 69px;"></td> + <td>Toggles Responsive Design Mode.</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16090/menu_button.png" style="height: 69px; width: 69px;"></td> + <td>Opens the menu that includes docking options, the ability to show or hide the split console, and Developer Tools settings. The menu also includes links to the documentation for Firefox Web Tools and the Mozilla Community.</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16091/close_button.png" style="height: 69px; width: 69px;"></td> + <td>Closes the Developer Tools</td> + </tr> + </tbody> +</table> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Page_Inspector">Page Inspector</h3> + +<p><a href="/en-US/docs/Tools/Page_Inspector"><img alt="The all-new Inspector panel in Firefox 57." src="https://mdn.mozillademos.org/files/16371/landingPage_PageInspector.png" style="border: 1px solid black; display: block; height: 171px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>View and edit page content and layout. Visualise many aspects of the page including the box model, animations, and grid layouts.</p> +</div> + +<div class="column-half"> +<h3 id="Web_Console">Web Console</h3> + +<p><a href="/en-US/docs/Tools/Web_Console"><img alt="The all-new Console in Firefox 57." src="https://mdn.mozillademos.org/files/16368/landingPage_Console.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>See messages logged by a web page and interact with the page using JavaScript.</p> +</div> +</div> + +<div class="column-container"> +<div class="column-half"> +<h3 id="JavaScript_Debugger">JavaScript Debugger</h3> + +<p><a href="/en-US/docs/Tools/Debugger"><img alt="The all-new Firefox 57 Debugger.html" src="https://mdn.mozillademos.org/files/16369/landingPage_Debugger.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>Stop, step through, examine, and modify the JavaScript running in a page.</p> +</div> + +<div class="column-half"> +<h3 id="Network_Monitor">Network Monitor</h3> + +<p><a href="/en-US/docs/Tools/Network_Monitor"><img alt="The Network panel in Firefox 57 DevTools." src="https://mdn.mozillademos.org/files/16370/landingPage_Network.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>See the network requests made when a page is loaded.</p> +</div> +</div> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Performance_Tools">Performance Tools</h3> + +<p><a href="/en-US/docs/Tools/Performance"><img alt="Performance Tools in Firefox 57 Developer Tools" src="https://mdn.mozillademos.org/files/16372/landingPage_Performance.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>Analyze your site's general responsiveness, JavaScript, and layout performance.</p> +</div> + +<div class="column-half"> +<h3 id="Responsive_Design_Mode">Responsive Design Mode</h3> + +<p><a href="/en-US/docs/Tools/Responsive_Design_Mode"><img alt="Responsive Design mode in Firefox 57." src="https://mdn.mozillademos.org/files/16373/landingPage_ResponsiveDesign.png" style="border-style: solid; border-width: 1px; display: block; height: 865px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>See how your website or app will look and behave on different devices and network types.</p> +</div> +</div> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Accessibility_inspector">Accessibility inspector</h3> + +<p><a href="/en-US/docs/Tools/Accessibility_inspector"><img alt="Performance Tools in Firefox 57 Developer Tools" src="https://mdn.mozillademos.org/files/16367/landingPage_Accessibility.png" style="border-style: solid; border-width: 1px; border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>Provides a means to access the page's accessibility tree, allowing you to check what's missing or otherwise needs attention.</p> +</div> + +<div class="column-half"></div> +</div> + +<div class="note"> +<p><strong>Note</strong>: The collective term for the UI inside which the DevTools all live is the <a href="/en-US/docs/Tools/Tools_Toolbox">Toolbox</a>.</p> +</div> + +<h2 id="More_Tools">More Tools</h2> + +<p>These developer tools are also built into Firefox. Unlike the "Core Tools" above, you might not use them every day.</p> + +<div class="twocolumns"> +<dl> + <dt><a href="/en-US/docs/Tools/Memory">Memory</a></dt> + <dd>Figure out which objects are keeping memory in use.</dd> + <dt><a href="/en-US/docs/Tools/Storage_Inspector">Storage Inspector</a></dt> + <dd>Inspect cookies, local storage, indexedDB, and session storage present in a page.</dd> + <dt><a href="/en-US/docs/Tools/DOM_Property_Viewer">DOM Property Viewer</a></dt> + <dd>Inspect the page's DOM properties, functions, etc.</dd> + <dt><a href="/en-US/docs/Tools/Eyedropper">Eyedropper</a></dt> + <dd>Select a color from the page.</dd> + <dt><a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a></dt> + <dd>A text editor built into Firefox that lets you write and execute JavaScript.</dd> + <dt><a href="/en-US/docs/Tools/Style_Editor">Style Editor</a></dt> + <dd>View and edit CSS styles for the current page.</dd> + <dt><a href="/en-US/docs/Tools/Screenshot_tool">Taking screenshots</a></dt> + <dd>Take a screenshot of the entire page or of a single element.</dd> + <dt><a href="/en-US/docs/Tools/Measure_a_portion_of_the_page">Measure a portion of the page</a></dt> + <dd>Measure a specific area of a web page.</dd> + <dt><a href="/en-US/docs/Tools/Rulers">Rulers</a></dt> + <dd>Overlay horizontal and vertical rulers on a web page</dd> +</dl> +</div> + +<div class="column-container"> +<div class="column-third"> +<p><img alt="" src="https://mdn.mozillademos.org/files/15588/logo-developer-quantum.png" style="display: block; margin: 0px auto;"></p> + +<p style="text-align: center;">For the latest developer tools and features, try Firefox Developer Edition.</p> + +<p><a href="https://www.mozilla.org/en-US/firefox/developer/" style="width: 300px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Download Firefox Developer Edition</a></p> +</div> + +<div class="column-third"></div> +</div> + +<h2 id="Connecting_the_Developer_Tools">Connecting the Developer Tools</h2> + +<p>If you open the developer tools using <a href="/en-US/docs/Tools/Keyboard_shortcuts#Opening_and_closing_tools">keyboard shortcuts</a> or the equivalent menu items, they'll target the document hosted by the currently active tab. But you can attach the tools to a variety of other targets, too, both within the current browser and in different browsers or even different devices.</p> + +<div class="twocolumns"> +<dl> + <dt><a href="/en-US/docs/Tools/about:debugging">about:debugging</a></dt> + <dd>Debug add-ons, content tabs, and workers running in the browser.</dd> + <dt><a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_over_Wifi">Connecting to Firefox for Android</a></dt> + <dd>Connect the developer tools to an instance of Firefox running on an Android device.</dd> + <dt><a href="/en-US/docs/Tools/Working_with_iframes">Connecting to iframes</a></dt> + <dd>Connect the developer tools to a specific iframe in the current page.</dd> + <dt><a href="/en-US/docs/Tools/Valence">Connecting to other browsers</a></dt> + <dd>Connect the developer tools to Chrome on Android and Safari on iOS.</dd> +</dl> +</div> + +<h2 id="Debugging_the_browser">Debugging the browser</h2> + +<p>By default, the developer tools are attached to a web page or web app. But you can also connect them to the browser as a whole. This is useful for browser and add-on development.</p> + +<div class="twocolumns"> +<dl> + <dt><a href="/en-US/docs/Tools/Browser_Console">Browser Console</a></dt> + <dd>See messages logged by the browser itself and by add-ons, and run JavaScript code in the browser's scope.</dd> + <dt><a href="/en-US/docs/Tools/Browser_Toolbox">Browser Toolbox</a></dt> + <dd>Attach the Developer Tools to the browser itself.</dd> +</dl> +</div> + +<h2 id="Extending_the_devtools">Extending the devtools</h2> + +<p>For information on extending the Firefox DevTools, see <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools">Extending the developer tools</a> over in the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">Browser Extensions</a> section of MDN.</p> + +<h2 id="Migrating_from_Firebug">Migrating from Firebug</h2> + +<p>Firebug has come to the end of its lifespan (see <a href="https://hacks.mozilla.org/2016/12/firebug-lives-on-in-firefox-devtools/">Firebug lives on in Firefox DevTools</a> for details of why), and we appreciate that some people will find migrating to another less familiar set of DevTools to be challenging. To ease a transition from Firebug to the Firefox developer tools, we have written a handy guide — <a href="/en-US/docs/Tools/Migrating_from_Firebug">Migrating from Firebug</a>.</p> + +<h2 id="Contribute">Contribute</h2> + +<p>If you want to help improve the developer tools, these resources will get you started.</p> + +<div class="twocolumns"> +<dl> + <dt><a href="https://docs.firefox-dev.tools/">Get Involved</a></dt> + <dd>Our developer documentation explains how to get involved.</dd> + <dt><a href="http://bugs.firefox-dev.tools/">bugs.firefox-dev.tools</a></dt> + <dd>A tool helping to find bugs to work on.</dd> +</dl> +</div> diff --git a/files/ar/tools/page_inspector/how_to/index.html b/files/ar/tools/page_inspector/how_to/index.html new file mode 100644 index 0000000000..2f18038ec9 --- /dev/null +++ b/files/ar/tools/page_inspector/how_to/index.html @@ -0,0 +1,13 @@ +--- +title: How to +slug: Tools/Page_Inspector/How_to +tags: + - NeedsTranslation + - TopicStub +translation_of: Tools/Page_Inspector/How_to +--- +<div>{{ToolsSidebar}}</div><p><span class="seoSummary">Links for various HOW TO's can be found here. These links describe in depth the HOW TO techniques.</span></p> + +<p>{{ ListSubpages () }}</p> + +<p> </p> diff --git a/files/ar/tools/page_inspector/index.html b/files/ar/tools/page_inspector/index.html new file mode 100644 index 0000000000..518af28f10 --- /dev/null +++ b/files/ar/tools/page_inspector/index.html @@ -0,0 +1,65 @@ +--- +title: Page Inspector +slug: Tools/Page_Inspector +tags: + - CSS + - DOM + - HTML + - NeedsTranslation + - Stylesheets + - TopicStub + - Web Development + - 'Web Development:Tools' + - 'l10n:priority' +translation_of: Tools/Page_Inspector +--- +<div>{{ToolsSidebar}}</div> + +<p>Use the Page Inspector to examine and modify the HTML and CSS of a page.</p> + +<p>You can examine pages loaded in the local copy of Firefox or in a remote target such as Firefox for Android. See <a href="/en-US/docs/Tools/Remote_Debugging">remote debugging </a>to learn how to connect the developer tools to a remote target.</p> + +<hr> +<h2 id="User_Interface_Tour">User Interface Tour</h2> + +<p>To find your way around the Inspector, here's a <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour">quick tour of the UI</a>.</p> + +<p>You can split the Rules view out into its own pane, separate from the other tabs on the CSS pane — this is called <a href="/en-US/docs/Tools/Page_Inspector/3-pane_mode">3-pane mode</a>.</p> + +<hr> +<h2 id="How_to">How to</h2> + +<p>To find out what you can do with the Inspector, see the following how to guides:</p> + +<div class="twocolumns"> +<ul> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector">Open the Inspector</a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">Examine and edit HTML</a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Examine and edit the box model</a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Inspect_and_select_colors">Inspect and select colors</a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Reposition_elements_in_the_page">Reposition elements in the page</a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_fonts">Edit fonts</a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Visualize_transforms">Visualize transforms</a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_API">Use the Inspector API</a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Select_an_element">Select an element</a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Examine and edit CSS</a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_event_listeners">Examine event listeners</a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations">Work with animations</a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_filters">Edit CSS filters</a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Edit CSS shapes</a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/View_background_images">View background images</a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_from_the_Web_Console">Use the Inspector from the Web Console</a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Examine CSS grid layouts</a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts">Examine CSS flexbox layouts</a></li> +</ul> +</div> + +<hr> +<h2 id="Reference">Reference</h2> + +<div class="twocolumns"> +<ul> + <li><a href="/en-US/docs/Tools/Page_Inspector/Keyboard_shortcuts">Keyboard shortcuts </a></li> + <li><a href="/en-US/docs/Tools/Tools_Toolbox#Inspector">Settings</a></li> +</ul> +</div> diff --git a/files/ar/tools/scratchpad/index.html b/files/ar/tools/scratchpad/index.html new file mode 100644 index 0000000000..b76f2da78c --- /dev/null +++ b/files/ar/tools/scratchpad/index.html @@ -0,0 +1,96 @@ +--- +title: Scratchpad +slug: Tools/Scratchpad +translation_of: Archive/Tools/Scratchpad +--- +<p><font><font>تقدم المسودة بيئة لتجريب شفرة جافا سكريبت. </font><font>يمكنك كتابة، تشغيل، وفحص النتائج من التعليمات البرمجية التي تتفاعل مع صفحة الويب.</font></font></p> + +<p><font><font>على عكس </font></font><a href="/en-US/docs/Tools/Web_Console" title="EN / استخدام وحدة تحكم ويب"><font><font>وحدة تحكم </font></font></a><font><font>ويب، </font><font>الذي تم تصميمه لتفسير سطر واحد من التعليمات البرمجية في وقت واحد، يتيح لك تطبيق المسودة تعديل قطع أكبر من شفرة جافا سكريبت، ثم تنفيذه بطرق مختلفة اعتمادا على الطريقة التي تريد استخدام الإخراج.</font></font></p> + +<p><font><font>{{EmbedYouTube ("Pt7DZACyClM ')}}</font></font></p> + +<h2 id="استعمال"><font><font>استعمال</font></font></h2> + +<h3 id="المسودة_افتتاح"><font><font>المسودة افتتاح</font></font></h3> + +<p><font><font>لفتح نافذة المسودة، اضغط </font></font><kbd><font><font>شيفت</font></font></kbd><font><font> + </font></font><kbd><font><font>F4، أو انتقل إلى القائمة مطور ويب (وهو الفرعية في القائمة أدوات على OS X و Linux)، ثم حدد المسودة. </font></font></kbd><font><font>هذا وسوف تفتح نافذة محرر المسودة، والذي يتضمن التعليق الذي يوفر بعض معلومات موجزة عن كيفية استخدام تطبيق المسودة. </font><font>من هناك يمكنك أن تبدأ على الفور كتابة بعض شفرة جافا سكريبت لمحاولة.</font></font></p> + +<h3 id="التحرير"><font><font>التحرير</font></font></h3> + +<p><font><font>نافذة المسودة يبدو شيئا من هذا القبيل (على OS X شريط القوائم في الجزء العلوي من الشاشة):</font></font></p> + +<p><img alt="لقطة من المسودة" src="https://mdn.mozillademos.org/files/5983/scratchpad.png"></p> + +<p><font><font>من القائمة ملف يوفر خيارات لحفظ وتحميل جافا سكريبت مقتطفات الشفرة، حتى تتمكن من إعادة استخدام التعليمات البرمجية في وقت لاحق إذا أردت.</font></font></p> + +<h4 id="إنجاز_قانون_وثائق_مضمنة"><font><font>إنجاز قانون وثائق مضمنة</font></font></h4> + +<div class="geckoVersionNote"> +<p><font><font>إنجاز قانون ونوع المعلومات غير متاح إلا من فايرفوكس 32 وما بعده.</font></font></p> +</div> + +<p><font><font>من فايرفوكس 32 فصاعدا المسودة يدمج </font></font><a href="http://ternjs.net/"><font><font>محرك تحليل رمز </font></font></a><font><font>الخرشنة، </font><font>ويستخدم ذلك لتقديم اقتراحات الإكمال التلقائي والنوافذ المنبثقة التي تحتوي على معلومات عن الرمز الحالي. </font><font>لإدراج اقتراحات الإكمال التلقائي، اضغط </font></font><kbd><font><font>على Ctrl</font></font></kbd><font><font> + </font><font>الفضاء. </font><font>لإظهار المنبثقة، اضغط </font><kbd><font>شيفت</font></kbd><font> + </font><kbd><font>الفضاء</font></kbd><font> في فايرفوكس 32 أو </font><kbd><font>السيطرة</font></kbd><font> + </font><kbd><font>التحول</font></kbd><font> + </font><kbd><font>الفضاء</font></kbd><font> في فايرفوكس 33+.</font></font></p> + +<p><font><font>على سبيل المثال، حاول كتابة </font></font><kbd><font><font>D، ثم الضغط </font></font></kbd><kbd><font><font>على Ctrl</font></font></kbd><font><font> + </font><font>الفضاء. </font><font>سترى هذا:</font></font></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7933/scratchpad-autocomplete.png" style="display: block; margin-left: auto; margin-right: auto;"><font><font>الرمز الموجود بجانب كل اقتراح إلى نوع، واقتراح المميز حاليا يحصل منبثقة مع مزيد من المعلومات. </font></font><kbd><font><font>↑</font></font></kbd><font><font> </font></font><kbd><font><font>و↓</font></font></kbd><font><font> دورة من خلال الاقتراحات </font></font><kbd><font><font>وأدخل</font></font></kbd><font><font> أو </font></font><kbd><font><font>تبويب</font></font></kbd><font><font> حدد خيار تسليط الضوء عليها.</font></font></p> + +<p><font><font>إذا قمت بتحديد </font></font><code><font><font>المستند،</font></font></code><font><font> ثم </font></font><code><font><font>addEventListener، ثم اضغط على </font></font></code><kbd><font><font>التحول</font></font></kbd><font><font> + </font></font><kbd><font><font>الفضاء</font></font></kbd><font><font> سترى المنبثقة التي تظهر ملخصا لتركيب وظيفة وصفا موجزا:</font></font></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7935/scratchpad-symbolinfo.png" style="display: block; margin-left: auto; margin-right: auto;"><font><font>و"[مستندات]" وصلة يأخذك إلى وثائق MDN للرمز.</font></font></p> + +<h3 id="تنفيذ"><font><font>تنفيذ</font></font></h3> + +<p class="note"><font><font>بمجرد كتابة التعليمات البرمجية الخاصة بك، حدد الرمز الذي تريد تشغيله. </font><font>إذا لم تقم بتحديد أي شيء، سيتم تشغيل كافة التعليمات البرمجية في الإطار. </font><font>ثم اختيار الطريقة التي تريد رمز لتشغيل باستخدام أزرار على طول الجزء العلوي، وذلك باستخدام القائمة تنفيذ، أو باستخدام قائمة السياق. </font><font>يتم تنفيذ التعليمات البرمجية في نطاق التبويب المحدد حاليا. </font><font>ستضاف أية متغيرات قمت بتعريف خارج وظيفة إلى وجوه العالمي لعلامة التبويب هذه.</font></font></p> + +<p class="note"><font><font>هناك أربعة خيارات التنفيذ المتاحة.</font></font><strong> </strong></p> + +<h4 id="اركض"><font><font>اركض</font></font></h4> + +<p><font><font>عند اختيار خيار تشغيل، يتم تنفيذ التعليمات البرمجية المحددة. </font><font>هذا هو ما كنت تستخدم لتنفيذ وظيفة أو رمز الأخرى التي تعالج محتوى الصفحة الخاصة بك دون الحاجة لمعرفة النتيجة.</font></font></p> + +<h4 id="فحص"><font><font>فحص</font></font></h4> + +<p><font><font>الخيار فحص تنفيذ التعليمات البرمجية تماما مثل الخيار تشغيل. </font><font>ومع ذلك، بعد بإرجاع رمز، يتم فتح مفتش الكائن لتمكنك من دراسة القيمة التي تم إرجاعها.</font></font></p> + +<p><font><font>على سبيل المثال، إذا قمت بإدخال رمز:</font></font></p> + +<pre class="brush:css"><font><font>نافذة +</font></font></pre> + +<p><font><font>ثم اختر فحص، يظهر مفتش الكائن ويبدو أن شيئا من هذا القبيل:</font></font></p> + +<p><img alt="تفتيش كائن في المسودة" src="https://mdn.mozillademos.org/files/5985/scratchpad-inspect.png"></p> + +<h4 id="عرض"><font><font>عرض</font></font></h4> + +<p><font><font>خيار عرض تنفيذ التعليمات البرمجية المحددة، ثم إدراج نتيجة مباشرة إلى حسابك في المسودة محرر نافذة كتعليق، لذلك يمكنك استخدامه بمثابة </font><font>REPL.</font></font></p> + +<h4 id="تحديث_وتشغيل"><font><font>تحديث وتشغيل</font></font></h4> + +<p><font><font>متوفر فقط في القائمة تنفيذ خيار تحديث وتشغيل. </font><font>لأول مرة تعيد تحميل الصفحة، ثم تنفيذ التعليمات البرمجية عند "تحميل" وقع الحدث الصفحة. </font><font>وهذا مفيد لتشغيل التعليمات البرمجية في بيئة البكر.</font></font></p> + +<h2 id="تشغيل_المسودة_في_سياق_المتصفح"><font><font>تشغيل المسودة في سياق المتصفح</font></font></h2> + +<p><font><font>يمكنك تشغيل تطبيق المسودة في سياق متصفح ككل بدلا من صفحة ويب معينة. </font><font>وهذا مفيد إذا كنت تعمل على فايرفوكس نفسها أو تطوير إضافات. </font><font>للقيام بذلك الاختيار "تمكين الكروم وإضافة على التصحيح" في </font></font><a href="/en-US/docs/Tools/Tools_Toolbox#Settings_2"><font><font>إعدادات أداة </font></font></a><font><font>المطور. </font><font>مرة واحدة كنت قد فعلت هذا، القائمة البيئة لديها خيار المتصفح. </font><font>وبمجرد أن اختيار، النطاق الخاص بك هو متصفح كامل وليس مجرد محتوى الصفحة، كما سترون من دراسة بعض جلوبل:</font></font></p> + +<pre class="brush: js"><font><font>نافذة</font></font> +/*<font><font> +[كائن ChromeWindow]</font></font><font><font> +*/</font></font> +<font><font> +gBrowser</font></font><font><font> +/*</font></font><font><font> +[كائن XULElement]</font></font><font><font> +*/</font></font></pre> + +<p><font><font>تم تعيين سياق التنفيذ المسودة إلى المتصفح عندما ملف قصاصة له </font><code><font>// -sp السياق: المتصفح</font></code><font> في السطر الأول.</font></font><br> + </p> + +<h2 id="اختصارات_لوحة_المفاتيح"><font><font>اختصارات لوحة المفاتيح</font></font></h2> + +<p><font><font>{{صفحة ("EN-US / مستندات / أدوات / Keyboard_shortcuts"، "المسودة")}}</font></font></p> + +<h3 id="اختصارات_محرر_المصدر"><font><font>اختصارات محرر المصدر</font></font></h3> + +<p><font><font>{{صفحة ("EN-US / مستندات / أدوات / Keyboard_shortcuts"، "مصدر محرر")}}</font></font></p> diff --git a/files/ar/tools/storage_inspector/index.html b/files/ar/tools/storage_inspector/index.html new file mode 100644 index 0000000000..b4292a14ea --- /dev/null +++ b/files/ar/tools/storage_inspector/index.html @@ -0,0 +1,112 @@ +--- +title: Storage Inspector +slug: Tools/Storage_Inspector +translation_of: Tools/Storage_Inspector +--- +<div>{{ToolsSidebar}}</div> + +<p>The Storage Inspector enables you to inspect various types of storage that a web page can use. Currently it can be used to inspect the following storage types:</p> + +<ul> + <li><em>Cache Storage</em> — any DOM caches created using the <a href="/en-US/docs/Web/API/Cache">Cache API</a>.</li> + <li><em>Cookies</em> — All the <a href="/en-US/docs/Web/API/Document/cookie">cookies</a> created by the page or any iframes inside of the page. Cookies created as a part of response of network calls are also listed, but only for calls that happened while the tool is open.</li> + <li><em>IndexedDB</em> — All <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> databases created by the page or any iframes inside the page, their Object Stores and the items stored in these Object Stores.</li> + <li><em>Local Storage</em> — All <a href="/en-US/docs/Web/API/Window/localStorage">local storage</a> items created by the page or any iframes inside the page.</li> + <li><em>Session Storage</em> — All <a href="/en-US/docs/Web/API/Window/sessionStorage">session storage</a> items created by the page or any iframes inside the page.</li> +</ul> + +<p>For the time being, the Storage Inspector only gives you a read-only view of storage. But we're working to let you edit storage contents in future releases.</p> + +<h2 id="Opening_the_Storage_Inspector">Opening the Storage Inspector</h2> + +<p>You can open the Storage Inspector by selecting "Storage Inspector" from the Web Developer submenu in the Firefox Menu Panel (or Tools menu if you display the menu bar or are on macOS), or by pressing its <kbd>Shift</kbd> + <kbd>F9</kbd> keyboard shortcut.</p> + +<p>The <a href="https://developer.mozilla.org/en-US/docs/Tools/DevTools_Window" title="/en-US/docs/Tools/DevTools_Window">Toolbox</a> will appear at the bottom of the browser window, with the Storage Inspector activated. It's just called "Storage" in the Developer Toolbox.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16764/storage_inspector.png" style="display: block; margin: 0px auto; width: 600px;"></p> + +<h2 id="Storage_Inspector_User_Interface">Storage Inspector User Interface</h2> + +<p>The Storage Inspector UI is split into three main components:</p> + +<ul> + <li><a href="#storage-tree">Storage tree</a></li> + <li><a href="#table-widget">Table Widget</a></li> + <li><a href="#sidebar">Sidebar</a></li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16765/storage_labeled.png" style="display: block; margin: 0 auto; width: 600px;"></p> + +<h3 id="Storage_tree"><a name="storage-tree">Storage tree</a></h3> + +<p>The storage tree lists all the storage types that the Storage Inspector can inspect:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16766/storage_types.png" style="display: block; height: 129px; margin: 0 auto; width: 400px;"></p> + +<p>Under each type, objects are organized by origin. For cookies, the protocol does not differentiate the origin. For Indexed DB or local storage an origin is a combination of protocol + hostname. For example, "http://mozilla.org" and "https://mozilla.org" are two different origins so local storage items cannot be shared between them.</p> + +<p>Under "Cache Storage", objects are organized by origin and then by the name of the cache:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16802/cache_storage.png" style="border: 1px solid black; display: block; height: 215px; margin-left: auto; margin-right: auto; width: 274px;"></p> + +<p>IndexedDB objects are organized by origin, then by database name, then by object store name:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16804/indexedDb_storage.png" style="border: 1px solid black; display: block; height: 193px; margin-left: auto; margin-right: auto; width: 274px;"></p> + +<p>With the Cookies, Local Storage, and Session Storage types, there's only one level in the hierarchy, so stored items are listed directly under each origin:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16803/cookie_storage.png" style="border: 1px solid black; display: block; height: 217px; margin-left: auto; margin-right: auto; width: 274px;"></p> + +<p>You can click on each item in the tree to expand or collapse its children. The tree is live, so if a new origin gets added (by adding an iframe, for example), it will be added to each storage type automatically.</p> + +<p>Clicking on a tree item will display detailed information about that item in the Table Widget on the right. For example, clicking on an origin which is a child of the Cookies storage type will show all the cookies belonging to that domain.</p> + +<h3 id="Table_Widget"><a name="table-widget">Table Widget</a></h3> + +<p>The table widget displays a list of all the items corresponding to the selected tree item (be it an origin, or database) are listed. Depending on the storage type and tree item, the number of columns in the table might differ.</p> + +<p>All the columns in a Table Widget are resizable. You can hide and show columns by context-clicking on the table header and selecting the columns you want to see:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16767/cookie_context_menu.png" style="border: 1px solid black; display: block; height: 330px; margin-left: auto; margin-right: auto; width: 914px;"></p> + +<h3 id="Search">Search</h3> + +<p>There's a search box at the top of the Table Widget:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16808/storage_detail_filter.png" style="border: 1px solid black; display: block; height: 249px; margin-left: auto; margin-right: auto; width: 926px;"></p> + +<p>This filters the table to show only items which match the search term. Items match the search term if any of their fields (including fields whose columns you have hidden) contain the search term.</p> + +<p>You can use <kbd>Ctrl</kbd> + <kbd>F</kbd> (<kbd>Cmd</kbd> + <kbd>F</kbd> on a Mac) to focus the search box.</p> + +<h3 id="Add_and_refresh_storage">Add and refresh storage</h3> + +<p>You'll also have buttons available to add a new storage entry or refresh the view of the currently viewed storage type where applicable (you can't add new entries to IndexedDB or Cache):</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16809/storage_detail_add_refresh.png" style="border: 1px solid black; display: block; height: 249px; margin: 0px auto; width: 926px;"></p> + +<h3 id="Sidebar"><a name="sidebar">Sidebar</a></h3> + +<p>When you select any row in the Storage table widget, the sidebar is shown with details about that row. If a cookie is selected, it will list all the details about that cookie.</p> + +<p>The sidebar can parse the value of the cookie or local storage item or an IndexedDB item and convert it into a meaningful object instead of just a string. For example:</p> + +<ul> + <li>A stringified JSON like <code>'{"foo": "bar"}'</code> is shown as the origin JSON: <code>{foo: "bar"}</code>.</li> + <li>A string containing a key separated value, like <code>"1~2~3~4"</code> or <code>"1=2=3=4"</code> is shown like an array: <code>[1, 2, 3, 4]</code>.</li> + <li>A string containing key-value pairs, like <code>"ID=1234:foo=bar"</code> is shown as JSON: <code>{ID:1234, foo: "bar"}</code>.</li> +</ul> + +<p>The shown values can also be filtered using the search box at the top of the sidebar.</p> + +<h2 id="Working_with_the_Storage_Inspector">Working with the Storage Inspector</h2> + +<p>The following articles cover different aspects of using the network monitor:</p> + +<ul> + <li><a href="/en-US/docs/Tools/Storage_Inspector/Cookies">Cookies</a></li> + <li><a href="/en-US/docs/Tools/Storage_Inspector/Local_Storage_Session_Storage">Local Storage / Session Storage</a></li> + <li><a href="/en-US/docs/Tools/Storage_Inspector/Cache_Storage">Cache Storage</a></li> + <li><a href="/en-US/docs/Tools/Storage_Inspector/IndexedDB">IndexedDB</a></li> + <li><a href="/en-US/docs/Tools/Storage_Inspector/Extension_Storage">Extension Storage</a></li> +</ul> diff --git a/files/ar/tools/web_console/index.html b/files/ar/tools/web_console/index.html new file mode 100644 index 0000000000..f209646681 --- /dev/null +++ b/files/ar/tools/web_console/index.html @@ -0,0 +1,45 @@ +--- +title: Web Console +slug: Tools/Web_Console +tags: + - أدوات + - الأمان + - التصحيح + - التنقيح + - تطوير الويب + - 'تطوير الويب: أدوات' + - وحدة تحكم الويب +translation_of: Tools/Web_Console +--- +<p><strong>وحدة تحكم الويب:</strong></p> + +<ol> + <li>تسجل المعلومات المرتبطة بصفحة الويب: طلبات الشبكة، جافا سكريبت، CSS, أخطاء الأمان و التحذيرات باﻹضافة إلى اﻷخطاء، التحذير والرسائل الإعلامية التي يتم تسجيلها بشكل صريح من خلال شفرة جافا سكريبت التي تعمل في سياق الصفحة</li> + <li>تمكّنك من التفاعل مع صفحة الويب عن طريق تنفيذ تعبيرات جافا سكريبت في سياق الصفحة</li> +</ol> + +<p>{{EmbedYouTube("C6Cyrpkb25k")}}</p> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/en-US/docs/Tools/Web_Console/Opening_the_Web_Console">فتح وحدة تحكم الويب</a></dt> + <dd>كيف تبدأ إستعمال وحدة تحكم الويب.</dd> + <dt><a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter">مفسّر سطر الأوامر</a></dt> + <dd>كيف تتفاعل مع مستند بإستعمال وحدة التحكم.</dd> + <dt><a href="/en-US/docs/Tools/Web_Console/Split_console">وحدة التحكم</a></dt> + <dd>إستخدم وحدة التحكم بجانب الأدوات الأخرى.</dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/en-US/docs/Tools/Web_Console/Console_messages">رسائل وحدة التحكم </a></dt> + <dd>تفاصيل الرسائل التي تسجلها وحدة التحكم.</dd> + <dt><a href="/en-US/docs/Tools/Web_Console/Rich_output">خرج غني</a></dt> + <dd>شاهد و تفاعل مع الكائنات التي تسجلها وحدة التحكم.</dd> + <dt><a href="/en-US/docs/Tools/Web_Console/Keyboard_shortcuts">إختصارات لوحة المفاتيح</a></dt> + <dd>مرجع اﻹختصار.</dd> +</dl> +</div> +</div> diff --git a/files/ar/tools/web_console/the_command_line_interpreter/index.html b/files/ar/tools/web_console/the_command_line_interpreter/index.html new file mode 100644 index 0000000000..119cc57f13 --- /dev/null +++ b/files/ar/tools/web_console/the_command_line_interpreter/index.html @@ -0,0 +1,185 @@ +--- +title: The JavaScript input interpreter +slug: Tools/Web_Console/The_command_line_interpreter +translation_of: Tools/Web_Console/The_command_line_interpreter +--- +<div>{{ToolsSidebar}}</div> + +<p>You can interpret JavaScript expressions in real time using the interpreter provided by the Web Console. It has two modes: single-line entry and multi-line entry.</p> + +<h2 id="Single-line_mode">Single-line mode</h2> + +<p>For single-line entry, you can type JavaScript expressions in the field at the bottom of the console log, at the <strong>>></strong> prompt.</p> + +<p><img alt="The Web Console, showing single-line mode" src="https://mdn.mozillademos.org/files/16965/web_console_single.png" style="display: block; height: 704px; margin-left: auto; margin-right: auto; width: 1952px;"></p> + +<p>To enter expressions in single-line mode, type at the prompt and press <kbd>Enter</kbd>. To enter multi-line expressions, press <kbd>Shift</kbd>+<kbd>Enter</kbd> after typing each line, then <kbd>Enter</kbd> to run all the entered lines.</p> + +<p>The expression you type is echoed under the input prompt, followed by the result.</p> + +<p>If your input does not appear to be complete when you press <kbd>Enter</kbd>, then the Console treats this as <kbd>Shift</kbd>+<kbd>Enter</kbd> , enabling you to finish your input.</p> + +<p>For example, if you type:</p> + +<pre class="brush: js" dir="rtl">function foo() {</pre> + +<p>and then <kbd>Enter</kbd>, the Console does not immediately execute the input, but behaves as if you had pressed <kbd>Shift</kbd>+<kbd>Enter</kbd> , so you can finish entering the function definition.</p> + +<h2 id="Multi-line_mode">Multi-line mode</h2> + +<p>For multi-line entry, click the "split pane" icon at the right hand side of the single-line entry field, or press <kbd>Ctrl</kbd>+<kbd>B</kbd> (Windows/Linux) or <kbd>Cmd</kbd>+<kbd>B</kbd> (macOS). The multi-line editing pane opens on the left side the of Web Console.</p> + +<p><img alt="Web Console in multi-line mode" src="https://mdn.mozillademos.org/files/16966/web_console_multi.png" style="border-style: solid; border-width: 1px; height: 700px; width: 1946px;"></p> + +<p>You can enter multiple lines of JavaScript by default in this mode, pressing <kbd>Enter</kbd> after each one. To execute the snippet that is currently in the editing pane, click the <strong>Run</strong> button or press <kbd>Ctrl</kbd>+<kbd>Enter</kbd> (or <kbd>Cmd</kbd>+<kbd>Return</kbd> on MacOS). The snippet is echoed under the input prompt (in the right-side pane), followed by the result. You can also select a range of lines in the editing pane, and run just the code on those lines.</p> + +<p>Starting in Firefox 76, if the code snippet is more than five lines long, only the first five lines are echoed in the console, preceeded by a disclosure triangle (or "twistie"), and followed by an ellipsis (…). Click anywhere in the area containing the echoed code to show the whole snippet; click again in that area to collapse it.</p> + +<p>You can open files when in multi-line mode, and save the current contents of the editing pane to a file.</p> + +<ul> + <li>To open a file, press <kbd>Ctrl</kbd>+<kbd>O</kbd> (<kbd>Cmd</kbd>+<kbd>O</kbd> on MacOS). A file dialog box opens so you can select the file to open.</li> + <li>To save the contents of the editing pane, press <kbd>Ctrl</kbd>+<kbd>S</kbd> (<kbd>Cmd</kbd>+<kbd>S</kbd> on MacOS). A file dialog box opens so you can specify the location to save to.</li> +</ul> + +<p>To switch back to single-line mode, click the <strong>X</strong> icon at the top of the multi-line editing pane, or press <kbd>Ctrl</kbd>+<kbd>B</kbd> (Windows/Linux) or <kbd>Cmd</kbd>+<kbd>B</kbd> (MacOS).</p> + +<h2 id="Accessing_variables">Accessing variables</h2> + +<p>You can access variables defined in the page, both built-in variables like <code>window</code> and variables added by JavaScript libraries like <em>jQuery</em>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7367/commandline-accessbuiltin.png" style="display: block; margin-left: auto; margin-right: auto;"><img alt="" src="https://mdn.mozillademos.org/files/7369/commandline-accesspageadded.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h2 id="Autocomplete">Autocomplete</h2> + +<p>The editor has autocomplete: enter the first few letters and a popup appears with possible completions:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16426/console_autocomplete_cropped.png" style="border: 1px solid black; display: block; height: 299px; margin-left: auto; margin-right: auto; width: 302px;"></p> + +<p>Press <kbd>Enter</kbd>, <kbd>Tab</kbd>, or the right arrow key to accept the suggestion, use the up/down arrows to move to a different suggestion, or just keep typing if you don't like any of the suggestions.</p> + +<p>Console autocomplete suggestions are case-insensitive.</p> + +<p>The console suggests completions from the scope of the currently executing stack frame. This means that if you've hit a breakpoint in a function you get autocomplete for objects local to the function.</p> + +<p>You get autocomplete suggestions for array elements, as well:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16440/arrayList_autocomplete.png" style="border: 1px solid black; display: block; height: 271px; margin-left: auto; margin-right: auto; width: 800px;"></p> + +<p>You can enable or disable autocompletion via the Settings ("gear") menu in the Web Console toolbar. The menuitem <strong>Enable Autocompletion</strong> has a checkmark next to it when the feature is enabled, which is missing when it is disabled. Select the menuitem to change the state.</p> + +<h2 id="Instant_evaluation">Instant evaluation</h2> + +<div class="blockIndicator note"> +<p>This feature is available in Firefox Nightly, in versions labeled 74 and later.</p> +</div> + +<p>When the "instant evaluation" feature is enabled, the interpreter displays results of expressions as you're typing them in single-line mode. Note that the result might be an error message. Expressions that have side effects are not evaluated.</p> + +<p>You can enable or disable instant evaluation via the Settings ("gear") menu in the Web Console toolbar. The menuitem <strong>Instant Evaluation</strong> has a checkmark next to it when the feature is enabled, which is missing when it is disabled. Select the menuitem to change the state.</p> + +<h2 id="Execution_context">Execution context</h2> + +<p>Code that you have executed becomes part of the execution context, regardless of what editing mode you were in when you executed it. For example, if you type a function definition in the multi-line editor, and click <strong>Run</strong>, you can switch to single-line mode and still use your function.</p> + +<h2 id="Syntax_highlighting">Syntax highlighting</h2> + +<p><img alt="Console output showing syntax highlighting" src="https://mdn.mozillademos.org/files/16470/console_syntaxHighlighting.png" style="border: 1px solid black; display: block; height: 310px; margin-left: auto; margin-right: auto; width: 452px;"></p> + +<p>The text you enter has syntax highlighting as soon as you have typed enough for the highlighter to parse it and infer the meanings of the "words".</p> + +<p>The output is highlighted as well where appropriate.</p> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> Syntax highlighting is not visible in your browser if Accessibility features have been enabled.</p> +</div> + +<h2 id="Execution_history">Execution history</h2> + +<p>The interpreter remembers expressions you've typed. To move back and forward through your history:</p> + +<ul> + <li>In single-line mode, use the up and down arrows. </li> + <li>In multi-line mode, use the <strong>⋀</strong> and <strong>⋁ </strong>icons in the editing panel's toolbar.</li> +</ul> + +<p>The expression history is persisted across sessions. To clear the history, use the <code>clearHistory()</code> <a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter#Helper_commands">helper function</a>.</p> + +<p>You can initiate a reverse search through the expression history, much like you can in bash on Linux and Mac or PowerShell on Windows. On Windows and Linux press <kbd>F9</kbd>. On Mac press <kbd>Ctrl</kbd>+<kbd>R</kbd> (<strong>note:</strong> not <kbd>Cmd</kbd>+<kbd>R</kbd>!) to initiate the reverse search.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16468/reverse_search.png" style="border: 1px solid black; display: block; height: 335px; margin: 0px auto; width: 500px;"></p> + +<p>Enter the text you want to search for in the input box at the bottom of the Console. Start typing part of the expression you are looking for and the first match is displayed in the console. Repeatedly typing <kbd>F9</kbd> on Windows and Linux ( <kbd>Ctrl</kbd>+<kbd>R</kbd> on Mac) cycles backwards through the matches.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16469/reverse_search_example.png" style="border: 1px solid black; display: block; margin: 0 auto;"></p> + +<p>Once you have initiated the reverse search, you can use <kbd>Shift</kbd> + <kbd>F9</kbd> on Windows or Linux ( <kbd>Ctrl</kbd>+<kbd>S</kbd> on Mac) to search forward in the list of matches. You can also use the <strong>⋀</strong> and <strong>⋁ </strong>icons in the expression search bar.</p> + +<p>When you find the expression you want, press <kbd>Enter</kbd> (<kbd>Return</kbd>) to execute the statement.</p> + +<h2 id="Working_with_iframes">Working with iframes</h2> + +<p>If a page contains embedded <a href="/en-US/docs/Web/HTML/Element/iframe">iframes</a>, you can use the <code>cd()</code> function to change the console's scope to a specific iframe, and then you can execute functions defined in the document hosted by that iframe. There are three ways to select an iframe using <code>cd()</code>:</p> + +<p>You can pass the iframe DOM element:</p> + +<pre class="brush: js" dir="rtl">var frame = document.getElementById("frame1"); +cd(frame);</pre> + +<p>You can pass a CSS selector that matches the iframe:</p> + +<pre class="brush: js" dir="rtl">cd("#frame1");</pre> + +<p>You can pass the iframe's global window object:</p> + +<pre class="brush: js" dir="rtl">var frame = document.getElementById("frame1"); +cd(frame.contentWindow); +</pre> + +<p>To switch the context back to the top-level window, call <code>cd()</code> with no arguments:</p> + +<pre class="brush: js" dir="rtl">cd();</pre> + +<p>For example, suppose we have a document that embeds an iframe:</p> + +<pre class="brush: html" dir="rtl"><!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + </head> + <body> + <iframe id="frame1" src="static/frame/my-frame1.html"></iframe> + </body> +</html></pre> + +<p>The iframe defines a new function:</p> + +<pre class="brush: html" dir="rtl"><!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <script> + function whoAreYou() { + return "I'm frame1"; + } + </script> + </head> + <body> + </body> +</html></pre> + +<p>You can switch context to the iframe like this:</p> + +<pre class="brush: js" dir="rtl">cd("#frame1");</pre> + +<p>Now you'll see that the global window's document is the iframe:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7355/web-console-iframe-document.png" style="display: block; height: 75px; margin-left: auto; margin-right: auto; width: 632px;"></p> + +<p>And you can call the function defined in the iframe:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7357/web-console-iframe-function.png" style="display: block; height: 77px; margin-left: auto; margin-right: auto; width: 632px;"></p> + +<h2 id="Helper_commands">Helper commands</h2> + +<p>{{ page("en-US/docs/Tools/Web_Console/Helpers", "The commands") }}</p> diff --git a/files/ar/tools/webide/index.html b/files/ar/tools/webide/index.html new file mode 100644 index 0000000000..906c5e9912 --- /dev/null +++ b/files/ar/tools/webide/index.html @@ -0,0 +1,467 @@ +--- +title: WebIDE +slug: Tools/WebIDE +tags: + - Apps + - B2G + - Debugging + - Firefox OS + - NeedsTranslation + - TopicStub + - WebIDE + - tool +translation_of: Archive/WebIDE +--- +<div class="geckoVersionNote"> +<p>WebIDE is available from Firefox 34 onwards.</p> +</div> + +<div class="summary"> +<p>WebIDE is the replacement for the <a href="/en-US/Firefox_OS/Using_the_App_Manager">App Manager</a>. Like the App Manager, it enables you to run and debug <a href="/en-US/Firefox_OS">Firefox OS</a> apps using the <a href="/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> or a real Firefox OS device.</p> + +<p>However, it also provides an editing environment for you to create and develop Firefox OS apps, including a tree view of all the files in your app with the ability to edit and save them, and two app templates to help you get started.</p> + +<p>Finally, WebIDE enables you to connect the <a href="/en-US/docs/Tools">Firefox Developer Tools</a> to a number of other browsers, including Firefox for Android, Chrome on Android, and Safari on iOS. See the <a href="/en-US/docs/Tools/Remote_Debugging">Remote Debugging</a> page for instructions on how to connect to a specific browser.</p> +</div> + +<p>With WebIDE, you first <a href="/en-US/docs/Tools/WebIDE#Setting_up_runtimes">set up one or more runtimes</a>. A runtime is an environment in which you'll run and debug the app. A runtime could be a Firefox OS device connected to the desktop over USB, or it could be a Firefox OS Simulator installed on the desktop itself.</p> + +<p>Next, you <a href="/en-US/docs/Tools/WebIDE#Creating_and_opening_apps">create an app, or open an existing app</a>. If you're creating a new app you start with a template that includes the directory structure and the minimum boilerplate you need to get started, or a more complete template that shows how to use a privileged API. WebIDE shows your app's files in a tree, and you can edit and save them using a built-in source editor. Of course, you don't have to use the built-in editor: you can develop your app entirely outside WebIDE, and only use it for debugging.</p> + +<p>Finally, you can <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Running_and_debugging_apps">install the app in one of the runtimes and run it</a>. You can then open the usual suite of developer tools - the <a href="/en-US/docs/Tools/Page_Inspector">Inspector</a>, <a href="/en-US/docs/Tools/Web_Console">Console</a>, <a href="/en-US/docs/Tools/Debugger">JavaScript Debugger</a> and so on - to examine and modify the running app.</p> + +<h2 id="System_requirements">System requirements</h2> + +<p>To develop and debug apps using WebIDE, all you need is Firefox version 33 or later. To test on a real Firefox OS device, you need a device running Firefox OS 1.2 or later, and a USB cable.</p> + +<p>You can only use WebIDE for Firefox OS if you're targeting Firefox OS 1.2 or later.</p> + +<h2 id="Opening_WebIDE">Opening WebIDE</h2> + +<p>There are three ways to open WebIDE:</p> + +<ul> + <li>In the Web Developer menu, click on the "WebIDE" entry and WebIDE opens.</li> + <li>Use the keybinding Shift-F8.</li> + <li>A dedicated icon in the Firefox toolbar. This is always present if you're using <a href="/en-US/Firefox/Developer_Edition">Firefox Developer Edition</a>, and with any Firefox from version 36 onwards it appears after you've opened the WebIDE once:</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9437/webide-icon.png" style="width: 897px; display: block; margin-left: auto; margin-right: auto;"></p> + +<p>Here's what the WebIDE looks like:<img alt="" src="https://mdn.mozillademos.org/files/8033/webide-initial.png" style="width: 720px; height: 560px; display: block; margin-left: auto; margin-right: auto;">The dropdown on the left labeled "Open App" lets you open existing apps or create new ones. The dropdown on the right labeled "Select Runtime" lets you select a runtime or set up a new runtime.</p> + +<p>The buttons in the middle run, stop, and debug the app: they are only enabled when you have opened an app and selected a runtime.</p> + +<p>From Firefox 36, you can change the font size throughout WebIDE using the standard keyboard shortcuts (use <code>Command</code> instead of <code>Control</code> on OS X):</p> + +<ul> + <li><code>Ctrl +</code> increases font size</li> + <li><code>Ctrl -</code> decreases font size</li> + <li><code>Ctrl 0</code> resets the font size to the default</li> +</ul> + +<h2 id="Setting_up_runtimes">Setting up runtimes</h2> + +<p>Under the "Select Runtime" dropdown, runtimes are grouped into three types:</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Connecting_a_Firefox_OS_device">USB devices</a>: Firefox OS devices connected over USB. From Firefox 36 this also gets you connected to <a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE">Firefox for Android over USB</a>.</li> + <li><a href="/en-US/docs/Tools/WebIDE#Adding_a_Simulator">Simulators</a>: instances of the Firefox OS Simulator that you've installed</li> + <li><a href="/en-US/docs/Tools/WebIDE#Custom_runtimes">Custom</a>: use this to connect a runtime to WebIDE using an arbitrary name and port. From Firefox 36, this runtime type is renamed "Other". If you have the <a href="/en-US/docs/Tools/Valence">Valence</a> add-on installed, this section will also list the <a href="/en-US/docs/Tools/WebIDE#Valence-enabled_runtimes">additional runtimes it enables</a>.</li> +</ul> + +<p>The first time you click the dropdown, you might not see any runtimes here:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8043/webide-no-runtimes.png" style="width: 723px; height: 564px; display: block; margin-left: auto; margin-right: auto;">The rest of this section describes how you can add some runtimes.</p> + +<h3 id="Connecting_a_Firefox_OS_device">Connecting a Firefox OS device</h3> + +<p>Before you can connect a Firefox OS device, there's some setup you have to go through:</p> + +<ul> + <li><strong>check your Firefox OS version: </strong>make sure your device is running Firefox OS 1.2/Boot2Gecko 1.2 or higher. To check the version, go to the Settings app on the device, then <code>Device Information > Software</code>. If you don't have a high enough version, find your device in the <a href="/en-US/Firefox_OS/Developer_phone_guide">developer phone guide</a> and follow the instructions for upgrading.</li> + <li><strong>enable remote debugging: </strong>in the Settings app on the device, go to <code>Device information > More information > Developer</code>. + <ul> + </ul> + + <ul> + <li>Firefox OS 1.3 and earlier: "Remote Debugging" is just a simple checkbox. Check it.</li> + <li>Firefox OS 1.4 and later: "Remote Debugging" asks you to enable for just ADB, or for ADB and DevTools. Select "ADB and DevTools".</li> + </ul> + </li> + <li><strong>disable Screen lock on your device:</strong> in the Settings app on the device, go to <code>Screen Lock</code> and unchecking the <code>Lock Screen</code> checkbox. This is a good idea because when the screen gets locked, the phone connection gets lost, meaning it is no longer available for debugging.</li> + <li><strong>if you want unrestricted debugging privileges, including certified apps, built-in apps, and apps already installed on a real device</strong>: see the section on <a href="/en-US/docs/Tools/WebIDE#Unrestricted_app_debugging_%28including_certified_apps.2C_main_process.2C_etc.%29">Unrestricted app debugging (including certified apps, main process, etc.)</a>.</li> +</ul> + +<div class="note"> +<p><strong>Linux only:</strong></p> + +<ul> + <li>add a <code>udev</code> rules file, as documented in step 3 of this guide to <a href="http://developer.android.com/tools/device.html#setting-up">setting up an Android device</a>. The <code>idVendor</code> attribute to use for the Geeksphone is "05c6", and <a href="http://developer.android.com/tools/device.html#VendorIds">this page</a> lists other <code>idVendor</code> values.</li> +</ul> +</div> + +<div class="note"> +<p><strong>Windows only:</strong></p> + +<ul> + <li>you need to install drivers, as documented in step 3 of this guide to <a href="http://developer.android.com/tools/device.html#setting-up">setting up an Android device</a>. You can find drivers for Geeksphone devices on the <a href="http://downloads.geeksphone.com/">Geeksphone web site</a>. Windows 8 by default will not let you install unsigned drivers. See this tutorial on <a class="external external-icon" href="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html" title="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html">"How to install an unsigned driver on Windows 8"</a>.</li> + <li>if WebIDE can't see your device after following all the steps, you may have to <a class="external external-icon" href="http://blog.fh-kaernten.at/wehr/?p=1182">edit adb_usb.ini</a>.</li> +</ul> +</div> + +<p>If there are any other Android devices connected to your computer, disconnect them. Now connect the device to the computer using USB. You should see the device appear under "USB DEVICES":</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8045/webide-select-runtime-keon.png" style="width: 710px; height: 562px; display: block; margin-left: auto; margin-right: auto;"></p> + +<p>If you don't see your device, see the <a href="/en-US/docs/Tools/WebIDE/Troubleshooting">Troubleshooting</a> page.</p> + +<h3 id="Connecting_to_Firefox_for_Android">Connecting to Firefox for Android</h3> + +<p>From Firefox 36 onwards Android devices connected over USB and running Firefox for Android appear as a runtime under "USB devices". See the article on <a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE">connecting to Firefox for Android from WebIDE</a>.</p> + +<p>Before Firefox 36, you can <a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">connect to Firefox for Android without using WebIDE at all</a>, or can use WebIDE by setting up a <a href="/en-US/docs/Tools/WebIDE#Remote_runtime">custom remote runtime</a>.</p> + +<h3 id="Adding_a_Simulator">Adding a Simulator</h3> + +<p><span style="line-height: 1.5;">The <a href="/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> is <span style="line-height: 1.5;">a version of the higher layers of Firefox OS</span> that simulates a Firefox OS device, but runs on the desktop</span><span style="line-height: 1.5;">. </span><span style="line-height: 1.5;">It runs in a window the same size as a Firefox OS device, includes the Firefox OS user interface and built-in apps, and simulates many of the Firefox OS device APIs.</span></p> + +<p><span style="line-height: 1.5;">This means that in many cases, you don't need a real device to test and debug your app. </span></p> + +<p>The Simulator is big, so it doesn't ship inside Firefox but as a Firefox <a href="/en-US/Add-ons">add-on</a>. If you click "Install Simulator" in the Runtimes dropdown menu, you will go to a page from which you can install Simulators for various versions of Firefox OS.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8039/webide-install-simulator.png" style="width: 720px; height: 560px; display: block; margin-left: auto; margin-right: auto;">You can install as many as you like. Be patient, though: the Simulator is large and may take a few minutes to download. Once you've installed some Simulators you can close this "Extra Components" window, and the Simulators you've installed appear as options in the Runtimes dropdown menu:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8047/webide-select-runtime-keon-simulator.png" style="width: 712px; height: 559px; display: block; margin-left: auto; margin-right: auto;">To learn more about the Simulator, see its <a href="/en-US/docs/Tools/Firefox_OS_Simulator">documentation page</a>.</p> + +<h3 id="Custom_runtimes">Custom runtimes</h3> + +<h4 id="Remote_runtime">Remote runtime</h4> + +<p>With a custom remote runtime you can use an arbitrary hostname and port to connect to the remote device.</p> + +<p>Under the hood, Firefox OS devices and Android devices connect to the desktop using a program called the Android Debug Bridge, or <a href="http://developer.android.com/tools/help/adb.html">ADB</a>. By default, WebIDE uses an add-on called the ADB Helper: this simplifies the process for you by installing ADB and setting up port forwarding so the Firefox desktop tools can exchange messages with the device.</p> + +<p>This is convenient in most cases, but sometimes you might want to use ADB outside of WebIDE: for example, you might be running ADB directly from the command line. In that case you'll connect to the device by specifying a host and port using the <a href="http://developer.android.com/tools/help/adb.html#forwardports"><code>adb forward</code></a> command (example: <code>adb forward tcp:6000 localfilesystem:/data/local/debugger-socket</code>).<br> + <br> + If you then want to use WebIDE to connect as well, you should <a href="https://support.mozilla.org/en-US/kb/disable-or-remove-add-ons#w_how-to-disable-extensions-and-themes">disable the ADB Helper add-on</a> and connect WebIDE using the Custom runtime option, entering the host and port that you passed to <code>adb forward</code> (example: <code>localhost:6000</code>).</p> + +<p>Also, before Firefox 36, the ADB Helper does not yet support connecting to Firefox for Android, so if you want to connect WebIDE to Firefox for Android, you'll need to set up your own port forwarding and use a custom runtime. <a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">See more about connecting to Firefox for Android using ADB prior to Firefox 36</a>.</p> + +<h4 id="Valence-enabled_runtimes">Valence-enabled runtimes</h4> + +<p>If you have the <a href="/en-US/docs/Tools/Valence">Valence</a> add-on installed, you'll see three additional runtimes:</p> + +<ul> + <li>Chrome on Android</li> + <li>Safari on iOS</li> + <li>Chrome Desktop</li> +</ul> + +<p>For instructions on how to connect to these runtimes, see the relevant entry in the <a href="/en-US/docs/Tools/Remote_Debugging">Remote Debugging</a> page.</p> + +<h2 id="Selecting_a_runtime">Selecting a runtime</h2> + +<p>Once you've set up a runtime you can select it using the "Select Runtime" menu.</p> + +<ul> + <li>If you select a Simulator, WebIDE launches the Simulator.</li> + <li>If you select a Firefox OS device WebIDE connects to the device. On the device a dialog will ask you to confirm that you wish to connect: press "OK".</li> +</ul> + +<p>Now the "play" button in the center of the WebIDE toolbar is enabled: click it to install and run the app in the selected runtime.</p> + +<h3 id="Runtime_menu_items">Runtime menu items</h3> + +<p>When a runtime is selected, the Runtimes dropdown menu has up to five extra items:</p> + +<dl> + <dt><strong>Runtime Info</strong></dt> + <dd>Information on the current runtime</dd> + <dt><strong>Permissions Table</strong></dt> + <dd>A table summarising <a href="/en-US/Apps/Build/App_permissions">app permissions</a> for the current runtime, indicating, for each API and each <a href="/en-US/Marketplace/Options/Packaged_apps#Types_of_packaged_apps">app type</a>, whether access is allowed (✓), denied (✗), or whether the user is prompted (!)</dd> +</dl> + +<dl> + <dt><strong>Device Preferences</strong></dt> + <dd>A table listing, and letting you edit, the preferences that are made available in the runtime via the <a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIPrefService">Preferences service</a>. These are platform-level configuration values exposing the same set of data as Firefox's about:config (but for the device). Because these preferences are highly security-sensitive, you need to disable the <a href="/en-US/docs/Tools/WebIDE#Unrestricted_app_debugging_%28including_certified_apps.2C_main_process.2C_etc.%29">DevTools restricted privileges setting</a> before you can modify them.</dd> + <dt><strong>Device Settings</strong> (new in Firefox 38/Firefox OS 3)</dt> + <dd>A table listing, and letting you edit, the settings that can be controlled in the Firefox OS Settings app. Most things on the device which have a UI control to change (volume, alarm, etc.) are found in Device Settings. Because these settings are less sensitive than the device preferences, you can modify them without removing the restricted privileges setting. However, since this feature is new in Gecko 38 you need the WebIDE in Firefox 38 and a nightly build of Firefox OS or the Simulator.</dd> + <dt><strong>Screenshot</strong></dt> + <dd>A command to take a screenshot from the runtime.</dd> +</dl> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10185/webide-runtimes.png" style="width: 833px; height: 601px; display: block; margin-left: auto; margin-right: auto;"></p> + +<p> </p> + +<h2 id="Creating_and_opening_apps">Creating and opening apps</h2> + +<p>Under the "Open App" menu you get three options: create a new app, open a packaged app, and open a hosted app:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8049/webide-open-app-empty.png" style="width: 723px; height: 562px; display: block; margin-left: auto; margin-right: auto;"></p> + +<h3 id="Create_a_new_app">Create a new app</h3> + +<p>Select "New App..." to create a new app. You'll see a dialog offering you a choice between two templates, "Privileged Empty App" and "Privileged App".</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8053/webide-new-app.png" style="width: 739px; height: 591px; display: block; margin-left: auto; margin-right: auto;"></p> + +<p>Both templates are from Mozilla's <a href="https://github.com/mozilla/mortar">app template collection</a>, and provide you with the basic structure you need to get started. The "Privileged App" shows how an app can use permissions to load cross-origin content.</p> + +<p>Once you've selected a template you'll be asked to name the app and select a directory to store the files, and then the new app is opened in the <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">project editor</a>.</p> + +<h3 id="Open_a_packaged_app">Open a packaged app</h3> + +<p>Select "Open Packaged App..." to open a <a href="/en-US/Marketplace/Options/Packaged_apps">packaged app</a>. You'll be asked to select a directory containing the app's <a href="/en-US/Apps/Build/Manifest">manifest</a>, and the app will be opened in the <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">project editor</a>.</p> + +<h3 id="Open_a_hosted_app">Open a hosted app</h3> + +<p>Select "Open Hosted App..." to open a <a href="/en-US/Marketplace/Options/Hosted_apps">hosted app</a>. You'll be asked to enter a URL pointing to the app's <a href="/en-US/Apps/Build/Manifest">manifest</a>, and the app will be opened in the <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">project editor</a>.</p> + +<h2 id="Editing_apps">Editing apps</h2> + +<p>The project editor provides an environment for editing apps. There's a tree view on the left of all the files in the app: you can add and delete files here using a context menu. There's an editor pane on the right.</p> + +<h3 id="The_app_summary_page">The app summary page</h3> + +<p>When you first open or create an app, the editor pane is occupied by the app summary page, which is shown below:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8055/webide-new-app-editor.png" style="width: 846px; height: 625px; display: block; margin-left: auto; margin-right: auto;"></p> + +<p>You can always get back to the app summary page by clicking on the root of the tree on the left.</p> + +<h3 id="Manifest_validation">Manifest validation</h3> + +<p>WebIDE automatically checks the manifest for certain common problems. If it finds a problem it indicates that the app is invalid and describes the problem in the app's summary:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8063/webide-invalid-manifest.png" style="width: 847px; height: 626px; display: block; margin-left: auto; margin-right: auto;"></p> + +<p>Of course, you can edit the <a href="/en-US/Apps/Build/Manifest">manifest.webapp</a> file right in the project editor as well.</p> + +<h3 id="The_source_editor">The source editor</h3> + +<p>WebIDE uses the <a href="http://codemirror.net/">CodeMirror</a> source editor.</p> + +<h4 id="Source_editor_shortcuts">Source editor shortcuts</h4> + +<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "source-editor") }}</p> + +<h4 id="Code_completion">Code completion</h4> + +<p>When editing CSS and JavaScript, the editor provides autocomplete suggestions. CSS autocompletion is always enabled:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8057/webide-css-autocomplete.png" style="width: 849px; height: 628px; display: block; margin-left: auto; margin-right: auto;">To display autocomplete suggestions in JavaScript press Control + Space:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8059/webide-js-autocomplete.png" style="width: 867px; height: 653px; display: block; margin-left: auto; margin-right: auto;"></p> + +<h4 id="Inline_documentation">Inline documentation</h4> + +<p>The editor also shows inline documentation for JavaScript. Press Shift + Space to see a popup containing documentation for the symbol your cursor is on:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8061/webide-js-inline-docs.png" style="width: 872px; height: 652px; display: block; margin-left: auto; margin-right: auto;"></p> + +<p>Clicking the <code>[docs]</code> link in the popup will take you to the MDN page for the symbol.</p> + +<h4 id="Saving_files">Saving files</h4> + +<p>For changes to your files to take effect you need to save them. Files with unsaved changes get an asterisk next to their name in the tree view, and you can save files using the menu or Control+S (Command+S on Mac OS X).</p> + +<h3 id="Removing_projects">Removing projects</h3> + +<p>To remove an app from WebIDE, go to the <a href="/en-US/docs/Tools/WebIDE#The_app_summary_page">app summary page</a> and click "Remove Project".</p> + +<h2 id="Running_a_custom_build_step">Running a custom build step</h2> + +<div class="geckoVersionNote"> +<p>New in Firefox 37.</p> +</div> + +<p>For some use cases you need to run a custom command before pushing your app to the device. For example, you might want to satisfy JavaScript dependencies or minify CSS, or use WebIDE to develop Gaia apps or Cordova apps, both of which require a custom build step.</p> + +<p>From Firefox 37 you can do this by including a file called "package.json" in the root of your app. This is the same file that's used to <a href="https://docs.npmjs.com/files/package.json">package a node.js library</a>, so you might already have one in the root of your project. If you don't, you can create one for this purpose.</p> + +<p>Inside package.json, WebIDE looks for a property called "webide". The table below summarises the syntax of "webide":</p> + +<table class="standard-table"> + <tbody> + <tr> + <td style="width: 10%;"><code>webide</code></td> + <td style="width: 10%;"> </td> + <td style="width: 10%;"> </td> + <td style="width: 70%;"> + <p>Object containing instructions for WebIDE.</p> + + <p>This may contain two properties, both optional: "<code>prepackage</code>" and "<code>packageDir</code>".</p> + </td> + </tr> + <tr> + <td> </td> + <td><code>prepackage</code></td> + <td> </td> + <td> + <p>Specifies a command-line command for WebIDE to run before pushing the app to the runtime.</p> + + <p>This may be a string, in which case the command is just executed as-is, or may be an object which must contain "<code>command</code>", and may contain any of "<code>env</code>", "<code>args</code>", and "<code>cwd</code>".</p> + </td> + </tr> + <tr> + <td> </td> + <td> </td> + <td><code>command</code></td> + <td> + <p>The command to execute in the command shell.</p> + + <p>For example: "<code>echo</code>".</p> + </td> + </tr> + <tr> + <td> </td> + <td> </td> + <td><code>env</code></td> + <td> + <p>Any environment variables to set.</p> + + <p>This is specified as an array of strings in the form "NAME=value". For example: <code>["NAME=world"]</code></p> + </td> + </tr> + <tr> + <td> </td> + <td> </td> + <td><code>args</code></td> + <td> + <p>Any arguments to pass along with the command.</p> + + <p>This is specified as an array of strings.</p> + </td> + </tr> + <tr> + <td> </td> + <td> </td> + <td><code>cwd</code></td> + <td> + <p>The directory from which to run the command.</p> + + <p>This may be absolute or relative to the current directory.</p> + </td> + </tr> + <tr> + <td> </td> + <td><code>packageDir</code></td> + <td> </td> + <td> + <p>The directory from which WebIDE should look for the app to push to the runtime.</p> + + <p>Use this if you want the project in WebIDE to be the source from which to build a packaged app. The build step specified in <code>prepackage</code> would place the built app in an output directory, you will specify the output directory in <code>packageDir</code>, and WebIDE will install the app from that output directory rather than the project directory.</p> + + <p>This property is optional, and if it's omitted WebIDE will package the app from the project root, just as if package.json was omitted.</p> + </td> + </tr> + </tbody> +</table> + +<h3 id="Examples">Examples</h3> + +<p>A "package.json" to build a Gaia app:</p> + +<pre class="brush: json">{ + "webide": { + "prepackage": { + "command": "make", + "env": ["APP=settings"], + "cwd": "../.." + }, + "packageDir": "../../build_stage/settings/" + } +}</pre> + +<p>A "package.json" for working with Cordova:</p> + +<pre class="brush: json">{ + "webide": { + "prepackage": "cordova prepare", + "packageDir": "./platforms/firefoxos/www" + } +}</pre> + +<h2 id="Running_and_debugging_apps">Running and debugging apps</h2> + +<p>When you're ready to run the app, you need to <a href="/en-US/docs/Tools/WebIDE#Selecting_a_runtime">select a runtime from the "Select Runtime" dropdown menu</a>. If you don't have any available runtimes here, find out how to add some in <a href="/en-US/docs/Tools/WebIDE#Setting_up_runtimes">Setting up runtimes</a>.</p> + +<p>The "play" button in the center of the WebIDE toolbar is now enabled: click it to install and run the app in the selected runtime:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8065/webide-running.png" style="width: 1314px; height: 718px; display: block; margin-left: auto; margin-right: auto;">To debug the app, click the "Pause" button and the Developer Tools <a href="/en-US/docs/Tools/Tools_Toolbox">Toolbox</a> appears, connected to your app:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8067/webide-debugging.png" style="width: 1310px; height: 688px; display: block; margin-left: auto; margin-right: auto;"></p> + +<div class="geckoVersionNote"> +<p>From Firefox 36 onwards, the "Pause" button is replaced with a wrench icon.</p> +</div> + +<p>Exactly which tools you'll have available depends on the runtime, but you will at least have the basics: the <a href="/en-US/docs/Tools/Page_Inspector">Inspector</a>, <a href="/en-US/docs/Tools/Web_Console">Console</a>, <a href="/en-US/docs/Tools/Debugger">JavaScript Debugger</a>, <a href="/en-US/docs/Tools/Style_Editor">Style Editor</a>, <a href="/en-US/docs/Tools/Profiler">Profiler</a> and <a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a>. Just as in a web page, any changes you make in the tools are visible immediately in the app, but are not persistent. Conversely, any changes you make in the editor pane can be saved straight back to disk, but are not visible without restarting the app.</p> + +<h3 id="Unrestricted_app_debugging_(including_certified_apps_main_process_etc.)">Unrestricted app debugging (including certified apps, main process, etc.)</h3> + +<p>You can run the debugger against the simulator, b2g desktop, or a real device.</p> + +<p>With the Simulator, if you click on the app dropdown menu while the runtime is selected, you can see and debug not only your app but all apps running in that runtime, including <a href="/en-US/Marketplace/Options/Packaged_apps#Certified_app">certified apps</a>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8069/webide-debugging-builtin.png" style="width: 1302px; height: 681px; display: block; margin-left: auto; margin-right: auto;"></p> + +<p><br> + However, when connecting to a real device we have a security policy in force:</p> + +<ul> + <li>On devices running Firefox OS versions up to 2.1, all installed apps on device that are <strong>not</strong> certified apps (so privileged and web / regular apps) appear in "Runtime Apps" by default.</li> + <li>On Firefox 2.1 and above, we changed this so that only apps installed via DevTools / WebIDE appear in "Runtime Apps", regardless of app type. We did this to protect potentially sensitive data that could be present in apps.</li> +</ul> + +<p>To remove this restriction:</p> + +<ul> + <li>The device must be running a development build of Firefox OS 1.2+</li> + <li>You must disable the <code>DevTools restricted privileges</code> setting.</li> +</ul> + +<p>To disable <code>DevTools restricted privileges</code>, connect to the runtime, and then, in the menu, go to <code>Runtime > Runtime Info</code>. The path then differs depending on what you are debugging against:</p> + +<ul> + <li>Real device + <ul> + <li>If it can be rooted, clicking <code>"request higher privileges"</code> will enable unrestricted app debugging (Firefox OS will restart). You may need to select your device again in the 'Select Runtime' drop down.</li> + </ul> + </li> + <li>Simulator + <ul> + <li>The simulators come with unrestricted app debugging enabled by default.</li> + </ul> + </li> + <li>B2G desktop + <ul> + <li>Manually edit the B2G desktop client <a href="https://developer.mozilla.org/en-US/Firefox_OS/Using_the_App_Manager#Using_the_B2G_desktop_client">preferences</a> before connecting to enable unrestricted app debugging.</li> + </ul> + </li> +</ul> + +<p>Now (or after a restart of the B2G desktop client) in WebIDE you should see all the apps on the device.</p> + +<div class="note"> +<p><strong>Note</strong>: As indicated above, to enable unrestricted privileges on a real device through WebIDE you'll need a rooted device. There is however a developer setting available in Firefox OS 2.2 onwards called <a href="/en-US/Firefox_OS/Debugging/Developer_settings#Reset_and_enable_full_DevTools">Reset and enable full DevTools</a> — when activated this will wipe all user data (for security reasons), reset the device, and enable unrestricted priviledges on <em>any</em> device.</p> +</div> + +<h2 id="Monitoring_performance">Monitoring performance</h2> + +<p>If you're interested in the performance of your apps, there are a few ways to measure their impact on the runtime in WebIDE:</p> + +<ul> + <li>The <a href="/docs/Tools/WebIDE/Monitor">Monitor</a> panel offers a good overview of a device's performance. This can help you detect problems, e.g. a sudden, excessive increase in an app's memory usage (leak).</li> + <li>The <a href="/docs/Tools/Profiler">Profiler</a> tool gives you a way to analyze a single app's footprint in great detail. This is especially useful when investigating a known performance problem.</li> +</ul> + +<h2 id="Troubleshooting">Troubleshooting</h2> + +<p>If you have any problems working with WebIDE, see the <a href="/en-US/docs/Tools/WebIDE/Troubleshooting">Troubleshooting</a> page.</p> + +<p> </p> + +<p> </p> diff --git a/files/ar/tools/webide/troubleshooting/index.html b/files/ar/tools/webide/troubleshooting/index.html new file mode 100644 index 0000000000..9841f92d7d --- /dev/null +++ b/files/ar/tools/webide/troubleshooting/index.html @@ -0,0 +1,107 @@ +--- +title: WebIDE Troubleshooting +slug: Tools/WebIDE/Troubleshooting +translation_of: Archive/WebIDE/Troubleshooting +--- +<h2 id="توصيل_جهاز_فايرفوكس_OS"><u><em><strong><font><font>توصيل جهاز فايرفوكس OS</font></font></strong></em></u></h2> + +<p><font><font>إذا كنت تحاول توصيل جهاز فايرفوكس OS لWebIDE وأنها لا تظهر، وهنا بعض الأشياء التي يمكنك تجربتها:</font></font></p> + +<ul> + <li><font><font>تحقق من النسخة فايرفوكس OS: تأكد من جهازك تشغيل </font></font><strong><font><font>فايرفوكس OS 1.2 / 1.2 Boot2Gecko أو </font></font></strong><font><font>أعلى. </font><font>التحقق من إصدار، انتقل إلى إعدادات التطبيق على الجهاز، ثم </font></font><code><font><font>معلومات الجهاز> </font></font></code><font><font>البرامج. </font><font>إذا لم يكن لديك نسخة عالية بما فيه الكفاية، العثور على جهازك في </font></font><a href="/en-US/Firefox_OS/Developer_phone_guide"><font><font>دليل الهاتف المطور</font></font></a><font><font> واتبع الإرشادات لرفع مستواها.</font></font></li> + <li><font><font>تمكين تصحيح البعيد: في التطبيق إعدادات على الجهاز، انتقل إلى </font></font><code><font><font>المعلومات الأجهزة> مزيد من المعلومات> </font></font></code><font><font>المطور.</font></font> + <ul> + <li><font><font>فايرفوكس OS 1.3 و في وقت سابق: "التصحيح عن بعد" هو مجرد مربع بسيط. </font><font>ضع علامة في المربع.</font></font></li> + <li><font><font>فايرفوكس OS 1.4 و في وقت لاحق: "التصحيح عن بعد" يطلب منك لتمكين للتو ADB، أو لADB وDevTools. </font><font>حدد "ADB وDevTools".</font></font></li> + </ul> + </li> + <li><font><font>تعطيل قفل الشاشة على جهازك: في التطبيق إعدادات على الجهاز، انتقل إلى </font></font><code><font><font>شاشة قفل</font></font></code><font><font> وإلغاء تحديد </font></font><code><font><font>قفل الشاشة</font></font></code><font><font> مربع. </font><font>هذا هو فكرة جيدة لأنه عندما يحصل على قفل الشاشة، يضيع اتصال الهاتف، مما يعني أنها لم تعد متوفرة من أجل التصحيح.</font></font></li> + <li><font><font>تأكد من أنك لم توصيل الهاتف الروبوت في نفس الوقت الهاتف فايرفوكس OS لجهاز الكمبيوتر الخاص بك.</font></font></li> + <li><font><font>التحقق من كابل USB الذي تستخدمه:</font></font> + <ul> + <li><font><font>محاولة الفصل وreplugging في كابل USB.</font></font></li> + <li><font><font>حاول توصيل كابل USB بمنفذ مختلفة على جهاز الكمبيوتر الخاص بك. </font><font>قد يكون لديك بالتناوب بين الموانئ.</font></font></li> + <li><font><font>حاول كبل USB مختلف. </font><font>الكابلات التي تأتي مع الهواتف وغالبا ما تكون ذات نوعية رديئة وتفشل في كثير من الأحيان.</font></font></li> + <li><font><font>حاول كبل USB أقصر. </font><font>من المعروف أن كابلات USB طويلة لا تعمل بشكل جيد جدا.</font></font></li> + </ul> + </li> + <li><font><font>حاول تعطيل وإعادة تمكينه التصحيح عن بعد في تطبيق الإعدادات على الجهاز.</font></font></li> + <li><font><font>إذا </font></font><a href="/en-US/docs/Tools/WebIDE#Custom_runtimes"><font><font>قمت بتعطيل ADB الملحق </font></font></a><font><font>مساعد، </font><font>هل بنجاح تشغيل </font></font><code><font><font>إلى الأمام ADB</font></font></code><font><font> الأمر؟</font></font></li> + <li><font><font>إذا كنت تستخدم لينكس:</font></font> + <ul> + <li><font><font>تأكد من أنك أضاف </font></font><code><font><font>ديف</font></font></code><font><font> ملف النظام، كما هو موثق في الخطوة 3 من هذا الدليل </font></font><a class="external external-icon" href="http://developer.android.com/tools/device.html#setting-up"><font><font>لإنشاء </font><font>جهاز </font></font></a><font><font>الروبوت. </font></font><code><font><font>وidVendor</font></font></code><font><font> السمة لاستخدامه في Geeksphone هو "05c6"، </font></font><a class="external external-icon" href="http://developer.android.com/tools/device.html#VendorIds"><font><font>والصفحة </font><font>هذه</font></font></a><font><font> القوائم الأخرى </font></font><code><font><font>idVendor</font></font></code><font><font> القيم. </font><font>المقبل، تشغيل </font></font><code><font><font>الأجهزة بنك التنمية الاسيوى</font></font></code><font><font> لتأكد من أن الجهاز هو في القائمة. </font><font>اذا كان الجهاز يبدو أن "لا إذن"، تحتاج إلى إعادة تشغيل الخادم مصرف التنمية الآسيوي (مثل </font></font><code><font><font>بنك التنمية الاسيوى قتل خادم، بنك التنمية الآسيوي بداية </font></font></code><font><font>خادم).</font></font></li> + </ul> + </li> + <li><font><font>إذا كنت تستخدم ويندوز:</font></font> + <ul> + <li><font><font>تحتاج إلى تثبيت برامج التشغيل، كما هو موثق في الخطوة 3 من هذا الدليل </font></font><a class="external external-icon" href="http://developer.android.com/tools/device.html#setting-up"><font><font>لإنشاء </font><font>جهاز </font></font></a><font><font>الروبوت. </font><font>يمكنك العثور على برامج تشغيل لأجهزة Geeksphone على </font></font><a class="external external-icon" href="http://downloads.geeksphone.com/"><font><font>موقع على شبكة الإنترنت Geeksphone</font></font></a><font><font> والسائقين لأجهزة جوجل على </font></font><a href="http://developer.android.com/sdk/win-usb.htm"><font><font>موقع جوجل على شبكة </font></font></a><font><font>الإنترنت. </font><font>ويندوز 8 بشكل افتراضي لن تسمح لك تثبيت برامج التشغيل غير الموقعة. </font><font>نرى هذا البرنامج التعليمي على </font></font><a class="external-icon external" href="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html" title="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html"><font><font>"كيفية تثبيت برنامج تشغيل غير الموقعة على ويندوز </font></font></a><font><font>8".</font></font></li> + <li><font><font>إذا WebIDE لا تستطيع رؤية الجهاز بعد اتباع جميع الخطوات، قد تضطر إلى </font></font><a class="external-icon external" href="http://blog.fh-kaernten.at/wehr/?p=1182"><font><font>تعديل </font></font></a><font><font>adb_usb.ini.</font></font></li> + </ul> + </li> + <li><strong><font><font>اذا أنت </font></font></strong> + <ul> + <li><strong><font><font>إذا كنت تحصل أخطاء مهلة ربط إلى كل من المحاكاة والأجهزة الحقيقية، قد يكون غير قادر على الاتصال LOCALHOST بسبب الخ / ملف فارغ / تستضيف. </font><font>يمكنك حل المشكلة عن طريق ملء الملف والكشف ذاكرة التخزين المؤقت DNS </font></font><a href="https://discussions.apple.com/thread/2729411?tstart=0"><font><font>كما هو موضح </font></font></a><font><font>هنا.</font></font></strong></li> + <li><strong><font><font>إذا كنت من مستخدمي EasyTether، وسوف تحتاج إلى إزالة أو تعطيل EasyTether: </font></font><code><font><font>سودو kextunload /System/Library/Extensions/EasyTetherUSBEthernet.kext</font></font></code></strong></li> + </ul> + </li> +</ul> + +<h3 id="التصحيح_غير_المقيد_(بما_في_ذلك_التطبيقات_المعتمدة،_المدمج_في_تطبيقات،_تطبيقات_مثبتة_مسبقا_على_الجهاز)"><font><font>التصحيح غير المقيد (بما في ذلك التطبيقات المعتمدة، المدمج في تطبيقات، تطبيقات مثبتة مسبقا على الجهاز)</font></font></h3> + +<p><font><font>إذا كنت تجد أنه لا يمكن تصحيح التطبيقات المعتمدة، المدمج في تطبيقات، أو تطبيقات مثبتة مسبقا على الجهاز الحقيقي، فإنك قد تكون قادمة عبر تقييد السياسة الأمنية امتيازات WebIDE ل. </font><font>لمعرفة المزيد، راجع القسم الخاص </font></font><a href="/en-US/docs/Tools/WebIDE#Unrestricted_app_debugging_%28including_certified_apps.2C_main_process.2C_etc.%29"><font><font>غير المقيد تصحيح التطبيق (بما في ذلك التطبيقات المعتمدة، والعملية الرئيسية، </font></font></a><font><font>الخ).</font></font></p> + +<h2 id="الاتصال_فايرفوكس_لأندرويد"><font><font>الاتصال فايرفوكس لأندرويد</font></font></h2> + +<p><font><font>إذا كنت تحاول الاتصال مثيل فايرفوكس يعمل على نظام التشغيل أندرويد وأنها لا تظهر، وهنا بعض الأشياء التي يمكنك تجربتها:</font></font></p> + +<ul> + <li><font><font>التحقق من إصدار فايرفوكس الخاص بك: تأكد من جهازك تشغيل </font></font><strong><font><font>فايرفوكس 36 أو </font></font></strong><font><font>أعلى. </font><font>سوف WebIDE لم يكشف الإصدارات القديمة تلقائيا، لذلك تحتاج إلى تمكين ميناء الشحن والاتصال إلى ميناء الجهاز - اتبع التعليمات </font><font>هنا.</font></font></li> + <li><font><font>تأكد من حصولك على تمكين تصحيح الأخطاء عن بعد في فايرفوكس: فتح فايرفوكس لالروبوت، افتح القائمة الخاصة، حدد </font></font><code><font><font>إعدادات، ثم اضغط على مربع في </font></font></code><code><font><font>أدوات المطور> تصحيح الأخطاء عن </font></font></code><font><font>بعد.</font></font></li> + <li><font><font>تأكد من أن يتم السماح USB التصحيح في إعدادات المطور للجهاز</font></font></li> + <li><font><font>إذا كنت لا تزال لا ترى جهازك في إطار WebIDE، حاول تبديل </font></font><code><font><font>التصحيح عن بعد</font></font></code><font><font> على الهاتف.</font></font> + <ul> + <li><font><font>قطع جهازك من جهاز الكمبيوتر الخاص بك وإيقاف </font></font><code><font><font>التصحيح عن بعد</font></font></code><font><font> على الهاتف.</font></font></li> + <li><font><font>أعد توصيل الجهاز وتشغيل </font></font><code><font><font>تصحيح الأخطاء عن بعد</font></font></code><font><font> - وهذا إعادة تشغيل مثيل المصحح على الهاتف.</font></font></li> + <li><font><font>حاول الاتصال عبر WebIDE مرة أخرى.</font></font></li> + </ul> + </li> +</ul> + +<h2 id="الاتصال_المتصفحات_الأخرى_(كروم،_سفاري)"><font><font>الاتصال المتصفحات الأخرى (كروم، سفاري)</font></font></h2> + +<p><a class="here" href="https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android"><font><font>WebIDE يستفيد من </font></font></a><a href="/en-US/docs/Tools/Firefox_Tools_Adapter"><font><font>فالنسيا (سابقا فايرفوكس أدوات محول)</font></font></a><font><font> للوصول إلى المتصفحات الأخرى، مثل كروم وسفاري. </font></font></p> + +<p><font><font>إذا كنت تواجه مشكلة في الاتصال لهذه المتصفحات الأخرى، والتحقق من خطوات الإعداد والملاحظات الأخرى لهذه المتصفحات على </font></font><a href="/en-US/docs/Tools/Firefox_Tools_Adapter"><font><font>الصفحة </font></font></a><font><font>فالنسيا.</font></font></p> + +<h2 id="غير_قادر_على_تحميل_قائمة_المشروع"><font><font>غير قادر على تحميل قائمة المشروع</font></font></h2> + +<p><font><font>إذا كنت WebIDE مفتوحة في إصدار واحد من فايرفوكس، ثم الرجوع إلى إصدار فايرفوكس السابق مع نفس التشكيل الجانبي، قد ترى الخطأ "غير قادر على تحميل قائمة المشروع" عند فتح WebIDE في فايرفوكس الإصدار السابق.</font></font></p> + +<p><font><font>يمكن أن يحدث هذا عندما يكون النظام التخزين التي WebIDE الاستخدامات </font></font><a href="/en-US/docs/Web/API/IndexedDB_API"><font><font>(المفهرسة</font></font></a><font><font> يحتاج) لنقل أو إعادة هيكلة الملفات الداخلية لفايرفوكس الإصدار الأحدث. </font><font>يصبح قائمة المشروع ثم لا يمكن الوصول إليها بشكل فعال في الإصدارات القديمة من فايرفوكس.</font></font></p> + +<p><font><font>تم فقدان أية بيانات، ولكنك لن تحتاج إلى الاستمرار في استخدام أحدث نسخة من فايرفوكس الذي تم استخدامه مع ملف التعريف الخاص بك للحصول على قائمة المشروع مرة أخرى.</font></font></p> + +<p><font><font>إذا تريد حقا أن استخدام النسخة القديمة من فايرفوكس، يمكنك محاولة حذف القائمة للتو المشروع على النحو التالي، ولكن هذا غير معتمد ويمكن أن تؤدي إلى مشاكل أخرى أو فقدان بيانات إضافية:</font></font></p> + +<ol> + <li><font><font>وثيق فايرفوكس</font></font></li> + <li><font><font>البحث فايرفوكس الدليل ملفك الشخصي</font></font></li> + <li><font><font>العثور على </font></font><code><font><font>تخزين</font></font></code><font><font> مجلد داخل الدليل الشخصي</font></font></li> + <li><font><font>تحت جزء من هذه الشجرة الملف، يجب أن يكون هناك ملفات و / أو الدلائل التي تبدأ مع </font></font><code><font><font>4268914080AsptpcPerjo</font></font></code><font><font> (اسم تجزئته من قاعدة البيانات)</font></font></li> + <li><font><font>إزالة أي من هذه الملفات والدلائل</font></font></li> + <li><font><font>بدء فايرفوكس وWebIDE مرة أخرى</font></font></li> +</ol> + +<h2 id="تمكين_تسجيل"><font><font>تمكين تسجيل</font></font></h2> + +<p><font><font>يمكنك أيضا تمكين تسجيل مطول لجمع التشخيص:</font></font></p> + +<ol start="1" style="list-style-type: decimal;"> + <li><font><font>مفتوح </font></font><a class="external external-icon" href="http://kb.mozillazine.org/About:config"><font><font>حول: </font></font></a><font><font>التكوين، </font><font>وإضافة تفضيل جديد يسمى </font></font><code><font><font>extensions.adbhelper@mozilla.org.sdk.console.logLevel،</font></font></code><font><font> مع قيمة السلسلة </font></font><code><font><font>جميع، وتعيين </font></font></code><code><font><font>extensions.adbhelper@mozilla.org.debug</font></font></code><font><font> إلى </font><font>صحيح.</font></font></li> + <li><font><font>في </font></font><a class="external external-icon" href="https://support.mozilla.org/en-US/kb/disable-or-remove-add-ons"><font><font>إدارة الوظائف </font></font></a><font><font>الإضافية، </font><font>تعطيل ومن ثم إعادة تمكين ADB مساعد الإضافة.</font></font></li> + <li><font><font>فتح </font></font><a href="https://developer.mozilla.org/en-US/docs/Tools/Browser_Console"><font><font>المتصفح وحدة </font></font></a><font><font>التحكم، </font><font>وعليك الآن أن نرى رسائل تعزية مسبوقة مع </font></font><code><font><font>بنك التنمية </font></font></code><font><font>الآسيوي. </font><font>إذا لا تعني الرسائل لك شيئا، </font></font><a href="/en-US/docs/Tools/WebIDE/Troubleshooting#Get_help"><font><font>اطلب </font></font></a><font><font>المساعدة.</font></font></li> +</ol> + +<h2 id="الحصول_على_المساعدة"><font><font>الحصول على المساعدة</font></font></h2> + +<p><font><font>انتقل إلى </font></font><a class="external external-icon" href="https://wiki.mozilla.org/DevTools/GetInvolved#Communication"><font><font>غرفة #devtools على IRC</font></font></a><font><font> وسنحاول مساعدة.</font></font></p> 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 +--- +<p class="summary" dir="rtl"><span class="seoSummary">تعني <strong>الإتاحة</strong> (Accessibility)، في مفهوم تطوير الويب، تمكين أكبر قدر ممكن من الأشخاص من استخدام مواقع الويب، حتى وإن كانت قدراتهم محدودة بطريقةٍ ما (لديهم إعاقات). يوجد في هذه الصفحة معلومات حول تطوير محتوى سهل الوصول إليه (مُتاح).</span></p> + +<p dir="rtl">"غالباً ما تستخدم الإتاحة لوصف وسائل التسهيل التي تساعد الأشخاص ممن لديهم إعاقات، مثل المقاعد المُتحركة". هذا ممكن أن يمتد ليشمل لافتات برايل (لافتات مُخصصة للإشارة لشيء ما)، الرصائف المُنحدِرة للكراسي المتحركة (التي تساعد الكرسي المُتحرِك على الصعود بيسر)، الإشارات الصوتيّة عند معابر المُشاة، تصاميم المواقع، وهلمَّ جرا." <a class="external" href="http://en.wikipedia.org/wiki/Accessibility">مقالة ويكبيديا عن الإتاحة</a> (<a href="https://ar.wikipedia.org/wiki/%D8%A5%D8%AA%D8%A7%D8%AD%D8%A9">النسخة العربيّة</a>)</p> + +<p dir="rtl">"<strong>صُمِمَ الويب بشكل أساسي ليعمل لدى الجميع</strong>، بغض النظر عن عتادهم (الأجهزة التي يستخدمونها)، تجهيزاتِهم البرمجيّة (نظام التشغيل، المتُصفح ...إلخ)، لغتهم، ثقافتُهم، مكان تواجدهم، أو قدرتهم الجسديّة أو العقليّة. عندما يحقق الويب هذه الأهداف، سيكون مُتاح للوصول من قبل الأشخاص الذين لديهم قدرات سمعيّة، حركيّة، بصريّة، ومعرفيّة مختلفة".<a href="http://www.w3.org/standards/webdesign/accessibility" title="http://www.w3.org/standards/webdesign/accessibility">الإتاحة في موسوعة </a></p> + +<div class="cleared topicpage-table"> +<div class="section"> +<h2 class="Key_accessibility_tutorials" dir="rtl" id="Key_accessibility_tutorials" name="Key_accessibility_tutorials">دروس رئيسيّة</h2> + +<p dir="rtl">يحتوي <a href="/ar/docs/Learn/Accessibility">قسم تعلم الإتاحة</a> على دورات دائمة التحديث وعصريّة تُغطي جميع نقاط الإتاحة الأساسيّة:</p> + +<dl> + <dt dir="rtl"><a href="/ar/docs/Learn/Accessibility/What_is_accessibility">ما هي الإتاحة؟</a></dt> + <dd dir="rtl">تُمثِل هذه المقالة بداية للوحدة، بحيث تعطيك لمحة عن ماهيّة الإتاحة، فهي تتضمن معلومات عن مجموعة الأشخاص الذين يشملهم هذا المصطلح ولماذا، الأدوات المُختلفة التي تُستخدَم للتعامل مع الويب، وكيف يمكننا جعل الإتاحة جزءً لا يتجزأ من عمليّة تطوير الويب.</dd> + <dt dir="rtl"><a href="/ar/docs/Learn/Accessibility/HTML">أساسيات مهمة في لغة ترميز النص الفائق للعمل مع الإتاحة</a></dt> + <dd dir="rtl">يمكن جعل جزء كبير من محتوى الويب مُتاحاً؛ عبر التأكُّد من استخدام عناصر لغة ترميز النص الفائق الصحيحة في أماكنها الصحيحة وبالوقت المناسب. هذه المقالة تتعمق بالتفصيل في كيفيّة استخدام هذه اللغة لضمان الاستفادة بالحد الأقصى من الإتاحة.</dd> + <dt dir="rtl"><a href="/ar/docs/Learn/Accessibility/CSS_and_JavaScript">أفضل الطرق لاستخدام صفحات الأنماط الانسيابية والجافاسكربت لإتاحة أفضل</a></dt> + <dd dir="rtl">يُمكِّن أيضاً الاستخدام الصحيح لهاتين اللغتين توفير تجربة ويب أفضل، أو يمكن أن يجعلها أسوء إذا أُسيءَ استخدام هاتِه اللغات. تُعَنوِن هذه المقالة بعض استخدامات صفحات الأنماط الانسيابية والجافاسكربت الفضلى التي يجب اخذها بعين الاعتبار لضمان جعل المحتوى المُعقَد مُتاحاً قدر الإمكان.</dd> + <dt dir="rtl"><a href="/ar/docs/Learn/Accessibility/WAI-ARIA_basics">أساسيات تقنيّة WAI-ARIA</a></dt> + <dd dir="rtl">إكمالاً للمقالة السابقة، من الصعب في بعض الأحيان إنشاء عنصر تحكم رسوميّة تستخدم عناصر من لغة ترميز النص الفائق غير دلاليّة (أي وظيفتها غير واضحة من اسمها، مما يجعل تذكر العنصر وفهمه أصعب - unsemantic) ومحتوى جافاسكربت مُحدَث تلقائياً. يمكن لهذه التقنيّة المساعدة في حل هذه المشكلات عبر إضافة المزيد من العناصر الدلاليّة (semantic) التي يُمكِن للمتصفحات التعرُّف عليها واستخدامها لجعل المستخدمين يفهمون الأمور بشكل أوضح. سنشرح في هذه المقالة كيفيّة استخدام هذه التقنيّة لتحسين التجربة الإتاحيّة.</dd> + <dt dir="rtl"><a href="/ar/docs/Learn/Accessibility/Multimedia">الوسائط المُتاحة</a></dt> + <dd dir="rtl">هناك فئة أخرى من المحتوى تُحدِث مشاكل إتاحيّة وهي الوسائط المتعددة (multimedia) - محتوى الفيديو، الصوت، والصورة يجب أن يُعطى نصاً بديلاً يشرحه؛ كي تتمكن التقنيات المعاونة (المساعدة - assistive) ومستخدميها من فهم المحتوى. تشرح هذه المقالة كيفيّة القيام بذلك.</dd> + <dt dir="rtl"><a href="/ar/docs/Learn/Accessibility/Mobile">الإتاحة الخلويّة</a> (Mobile Accessibility)</dt> + <dd dir="rtl">نظراً لشيوع الوصول إلى محتوى الويب عبر الهواتف، ولامتلاك منصات الهواتف الشهيرة، مثل iOS والأندرويد، على أدوات لهذا الغرض، أصبح من المهم الاهتمام بإتاحة محتواك على هذه المنصات. تتعمق هذه المقالة في الاعتبارات التي يجب أن تؤخذ عند إتاحة محتوى الويب للهواتف.</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Other_documentation" dir="rtl" id="Other_documentation" name="Other_documentation">توثيقات أخرى</h2> + +<dl> + <dt dir="rtl"><a href="/ar/docs/Web/Accessibility/Understanding_WCAG">دروس إرشاديّة لفهم إتاحة محتوى الويب</a></dt> + <dd dir="rtl">توفر مجموعة المقالات هذه شرح سريع لمساعدتك على فهم الخطوات التي يجب أن تؤخذ لتطبيق التوصيات المشروحة في أدلة (guidelines) W3C لإتاحة محتوى الويب 2.0 (إختصاراً WCAG).</dd> + <dt dir="rtl"><a href="/ar/Accessibility/Keyboard-navigable_JavaScript_widgets" title="en/Accessibility/Keyboard-navigable JavaScript widgets">عناصر الجافا سكربت القابلة للتنقل بلوحة المفاتيح</a></dt> + <dd dir="rtl">حتى الآن، يفتقر مطورو الويب الذين يقومون بصناعة عناصر رسوميّة (widgets) باستخدام العنصر <code><div></code> و <code><span></code> إلى التقنيات المناسبة. <strong>الوصوليّة بلوحة المفاتيح</strong> (Keyboard accessibility) هي من أقل متطلبات الإتاحة والتي يجب على المطورين الاهتمام بها.</dd> + <dt dir="rtl"><a href="/ar/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">تطبيقات الأنترنت سهلة الوصول</a> (ARIA)</dt> + <dd dir="rtl">مجموعة من المقالات تشرح كيفيّة استخدام تقنيّة ARIA لجعل مستندات لغة ترميز النص الفائق سهلة الوصول بشكل أكبر.</dd> + <dt dir="rtl"><a href="/ar/docs/Accessibility/AT_Development" title="AT Development">تطوير التقنيات المعاونة</a> (AT)</dt> + <dd dir="rtl">مجموعة من المقالات مخصصة لمطورين التقنيات المعاونة.</dd> + <dt dir="rtl"><a href="/ar/docs/Web/Accessibility/Mobile_accessibility_checklist">قائمة تقنيات الإتاحة للجوال</a></dt> + <dd dir="rtl">تهدف هذه المقالة إلى توفير قائمة مُختصرة لمتطلبات الإتاحة لمطورين تطبيقات الهواتف.</dd> +</dl> + +<p dir="rtl"><span class="alllinks"><a href="https://developer.mozilla.org/en-US/docs/tag/%D8%A7%D9%84%D8%A5%D8%AA%D8%A7%D8%AD%D8%A9">عرض المزيد...</a></span></p> +</div> +</div> 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 +--- +<h4 id="APIRefDOM">{{APIRef("DOM")}}</h4> + +<p>The <code><strong>Attr</strong></code> 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 <code>Attr</code> types.</p> + +<p>{{InheritanceDiagram}}</p> + +<div class="warning"><strong>Warning: </strong>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 <a href="#Deprecated_properties_and_methods">Deprecated properties and methods</a> for a complete list.</div> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt>{{domxref("Attr.name", "name")}} {{readOnlyInline}}</dt> + <dd>The attribute's name.</dd> + <dt>{{domxref("Attr.namespaceURI", "namespaceURI")}} {{readOnlyInline}}</dt> + <dd>A {{domxref("DOMString")}} representing the namespace URI of the attribute, or <code>null</code> if there is no namespace.</dd> + <dt>{{domxref("Attr.localName", "localName")}} {{readOnlyInline}}</dt> + <dd>A {{domxref("DOMString")}} representing the local part of the qualified name of the attribute.</dd> + <dt>{{domxref("Attr.prefix", "prefix")}} {{readOnlyInline}}</dt> + <dd>A {{domxref("DOMString")}} representing the namespace prefix of the attribute, or <code>null</code> if no prefix is specified.</dd> + <dt>{{domxref("Attr.ownerElement", "ownerElement")}} {{readOnlyInline}}</dt> + <dd> + <p>The element holding the attribute.</p> + + <div class="note"> + <p><strong>Note:</strong> DOM Level 4 removed this property. The assumption was that since you get an <code>Attr</code> object from an {{domxref("Element")}}, you should already know the associated element.<br> + As that doesn't hold true in cases like <code>Attr</code> objects being returned by {{domxref("Document.evaluate")}}, the DOM Living Standard reintroduced the property.</p> + + <p>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")}}.</p> + </div> + </dd> + <dt>{{domxref("Attr.specified", "specified")}} {{readOnlyInline}}</dt> + <dd>This property always returns <code>true</code>. Originally, it returned <code>true </code>if the attribute was explicitly specified in the source code or by a script, and <code>false</code> if its value came from the default one defined in the document's <acronym title="Document Type Definition">DTD</acronym>.</dd> + <dt>{{domxref("Attr.value", "value")}}</dt> + <dd>The attribute's value.</dd> +</dl> + +<div class="note"> +<p><strong>Note:</strong> DOM Level 3 defined <code>namespaceURI</code>, <code>localName</code> and <code>prefix</code> on the {{domxref("Node")}} interface. In DOM4 they were moved to <code>Attr</code>.</p> + +<p>This change is implemented in Chrome since version 46.0 and Firefox since version 48.0.</p> +</div> + +<h2 id="Deprecated_properties_and_methods">Deprecated properties and methods</h2> + +<p>The following properties have been deprecated. Where available, the appropriate replacement is noted.</p> + +<dl> + <dt><code>attributes</code></dt> + <dd>This property now always returns <code>NULL</code>.</dd> + <dt><code>childNodes</code> {{obsolete_inline(14)}}</dt> + <dd>This property now always returns an empty {{domxref("NodeList")}}.</dd> + <dt><code>firstChild</code> {{obsolete_inline(14)}}</dt> + <dd>This property now always returns <code>NULL</code>.</dd> + <dt><code>isId</code> {{readOnlyInline}}</dt> + <dd>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.</dd> + <dt><code>lastChild</code> {{obsolete_inline(14)}}</dt> + <dd>This property now always returns <code>NULL</code>.</dd> + <dt><code>nextSibling</code></dt> + <dd>This property now always returns <code>NULL</code>.</dd> + <dt><code>nodeName</code></dt> + <dd>Use {{domxref("Attr.name")}} instead.</dd> + <dt><code>nodeType</code></dt> + <dd>This property now always returns 2 (<code>ATTRIBUTE_NODE</code>).</dd> + <dt><code>nodeValue</code></dt> + <dd>Use {{domxref("Attr.value")}} instead.</dd> + <dt><code>ownerDocument</code></dt> + <dd>You shouldn't have been using this in the first place, so you probably don't care that this is going away.</dd> + <dt><code>parentNode</code></dt> + <dd>This property now always returns <code>NULL</code>.</dd> + <dt><code>previousSibling</code></dt> + <dd>This property now always returns <code>NULL</code>.</dd> + <dt><code>schemaTypeInfo</code> {{obsolete_inline}} {{readOnlyInline}}</dt> + <dd>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.</dd> + <dt><code>specified</code></dt> + <dd>This property now always returns <code>true</code>.</dd> + <dt><code>textContent</code></dt> + <dd>Use {{domxref("Attr.value")}} instead.</dd> +</dl> + +<p>The following methods have been deprecated:</p> + +<dl> + <dt><code>appendChild()</code> {{obsolete_inline(14)}}</dt> + <dd>Modify the value of {{domxref("Attr.value")}} instead.</dd> + <dt><code>cloneNode()</code></dt> + <dd>You shouldn't have been using this in the first place, so you probably don't care that this is going away.</dd> + <dt><code>createAttribute()</code></dt> + <dd>Use {{domxref("Element.setAttribute()")}} instead.</dd> + <dt><code>createAttributeNS()</code></dt> + <dd>Use {{domxref("Element.setAttributeNS()")}} instead.</dd> + <dt><code>getAttributeNode()</code></dt> + <dd>Use {{domxref("Element.getAttribute()")}} instead.</dd> + <dt><code>getAttributeNodeNS()</code></dt> + <dd>Use {{domxref("Element.getAttributeNS()")}} instead.</dd> + <dt><code>hasAttributes()</code> {{obsolete_inline("21.0")}}</dt> + <dd>This method now always returns false.</dd> + <dt><code>hasChildNodes()</code></dt> + <dd>This method now always returns false.</dd> + <dt><code>insertBefore()</code></dt> + <dd>Modify the value of {{domxref("Attr.value")}} instead.</dd> + <dt><code>isSupported()</code></dt> + <dd>You shouldn't have been using this in the first place, so you probably don't care that this is going away.</dd> + <dt><code>isEqualNode()</code></dt> + <dd>You shouldn't have been using this in the first place, so you probably don't care that this is going away.</dd> + <dt><code>normalize()</code></dt> + <dd>You shouldn't have been using this in the first place, so you probably don't care that this is going away.</dd> + <dt><code>removeAttributeNode()</code></dt> + <dd>Use {{domxref("Element.removeAttribute()")}} instead.</dd> + <dt><code>removeChild()</code> {{obsolete_inline(14)}}</dt> + <dd>Modify the value of {{domxref("Attr.value")}} instead.</dd> + <dt><code>replaceChild()</code> {{obsolete_inline(14)}}</dt> + <dd>Modify the value of {{domxref("Attr.value")}} instead.</dd> + <dt><code>setAttributeNode()</code></dt> + <dd>Use {{domxref("Element.setAttribute()")}} instead.</dd> + <dt><code>setAttributeNodeNS()</code></dt> + <dd>Use {{domxref("Element.setAttributeNS()")}} instead.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("DOM WHATWG", "#interface-attr", "Attr")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td>Added <code>ownerElement</code> property back</td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#interface-attr", "Attr")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td>Moved <code>namespaceURI</code>, <code>prefix</code> and <code>localName</code> from {{domxref("Node")}} to this API and removed <code>ownerElement</code>, <code>schemaTypeInfo</code> and <code>isId</code>.</td> + </tr> + <tr> + <td>{{SpecName("DOM3 Core", "core.html#ID-637646024", "Attr")}}</td> + <td>{{Spec2("DOM3 Core")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Attr")}}</p> 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 +--- +<div>{{CanvasSidebar}}</div> + +<p class="summary">في <a href="/en-US/docs/HTML/HTML5">HTML5</a>، أُضيف عنصر HTML {{HTMLElement("canvas")}} والذي يمكن استخدامه لرسم الرسوميات ببرمجتها عبر <a href="/en-US/docs/Web/JavaScript">جافاسكربت</a>. فمثلا، يمكن استخدامها لرسم الرسوم البيانية، أو تراكبات الصور، أو إنشاء الحركات أو حتى معالجة الفديوهات آنيا وتصييرها.</p> + +<p>حصلت تطبيقات موزيلا على دعم <code><canvas></code> بدءًا من إصدارة جيكو رقم ١٫٨ (أي <a href="/en-US/docs/Mozilla/Firefox/Releases/1.5">فَيَرفُكس ١٫٥</a>). طُوّر هذا العنصر على يد شركة آبل للوحة أوإس إكس وسفاري. يدعم إنترنت إكسبلورر <code><canvas></code> بدءًا من الإصدارة التاسعة فما فوق، بينما الإصدارات الأقدم منه تحتاج سكربتا ليعمل عنصر رقعة الرسم بكفاءة، هذا السكربت هو من مشروع جوجل باسم <a href="https://github.com/arv/explorercanvas">Explorer Canvas</a>. يدعم جوجل كروم وأوبرا ٩ عتصر <code><canvas></code> أيضا.</p> + +<p>يُستخدم عنصر <code><canvas></code> في تقنية <a href="/en-US/docs/Web/WebGL">WebGL</a> أيضا لرسم الرسومات ثلاثية الأبعاد على صفحات الوب بتسريع عتادي.</p> + +<h2 id="مثال">مثال</h2> + +<p>هذه عيّنة مقتطفة من كود يستخدم طريقة {{domxref("CanvasRenderingContext2D.fillRect()")}}.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h3 id="جافاسكربت">جافاسكربت</h3> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +ctx.fillStyle = 'green'; +ctx.fillRect(10, 10, 100, 100); +</pre> + +<p>حرّر الكود أدناه لترى التغييرات تحدث آنيا في رقعة الرسم:</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> +ctx.fillStyle = 'green'; +ctx.fillRect(10, 10, 100, 100);</textarea> +</pre> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext("2d"); +var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var edit = document.getElementById('edit'); +var code = textarea.value; + +function drawCanvas() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + eval(textarea.value); +} + +reset.addEventListener('click', function() { + textarea.value = code; + drawCanvas(); +}); + +edit.addEventListener('click', function() { + textarea.focus(); +}) + +textarea.addEventListener('input', drawCanvas); +window.addEventListener('load', drawCanvas); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<h2 id="المرجع">المرجع</h2> + +<div class="index"> +<ul> + <li>{{domxref("HTMLCanvasElement")}}</li> + <li>{{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasGradient")}}</li> + <li>{{domxref("CanvasImageSource")}}</li> + <li>{{domxref("CanvasPattern")}}</li> + <li>{{domxref("ImageBitmap")}}</li> + <li>{{domxref("ImageData")}}</li> + <li>{{domxref("RenderingContext")}}</li> + <li>{{domxref("TextMetrics")}}</li> + <li>{{domxref("OffscreenCanvas")}}{{experimental_inline}}</li> + <li>{{domxref("Path2D")}} {{experimental_inline}}{{domxref("ImageBitmapRenderingContext")}}{{experimental_inline}}</li> +</ul> +</div> + +<p>الواجهات المتعلقة بِ <code>WebGLRenderingContext</code> مذكورة في مرجع <a href="/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a>.</p> + +<p>واجهة {{domxref("CanvasCaptureMediaStream")}} لها علاقة أيضا.</p> + +<h2 id="الأدلة_والدروس">الأدلة والدروس</h2> + +<dl> + <dt><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">درس رقعة الرسم</a></dt> + <dd>درس شامل يغطي كلا من الاستخدام البسيط لرقعة الرسم <code><canvas></code> وأيضا مزاياها المتقدمة.</dd> + <dt><a href="/en-US/Add-ons/Code_snippets/Canvas">مقتطفات من كود: رقعة الرسم</a></dt> + <dd>بعض المقتطفات المخصصة لمطوري الامتدادات والتي تستخدم <code><canvas></code>.</dd> + <dt><a href="/en-US/docs/Web/API/Canvas_API/A_basic_ray-caster">Demo: A basic ray-caster</a></dt> + <dd>عرض لحركة تعقّب الأشعة باستخدام رقعة الرسم.</dd> + <dt><a href="/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas">رسم كائنات DOM في رقعة رسم</a></dt> + <dd>طريقة رسم محتوى DOM (مثل عناصر HTML) في رقعة رسم.</dd> + <dt><a href="/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas">التعديل على الفديو باستخدام رقعة الرسم</a></dt> + <dd>يمكنك بدمج {{HTMLElement("video")}} و{{HTMLElement("canvas")}} التلاعب والتعديل على الفديو آنيا.</dd> +</dl> + +<h2 id="الموارد">الموارد</h2> + +<h3 id="عامة">عامة</h3> + +<ul> + <li><a href="http://joshondesign.com/p/books/canvasdeepdive/title.html">HTML5 Canvas Deep Dive</a></li> + <li><a href="http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html">كتيّب رقعة الرسم</a></li> +</ul> + +<h3 id="المكتبات">المكتبات</h3> + +<ul> + <li><a href="http://fabricjs.com">Fabric.js</a> مكتبة رقعة رسم مفتوحة المصدر تأتي بإمكانيات تحليل SVG.</li> + <li><a href="https://github.com/ericdrowell/KineticJS">Kinetic.js</a> مكتبة رقعة رسم مفتوحة المصدر تركز على التفاعل في تطبيقات سطح المكتب والمحمول.</li> + <li><a href="http://paperjs.org/">Paper.js</a> إطار عمل رسوميات متجهية مفتوح المصدر يعمل على رقعة رسم HTML5.</li> + <li><a href="http://origamijs.com/docs/">Origami.js</a> مكتبة رقعة رسم خفيفة مفتوحة المصدر.</li> + <li><a href="http://libcanvas.github.com/">libCanvas</a> إطار عمل رقعة رسم خفيف وقوي.</li> + <li><a href="http://processingjs.org">Processing.js</a> نقل للغة التمثيل Processing.</li> + <li><a href="https://playcanvas.com/">PlayCanvas</a> محرّك ألعاب مفتوح المصدر.</li> + <li><a href="http://www.pixijs.com/">Pixi.js</a> محرّك ألعاب مفتوح المصدر.</li> + <li><a href="http://www.liquidx.net/plotkit/">PlotKit</a> مكتبة للرسوم البيانية.</li> + <li><a class="link-https" href="https://github.com/jeremyckahn/rekapi">Rekapi</a> واجهة برمجة تطبيقات تتعامل مع الإطارات المفتاحية للحركات لرقعة الرسم.</li> + <li><a href="http://senchalabs.github.com/philogl/">PhiloGL</a> إطار عمل WebGL لتمثيل البيانات، والبرمجة الخلّاقة وتطوير الألعاب.</li> + <li><a href="http://thejit.org/">JavaScript InfoVis Toolkit</a> تُنشئ تمثيلات بيانات لرقعة الرسم ثنائية الأبعاد تفاعلية للوب.</li> + <li><a href="http://www.createjs.com/easeljs">EaselJS</a> مكتبة مفتوحة المصدر حرة تسهّل استخدام رقعة الرسم للألعاب والفنون.</li> + <li><a href="http://scrawl.rikweb.org.uk/">Scrawl-canvas</a> مكتبة جافاسكربت مفتوحة المصدر لإنشاء وتعديل عناصر رقعة الرسم ثنائية الأبعاد.</li> + <li><a href="https://www.patrick-wied.at/static/heatmapjs/">heatmap.js</a> مكتبة مفتوحة المصدر لإنشاء خرائط حرارية بناء على رقعة الرسم.</li> +</ul> + +<h2 id="المواصفات">المواصفات</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">المواصفة</th> + <th scope="col">الحالة</th> + <th scope="col">تعليق</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '<canvas>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="طالع_أيضا">طالع أيضا</h2> + +<ul> + <li><a href="/en-US/docs/Web/WebGL">WebGL</a></li> +</ul> 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 +--- +<div>{{ ApiRef() }}</div> + +<div> </div> + +<h2 id="Summary" name="Summary">نبذه مختصره</h2> + +<p><code>document.designMode</code></p> + +<p>يتحكم بطبيعة عرض كامل المحتوى كـ قابل للتعديل. القيم التي يقبلها هي "<code style="font-style: normal; font-weight: 700;">off"</code> <sup><code>معطل</code></sup> و <code style="font-style: normal; font-weight: 700;">"on" مشغل </code> .بحسب تخصيصه. القيمة الافتراضية لهذه الخاصية معطله <code style="font-style: normal; font-weight: 700;">"off"</code>. فايرفوكس يتبع هذا النمط. الاصدارات الحديثة من كروم و إنترنت اكسبلورر القيمة الافتراضية فيها <code style="font-style: normal; font-weight: 700;">"inherit"</code>. بدأً من الاصدار 43 لمتصفح كروم، القيمة الافتراضية هي "<code style="font-style: normal; font-weight: 700;">off</code>" و <code style="font-style: normal; font-weight: 700;">"inherit"</code> لم تعد مدعومه اكثر. في إنترنت اكسبلورر 6 حتى 10، القيمة هي مستثمرة</p> + +<h2 id="الصيغة">الصيغة</h2> + +<pre class="brush: js">var mode = document.designMode; +document.designMode = "on"; +document.designMode = "off";</pre> + +<h2 id="Example" name="Example">مثال</h2> + +<p>جعل عنصر/عناصر <code>ifram </code> قابله للتعديل:</p> + +<pre>iframeNode.contentDocument.designMode = "on"; +</pre> + +<h2 id="التخصيص">التخصيص</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">الخاصية</th> + <th scope="col">الحالة</th> + <th scope="col">تعليق</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', '#making-entire-documents-editable:-the-designmode-idl-attribute', 'designMode')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="دعم_المتصفحات" style="font-size: 2.14285714285714rem;">دعم المتصفحات</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th style="line-height: 16px;">الدعم</th> + <th style="line-height: 16px;">كروم</th> + <th style="line-height: 16px;">ايدج</th> + <th style="line-height: 16px;">فايرفوكس</th> + <th style="line-height: 16px;">إنترنت اكسبلورر</th> + <th style="line-height: 16px;">اوبرا</th> + <th style="line-height: 16px;">سفاري</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th style="line-height: 16px;">Feature</th> + <th style="line-height: 16px;">Android</th> + <th style="line-height: 16px;">Android Webview</th> + <th style="line-height: 16px;">Edge</th> + <th style="line-height: 16px;">Firefox Mobile (Gecko)</th> + <th style="line-height: 16px;">IE Mobile</th> + <th style="line-height: 16px;">Opera Mobile</th> + <th style="line-height: 16px;">Safari Mobile</th> + <th style="line-height: 16px;">Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">شاهد ايضاً</h2> + +<ul> + <li><a href="/en-US/docs/Rich-Text_Editing_in_Mozilla">Rich-Text Editing in Mozilla</a></li> + <li>{{domxref("HTMLElement.contentEditable")}}</li> + <li><a href="https://msdn.microsoft.com/en-us/library/ms533720(v=vs.85).aspx">designMode property</a> on MSDN</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<div> </div> + +<p><span class="seoSummary">The <strong><code>Document</code></strong> interface represents any web page loaded in the browser and serves as an entry point into the web page's content, which is the <a href="/en-US/docs/Using_the_W3C_DOM_Level_1_Core" title="Using_the_W3C_DOM_Level_1_Core">DOM tree</a>.</span> The DOM tree includes elements such as {{HTMLElement("body")}} and {{HTMLElement("table")}}, among <a href="/en-US/docs/Web/HTML/Element">many others</a>. It provides functionality globally to the document, like how to obtain the page's URL and create new elements in the document.</p> + +<p>{{inheritanceDiagram}}</p> + +<p>The <code>Document</code> interface describes the common properties and methods for any kind of document. Depending on the document's type (e.g. <a href="/en-US/docs/HTML" title="HTML">HTML</a>, <a href="/en-US/docs/XML" title="XML">XML</a>, SVG, …), a larger API is available: HTML documents, served with the <code>text/html</code> content type, also implement the {{domxref("HTMLDocument")}} interface, whereas XML and SVG documents implement the {{domxref("XMLDocument")}} interface.</p> + +<h2 id="Properties" name="Properties">Constructor</h2> + +<dl> + <dt>{{domxref("Document.Document","Document()")}}{{non-standard_inline}}</dt> + <dd>Creates a new <code>Document</code> object.</dd> +</dl> + +<h2 id="Properties" name="Properties">Properties</h2> + +<p><em>This interface also inherits from the {{domxref("Node")}} and {{domxref("EventTarget")}} interfaces.</em></p> + +<dl> + <dt>{{domxref("Document.all")}} {{Deprecated_inline}} {{non-standard_inline}}</dt> + <dd>Provides access to all elements in the document. This is a legacy, non-standard interface and should not be used.</dd> + <dt>{{domxref("Document.async")}} {{Deprecated_inline}}</dt> + <dd>Used with {{domxref("Document.load")}} to indicate an asynchronous request.</dd> + <dt>{{domxref("Document.characterSet")}} {{readonlyinline}}</dt> + <dd>Returns the character set being used by the document.</dd> + <dt>{{domxref("Document.charset")}} {{readonlyinline}} {{Deprecated_inline}}</dt> + <dd>Alias of {{domxref("Document.characterSet")}}. Use this property instead.</dd> + <dt>{{domxref("Document.compatMode")}} {{readonlyinline}} {{experimental_inline}}</dt> + <dd>Indicates whether the document is rendered in <em>quirks</em> or <em>strict</em> mode.</dd> + <dt>{{domxref("Document.contentType")}} {{readonlyinline}} {{experimental_inline}}</dt> + <dd>Returns the Content-Type from the MIME Header of the current document.</dd> + <dt>{{domxref("Document.doctype")}} {{readonlyinline}}</dt> + <dd>Returns the Document Type Definition (DTD) of the current document.</dd> + <dt>{{domxref("Document.documentElement")}} {{readonlyinline}}</dt> + <dd>Returns the {{domxref("Element")}} that is a direct child of the document. For HTML documents, this is normally the {{HTMLElement("html")}} element.</dd> + <dt>{{domxref("Document.documentURI")}} {{readonlyinline}}</dt> + <dd>Returns the document location as a string.</dd> + <dt>{{domxref("Document.domConfig")}} {{Deprecated_inline}}</dt> + <dd>Should return a {{domxref("DOMConfiguration")}} object.</dd> + <dt>{{domxref("Document.fullscreen")}} {{obsolete_inline}}</dt> + <dd><code>true</code> when the document is in {{domxref("Using_full-screen_mode","full-screen mode")}}.</dd> + <dt>{{domxref("Document.hidden")}} {{readonlyinline}}</dt> + <dd>…</dd> + <dt>{{domxref("Document.implementation")}} {{readonlyinline}}</dt> + <dd>Returns the DOM implementation associated with the current document.</dd> + <dt>{{domxref("Document.inputEncoding")}} {{readonlyinline}} {{Deprecated_inline}}</dt> + <dd>Alias of {{domxref("Document.characterSet")}}. Use this property instead.</dd> + <dt>{{domxref("Document.lastStyleSheetSet")}} {{readonlyinline}}</dt> + <dd>Returns the name of the style sheet set that was last enabled. Has the value <code>null</code> until the style sheet is changed by setting the value of {{domxref("document.selectedStyleSheetSet","selectedStyleSheetSet")}}.</dd> + <dt>{{domxref("Document.mozSyntheticDocument")}} {{non-standard_inline}} {{gecko_minversion_inline("8.0")}}</dt> + <dd>Returns a {{jsxref("Boolean")}} that is <code>true</code> only if this document is synthetic, such as a standalone image, video, audio file, or the like.</dd> + <dt>{{domxref("Document.mozFullScreenElement")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt> + <dd>The element that's currently in full screen mode for this document.</dd> + <dt>{{domxref("Document.mozFullScreenEnabled")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt> + <dd><code>true</code> if calling {{domxref("Element.mozRequestFullscreen()")}} would succeed in the curent document.</dd> + <dt>{{domxref("Document.pointerLockElement")}} {{readonlyinline}} {{experimental_inline}}</dt> + <dd>Returns the element set as the target for mouse events while the pointer is locked. <code>null</code> if lock is pending, pointer is unlocked, or if the target is in another document.</dd> + <dt>{{domxref("Document.preferredStyleSheetSet")}} {{readonlyinline}}</dt> + <dd>Returns the preferred style sheet set as specified by the page author.</dd> + <dt>{{domxref("Document.scrollingElement")}} {{experimental_inline}} {{readonlyinline}}</dt> + <dd>Returns a reference to the {{domxref("Element")}} that scrolls the document.</dd> + <dt>{{domxref("Document.selectedStyleSheetSet")}}</dt> + <dd>Returns which style sheet set is currently in use.</dd> + <dt>{{domxref("Document.styleSheets")}} {{readonlyinline}}</dt> + <dd>Returns a list of the style sheet objects on the current document.</dd> + <dt>{{domxref("Document.styleSheetSets")}} {{readonlyinline}}</dt> + <dd>Returns a list of the style sheet sets available on the document.</dd> + <dt>{{domxref("Document.timeline")}} {{readonlyinline}}</dt> + <dd>…</dd> + <dt>{{domxref("Document.undoManager")}} {{readonlyinline}} {{experimental_inline}}</dt> + <dd>…</dd> + <dt>{{domxref("Document.visibilityState")}} {{readonlyinline}}</dt> + <dd> + <p>Returns a <code>string</code> denoting the visibility state of the document. Possible values are <code>visible</code>, <code>hidden</code>, <code>prerender</code>, and <code>unloaded</code>.</p> + </dd> + <dt>{{domxref("Document.xmlEncoding")}} {{Deprecated_inline}}</dt> + <dd>Returns the encoding as determined by the XML declaration.</dd> + <dt>{{domxref("Document.xmlStandalone")}} {{obsolete_inline("10.0")}}</dt> + <dd>Returns <code>true</code> if the XML declaration specifies the document to be standalone (<em>e.g.,</em> An external part of the DTD affects the document's content), else <code>false</code>.</dd> + <dt>{{domxref("Document.xmlVersion")}} {{obsolete_inline("10.0")}}</dt> + <dd>Returns the version number as specified in the XML declaration or <code>"1.0"</code> if the declaration is absent.</dd> +</dl> + +<p>The <code>Document</code> interface is extended with the {{domxref("ParentNode")}} interface:</p> + +<p>{{page("/en-US/docs/Web/API/ParentNode","Properties")}}</p> + +<h3 id="Extension_for_HTML_document">Extension for HTML document</h3> + +<p><em>The <code>Document</code> interface for HTML documents inherits from the {{domxref("HTMLDocument")}} interface or, since HTML5, is extended for such documents.</em></p> + +<dl> + <dt>{{domxref("Document.activeElement")}} {{readonlyinline}}</dt> + <dd>Returns the currently focused element.</dd> + <dt>{{domxref("Document.alinkColor")}} {{Deprecated_inline}}</dt> + <dd>Returns or sets the color of active links in the document body.</dd> + <dt>{{domxref("Document.anchors")}}</dt> + <dd>Returns a list of all of the anchors in the document.</dd> + <dt>{{domxref("Document.applets")}} {{Deprecated_inline}}</dt> + <dd>Returns an ordered list of the applets within a document.</dd> + <dt>{{domxref("Document.bgColor")}} {{Deprecated_inline}}</dt> + <dd>Gets/sets the background color of the current document.</dd> + <dt>{{domxref("Document.body")}}</dt> + <dd>Returns the {{HTMLElement("body")}} element of the current document.</dd> + <dt>{{domxref("Document.cookie")}}</dt> + <dd>Returns a semicolon-separated list of the cookies for that document or sets a single cookie.</dd> + <dt>{{domxref("Document.defaultView")}} {{readonlyinline}}</dt> + <dd>Returns a reference to the window object.</dd> + <dt>{{domxref("Document.designMode")}}</dt> + <dd>Gets/sets the ability to edit the whole document.</dd> + <dt>{{domxref("Document.dir")}} {{readonlyinline}}</dt> + <dd>Gets/sets directionality (rtl/ltr) of the document.</dd> + <dt>{{domxref("Document.domain")}}</dt> + <dd>Gets/sets the domain of the current document.</dd> + <dt>{{domxref("Document.embeds")}} {{readonlyinline}}</dt> + <dd>Returns a list of the embedded {{HTMLElement('embed')}} elements within the current document.</dd> + <dt>{{domxref("document.fgColor")}} {{Deprecated_inline}}</dt> + <dd>Gets/sets the foreground color, or text color, of the current document.</dd> + <dt>{{domxref("Document.forms")}} {{readonlyinline}}</dt> + <dd>Returns a list of the {{HTMLElement("form")}} elements within the current document.</dd> + <dt>{{domxref("Document.head")}} {{readonlyinline}}</dt> + <dd>Returns the {{HTMLElement("head")}} element of the current document.</dd> + <dt>{{domxref("Document.height")}} {{non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Gets/sets the height of the current document.</dd> + <dt>{{domxref("Document.images")}} {{readonlyinline}}</dt> + <dd>Returns a list of the images in the current document.</dd> + <dt>{{domxref("Document.lastModified")}} {{readonlyinline}}</dt> + <dd>Returns the date on which the document was last modified.</dd> + <dt>{{domxref("Document.linkColor")}} {{Deprecated_inline}}</dt> + <dd>Gets/sets the color of hyperlinks in the document.</dd> + <dt>{{domxref("Document.links")}} {{readonlyinline}}</dt> + <dd>Returns a list of all the hyperlinks in the document.</dd> + <dt>{{domxref("Document.location")}} {{readonlyinline}}</dt> + <dd>Returns the URI of the current document.</dd> + <dt>{{domxref("Document.plugins")}} {{readonlyinline}}</dt> + <dd>Returns a list of the available plugins.</dd> + <dt>{{domxref("Document.readyState")}} {{readonlyinline}} {{gecko_minversion_inline("1.9.2")}}</dt> + <dd>Returns loading status of the document.</dd> + <dt>{{domxref("Document.referrer")}} {{readonlyinline}}</dt> + <dd>Returns the URI of the page that linked to this page.</dd> + <dt>{{domxref("Document.scripts")}} {{readonlyinline}}</dt> + <dd>Returns all the {{HTMLElement("script")}} elements on the document.</dd> + <dt>{{domxref("Document.title")}}</dt> + <dd>Sets or gets the title of the current document.</dd> + <dt>{{domxref("Document.URL")}} {{readonlyInline}}</dt> + <dd>Returns<span style="line-height: 19.0909080505371px;"> the document location as a string.</span></dd> + <dt>{{domxref("Document.vlinkColor")}} {{Deprecated_inline}}</dt> + <dd>Gets/sets the color of visited hyperlinks.</dd> + <dt>{{domxref("Document.width")}} {{non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Returns the width of the current document.</dd> +</dl> + +<h3 id="Event_handlers" name="Event_handlers">Event handlers</h3> + +<dl> + <dt>{{domxref("Document.onafterscriptexecute")}} {{non-standard_inline}}</dt> + <dd>Represents the event handling code for the {{event("afterscriptexecute")}} event.</dd> + <dt>{{domxref("Document.onbeforescriptexecute")}} {{non-standard_inline}}</dt> + <dd>Represents the event handling code for the {{event("beforescriptexecute")}} event.</dd> + <dt>{{domxref("Document.oncopy")}} {{non-standard_inline}}</dt> + <dd>Represents the event handling code for the {{event("copy")}} event.</dd> + <dt>{{domxref("Document.oncut")}} {{non-standard_inline}}</dt> + <dd>Represents the event handling code for the {{event("cut")}} event.</dd> + <dt>{{domxref("Document.onfullscreenchange")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("fullscreenchange")}} event is raised.</dd> + <dt>{{domxref("Document.onfullscreenerror")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("fullscreenerror")}} event is raised.</dd> + <dt>{{domxref("Document.onpaste")}} {{non-standard_inline}}</dt> + <dd>Represents the event handling code for the {{event("paste")}} event.</dd> + <dt>{{domxref("Document.onpointerlockchange")}} {{experimental_inline}}</dt> + <dd>Represents the event handling code for the {{event("pointerlockchange")}} event.</dd> + <dt>{{domxref("Document.onpointerlockerror")}} {{experimental_inline}}</dt> + <dd>Represetnts the event handling code for the {{event("pointerlockerror")}} event.</dd> + <dt>{{domxref("Document.onreadystatechange")}} {{gecko_minversion_inline("1.9.2")}}</dt> + <dd>Represents the event handling code for the {{event("readystatechange")}} event.</dd> + <dt>{{domxref("Document.onselectionchange")}} {{experimental_inline}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised.</dd> + <dt>{{domxref("Document.onvisibilitychange")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("visibilitychange")}} event is raised.</dd> + <dt>{{domxref("Document.onwheel")}} {{non-standard_inline}}</dt> + <dd>Represents the event handling code for the {{event("wheel")}} event.</dd> +</dl> + +<p>The <code>Document</code> interface is extended with the {{domxref("GlobalEventHandlers")}} interface:</p> + +<p>{{Page("/en-US/docs/Web/API/GlobalEventHandlers", "Properties")}}</p> + +<h2 id="Methods" name="Methods">Methods</h2> + +<p><em>This interface also inherits from the {{domxref("Node")}} and {{domxref("EventTarget")}} interfaces.</em></p> + +<dl> + <dt>{{domxref("Document.adoptNode()")}}</dt> + <dd>Adopt node from an external document.</dd> + <dt>{{domxref("Document.captureEvents()")}} {{Deprecated_inline}}</dt> + <dd>See {{domxref("Window.captureEvents")}}.</dd> + <dt>{{domxref("Document.caretPositionFromPoint()")}}{{experimental_inline}}</dt> + <dd>Gets the {{domxref("CaretPosition")}} at or near the specified coordinates.</dd> + <dt>{{domxref("Document.caretRangeFromPoint()")}}{{non-standard_inline}}</dt> + <dd>Gets a {{Domxref("Range")}} object for the document fragment under the specified coordinates.</dd> + <dt>{{domxref("Document.createAttribute()")}}</dt> + <dd>Creates a new {{domxref("Attr")}} object and returns it.</dd> + <dt>{{domxref("Document.createAttributeNS()")}}</dt> + <dd>Creates a new attribute node in a given namespace and returns it.</dd> + <dt>{{domxref("Document.createCDATASection()")}}</dt> + <dd>Creates a new CDATA node and returns it.</dd> + <dt>{{domxref("Document.createComment()")}}</dt> + <dd>Creates a new comment node and returns it.</dd> + <dt>{{domxref("Document.createDocumentFragment()")}}</dt> + <dd>Creates a new document fragment.</dd> + <dt>{{domxref("Document.createElement()")}}</dt> + <dd>Creates a new element with the given tag name.</dd> + <dt>{{domxref("Document.createElementNS()")}}</dt> + <dd>Creates a new element with the given tag name and namespace URI.</dd> + <dt>{{domxref("Document.createEntityReference()")}} {{obsolete_inline}}</dt> + <dd>Creates a new entity reference object and returns it.</dd> + <dt>{{domxref("Document.createEvent()")}}</dt> + <dd>Creates an event object.</dd> + <dt>{{domxref("Document.createNodeIterator()")}}</dt> + <dd>Creates a {{domxref("NodeIterator")}} object.</dd> + <dt>{{domxref("Document.createProcessingInstruction()")}}</dt> + <dd>Creates a new {{domxref("ProcessingInstruction")}} object.</dd> + <dt>{{domxref("Document.createRange()")}}</dt> + <dd>Creates a {{domxref("Range")}} object.</dd> + <dt>{{domxref("Document.createTextNode()")}}</dt> + <dd>Creates a text node.</dd> + <dt>{{domxref("Document.createTouch()")}} {{Deprecated_inline}}</dt> + <dd>Creates a {{domxref("Touch")}} object.</dd> + <dt>{{domxref("Document.createTouchList()")}}</dt> + <dd>Creates a {{domxref("TouchList")}} object.</dd> + <dt>{{domxref("Document.createTreeWalker()")}}</dt> + <dd>Creates a {{domxref("TreeWalker")}} object.</dd> + <dt>{{domxref("Document.elementFromPoint()")}}{{experimental_inline}}</dt> + <dd>Returns the topmost element at the specified coordinates. </dd> + <dt>{{domxref("Document.elementsFromPoint()")}}{{experimental_inline}}</dt> + <dd>Returns an array of all elements at the specified coordinates.</dd> + <dt>{{domxref("Document.enableStyleSheetsForSet()")}}</dt> + <dd>Enables the style sheets for the specified style sheet set.</dd> + <dt>{{domxref("Document.exitPointerLock()")}} {{experimental_inline}}</dt> + <dd>Release the pointer lock.</dd> + <dt>{{domxref("Document.getAnimations()")}} {{experimental_inline}}</dt> + <dd>Returns an array of all {{domxref("Animation")}} objects currently in effect, whose target elements are descendants of the <code>document</code>.</dd> + <dt>{{domxref("Document.getElementsByClassName()")}}</dt> + <dd>Returns a list of elements with the given class name.</dd> + <dt>{{domxref("Document.getElementsByTagName()")}}</dt> + <dd>Returns a list of elements with the given tag name.</dd> + <dt>{{domxref("Document.getElementsByTagNameNS()")}}</dt> + <dd>Returns a list of elements with the given tag name and namespace.</dd> + <dt>{{domxref("Document.importNode()")}}</dt> + <dd>Returns a clone of a node from an external document.</dd> + <dt>{{domxref("Document.normalizeDocument()")}} {{obsolete_inline}}</dt> + <dd>Replaces entities, normalizes text nodes, etc.</dd> + <dt>{{domxref("Document.registerElement()")}} {{experimental_inline}}</dt> + <dd>Registers a web component.</dd> + <dt>{{domxref("Document.releaseCapture()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Releases the current mouse capture if it's on an element in this document.</dd> + <dt>{{domxref("Document.releaseEvents()")}} {{non-standard_inline}} {{Deprecated_inline}}</dt> + <dd>See {{domxref("Window.releaseEvents()")}}.</dd> + <dt>{{domxref("Document.routeEvent()")}} {{non-standard_inline}} {{obsolete_inline(24)}}</dt> + <dd>See {{domxref("Window.routeEvent()")}}.</dd> + <dt>{{domxref("Document.mozSetImageElement()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Allows you to change the element being used as the background image for a specified element ID.</dd> +</dl> + +<p>The <code>Document</code> interface is extended with the {{domxref("ParentNode")}} interface:</p> + +<dl> + <dt>{{domxref("document.getElementById","document.getElementById(String id)")}}</dt> + <dd>Returns an object reference to the identified element.</dd> + <dt>{{domxref("document.querySelector","document.querySelector(String selector)")}} {{gecko_minversion_inline("1.9.1")}}</dt> + <dd>Returns the first Element node within the document, in document order, that matches the specified selectors.</dd> + <dt>{{domxref("document.querySelectorAll","document.querySelectorAll(String selector)")}} {{gecko_minversion_inline("1.9.1")}}</dt> + <dd>Returns a list of all the Element nodes within the document that match the specified selectors.</dd> +</dl> + +<p>The <code>Document</code> interface is extended with the {{domxref("XPathEvaluator")}} interface:</p> + +<dl> + <dt>{{domxref("document.createExpression","document.createExpression(String expression, XPathNSResolver resolver)")}}</dt> + <dd>Compiles an <code><a href="/en-US/docs/XPathExpression" title="XPathExpression">XPathExpression</a></code> which can then be used for (repeated) evaluations.</dd> + <dt>{{domxref("document.createNSResolver","document.createNSResolver(Node resolver)")}}</dt> + <dd>Creates an {{domxref("XPathNSResolver")}} object.</dd> + <dt>{{domxref("document.evaluate","document.evaluate(String expression, Node contextNode, XPathNSResolver resolver, Number type, Object result)")}}</dt> + <dd>Evaluates an XPath expression.</dd> +</dl> + +<h3 id="Extension_for_HTML_documents">Extension for HTML documents</h3> + +<p>The <code>Document</code> interface for HTML documents inherit from the {{domxref("HTMLDocument")}} interface or, since HTML5, is extended for such documents:</p> + +<dl> + <dt>{{domxref("document.clear()")}} {{non-standard_inline}} {{Deprecated_inline}}</dt> + <dd>In majority of modern browsers, including recent versions of Firefox and Internet Explorer, this method does nothing.</dd> + <dt>{{domxref("document.close()")}}</dt> + <dd>Closes a document stream for writing.</dd> + <dt>{{domxref("document.execCommand","document.execCommand(String command[, Boolean showUI[, String value]])")}}</dt> + <dd>On an editable document, executes a formating command.</dd> + <dt>{{domxref("document.getElementsByName","document.getElementsByName(String name)")}}</dt> + <dd>Returns a list of elements with the given name.</dd> + <dt>{{domxref("document.getSelection()")}}</dt> + <dd>Returns a {{domxref("Selection")}} object related to text selected in the document.</dd> + <dt>{{domxref("document.hasFocus()")}}</dt> + <dd>Returns <code>true</code> if the focus is currently located anywhere inside the specified document.</dd> + <dt>{{domxref("document.open()")}}</dt> + <dd>Opens a document stream for writing.</dd> + <dt>{{domxref("document.queryCommandEnabled","document.queryCommandEnabled(String command)")}}</dt> + <dd>Returns true if the formating command can be executed on the current range.</dd> + <dt>{{domxref("document.queryCommandIndeterm","document.queryCommandIndeterm(String command)")}}</dt> + <dd>Returns true if the formating command is in an indeterminate state on the current range.</dd> + <dt>{{domxref("document.queryCommandState","document.queryCommandState(String command)")}}</dt> + <dd>Returns true if the formating command has been executed on the current range.</dd> + <dt>{{domxref("document.queryCommandSupported","document.queryCommandSupported(String command)")}}</dt> + <dd>Returns true if the formating command is supported on the current range.</dd> + <dt>{{domxref("document.queryCommandValue","document.queryCommandValue(String command)")}}</dt> + <dd>Returns the current value of the current range for a formating command.</dd> + <dt>{{domxref("document.write","document.write(String text)")}}</dt> + <dd>Writes text in a document.</dd> + <dt>{{domxref("document.writeln","document.writeln(String text)")}}</dt> + <dd>Writes a line of text in a document.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Page Visibility API', '#onvisiblitychange-event-handler', 'onvisibilitychange')}}</td> + <td>{{Spec2('Page Visibility API')}}</td> + <td>Adds <code>onvisibility</code><code>change</code>.</td> + </tr> + <tr> + <td>{{SpecName('Selection API', '', 'Extend Document and GlobalEventHandlers')}}</td> + <td>{{Spec2('Selection API')}}</td> + <td>Adds <code>onselectstart</code> and <code>onselectionchange</code>.</td> + </tr> + <tr> + <td>{{SpecName('DOM1','#i-Document','Document')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Initial definition for the interface</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core','#i-Document','Document')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>Supersede DOM 1</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core','#i-Document','Document')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Supersede DOM 2</td> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG','#interface-document','Document')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Intend to supersede DOM 3</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','dom.html#the-document-object','Document')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Turn the {{domxref("HTMLDocument")}} interface into a <code>Document</code> extension.</td> + </tr> + <tr> + <td>{{SpecName('DOM3 XPath','xpath.html#XPathEvaluator','XPathEvaluator')}}</td> + <td>{{Spec2('DOM3 XPath')}}</td> + <td>Define the {{domxref("XPathEvaluator")}} interface which extend document.</td> + </tr> + <tr> + <td>{{SpecName('Page Visibility API', '#sec-document-interface', 'Document')}}</td> + <td>{{Spec2('Page Visibility API')}}</td> + <td>Extend the <code>Document</code> interface with the <code>visibilityState</code> and <code>hidden</code> attributes</td> + </tr> + <tr> + <td>{{SpecName('HTML Editing','#dom-document-getselection','Document')}}</td> + <td>{{Spec2('HTML Editing')}}</td> + <td>Extend the <code>Document</code> interface</td> + </tr> + <tr> + <td>{{SpecName('CSSOM View','#extensions-to-the-document-interface','Document')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + <td>Extend the <code>Document</code> interface</td> + </tr> + <tr> + <td>{{SpecName('CSSOM','#extensions-to-the-document-interface','Document')}}</td> + <td>{{Spec2('CSSOM')}}</td> + <td>Extend the <code>Document</code> interface</td> + </tr> + <tr> + <td>{{SpecName('Pointer Lock','#extensions-to-the-document-interface','Document')}}</td> + <td>{{Spec2('Pointer Lock')}}</td> + <td>Extend the <code>Document</code> interface</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility_notes">Browser compatibility notes</h2> + +<h3 id="Firefox_notes">Firefox notes</h3> + +<p>Mozilla defines a set of non-standard properties made only for XUL content:</p> + +<dl> + <dt>{{domxref("document.currentScript")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Returns the {{HTMLElement("script")}} element that is currently executing.</dd> + <dt>{{domxref("document.documentURIObject")}} {{gecko_minversion_inline("1.9")}}</dt> + <dd>(<strong>Mozilla add-ons only!</strong>) Returns the {{Interface("nsIURI")}} object representing the URI of the document. This property only has special meaning in privileged JavaScript code (with UniversalXPConnect privileges).</dd> + <dt>{{domxref("document.popupNode")}}</dt> + <dd>Returns the node upon which a popup was invoked.</dd> + <dt>{{domxref("document.tooltipNode")}}</dt> + <dd>Returns the node which is the target of the current tooltip.</dd> +</dl> + +<p>Mozilla also define some non-standard methods:</p> + +<dl> + <dt>{{domxref("document.execCommandShowHelp")}} {{obsolete_inline("14.0")}}</dt> + <dd>This method never did anything and always threw an exception, so it was removed in Gecko 14.0 {{geckoRelease("14.0")}}.</dd> + <dt>{{domxref("document.getBoxObjectFor")}} {{obsolete_inline}}</dt> + <dd>Use the {{domxref("Element.getBoundingClientRect()")}} method instead.</dd> + <dt>{{domxref("document.loadOverlay")}} {{Fx_minversion_inline("1.5")}}</dt> + <dd>Loads a <a href="/en-US/docs/XUL_Overlays" title="XUL_Overlays">XUL overlay</a> dynamically. This only works in XUL documents.</dd> + <dt>{{domxref("document.queryCommandText")}} {{obsolete_inline("14.0")}}</dt> + <dd>This method never did anything but throw an exception, and was removed in Gecko 14.0 {{geckoRelease("14.0")}}.</dd> +</dl> + +<h3 id="Internet_Explorer_notes">Internet Explorer notes</h3> + +<p>Microsoft defines some non-standard properties:</p> + +<dl> + <dt>{{domxref("document.fileSize")}}* {{non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Returns size in bytes of the document. Starting with Internet Explorer 11, that property is no longer supported. See <a href="http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx">MSDN</a>.</dd> + <dt><span style="font-weight: normal; line-height: 1.5;">Internet Explorer does not support all methods from the <code>Node</code> interface in the <code>Document</code> interface:</span></dt> +</dl> + +<dl> + <dt>{{domxref("document.contains")}}</dt> + <dd>As a work-around, <code>document.body.contains()</code> can be used.</dd> +</dl> + +<p> </p> 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 +--- +<div>{{APIRef("DOM")}}</div> + +<p>The <code><strong>DOMTokenList</strong></code> 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 <code>0</code> as with JavaScript {{jsxref("Array")}} objects. <code>DOMTokenList</code> is always case-sensitive.</p> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt>{{domxref("DOMTokenList.length")}} {{ReadOnlyInline}}</dt> + <dd>Is an <code>integer</code> representing the number of objects stored in the object.</dd> + <dt>{{domxref("DOMTokenList.value")}}</dt> + <dd>The value of the list as a {{domxref("DOMString")}}.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{domxref("DOMTokenList.item()")}}</dt> + <dd>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).</dd> + <dt>{{domxref("DOMTokenList.contains()")}}</dt> + <dd>Returns <code>true</code> if the list contains the given <em>token</em>, otherwise <code>false</code>.</dd> + <dt>{{domxref("DOMTokenList.add()")}}</dt> + <dd>Adds the given <em>token</em> to the list.</dd> + <dt>{{domxref("DOMTokenList.remove()")}}</dt> + <dd>Removes the specified <em>token</em> from the list.</dd> + <dt>{{domxref("DOMTokenList.replace()")}}</dt> + <dd>Replaces an existing <em>token</em> with a new token.</dd> + <dt>{{domxref("DOMTokenList.supports()")}}</dt> + <dd>Returns <code>true</code> if a given <em>token</em> is in the associated attribute's supported tokens.</dd> + <dt>{{domxref("DOMTokenList.toggle()")}}</dt> + <dd>Removes a given <em>token</em> from the list and returns false. If <em>token</em> doesn't exist it's added and the function returns <code>true</code>.</dd> + <dt>{{domxref("DOMTokenList.entries()")}}</dt> + <dd>Returns an {{jsxref("Iteration_protocols","iterator")}} allowing you to go through all key/value pairs contained in this object.</dd> + <dt>{{domxref("DOMTokenList.forEach()")}}</dt> + <dd>Executes a provided function once per <code>DOMTokenList</code> element.</dd> + <dt>{{domxref("DOMTokenList.keys()")}}</dt> + <dd>Returns an {{jsxref("Iteration_protocols", "iterator")}} allowing you to go through all keys of the key/value pairs contained in this object.</dd> + <dt>{{domxref("DOMTokenList.values()")}}</dt> + <dd>Returns an {{jsxref("Iteration_protocols", "iterator")}} allowing you to go through all values of the key/value pairs contained in this object.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<p>In the following simple example we retrieve the list of classes set on a {{htmlelement("p")}} element as a <code>DOMTokenList</code> using {{domxref("Element.classList")}}, add a class using {{domxref("DOMTokenList.add()")}}, and then update the {{domxref("Node.textContent")}} of the <code><p></code> to equal the <code>DOMTokenList</code>.</p> + +<p>First, the HTML:</p> + +<pre class="brush: html"><p class="a b c"></p></pre> + +<p>Now the JavaScript:</p> + +<pre class="brush: js">var para = document.querySelector("p"); +var classes = para.classList; +para.classList.add("d"); +para.textContent = 'paragraph classList is "' + classes + '"';</pre> + +<p>The output looks like this:</p> + +<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p> + +<h2 id="Trimming_of_whitespace_and_removal_of_duplicates">Trimming of whitespace and removal of duplicates</h2> + +<p>Methods that modify the <code>DOMTokenList</code> (such as {{domxref("DOMTokenList.add()")}}) automatically trim any excess whitespace and remove duplicate values from the list. For example:</p> + +<pre class="brush: html"><span class=" d d e f"></span></pre> + +<pre class="brush: js">var span = document.querySelector("span"); +var classes = span.classList; +span.classList.add("x"); +span.textContent = 'span classList is "' + classes + '"';</pre> + +<p>The output looks like this:</p> + +<p>{{ EmbedLiveSample('Trimming_of_whitespace_and_removal_of_duplicates', '100%', 60) }}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("DOM WHATWG", "#interface-domtokenlist", "DOMTokenList")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.DOMTokenList")}}</p> + +<h2 id="See_Also">See Also</h2> + +<ul> + <li>{{domxref("DOMSettableTokenList")}} (object that extends <code>DOMTokenList</code> with settable <em>.value</em> property)</li> +</ul> 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 +--- +<p>{{APIRef("DOM")}}</p> + +<p>The <code><strong>length</strong></code> read-only property of the {{domxref("DOMTokenList")}} interface is an <code>integer</code> representing the number of objects stored in the object.</p> + +<h2 id="بنية_الجملة">بنية الجملة</h2> + +<pre class="syntaxbox">tokenList.length;</pre> + +<h3 id="القيمة_العائدة">القيمة العائدة</h3> + +<p>تُعيد <code>رقم صحيح</code>.</p> + +<h2 id="أمثلة">أمثلة</h2> + +<p>في المثال التالي نقوم بإسترداد قيمة الـ classes الموضوعة داخل {{htmlelement("span")}} element as a <code>DOMTokenList</code> using {{domxref("Element.classList")}}, then write the length of the list to the <code><span></code>'s {{domxref("Node.textContent")}}.</p> + +<p>أولاً، الـ HTML:</p> + +<pre class="brush: html"><span class="a b c"></span></pre> + +<p>الآن الـ JavaScript:</p> + +<pre class="brush: js">var span = document.querySelector("span"); +var classes = span.classList; +var length = classes.length; + +span.textContent = 'classList length = ' + length; +</pre> + +<p>نتيجة الكود ستكون بالشكل التالي:</p> + +<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p> + +<h2 id="الخصائص">الخصائص</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG','#dom-domtokenlist-length','length')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="دعم_المتصفحات">دعم المتصفحات</h2> + +<div> + + +<p>{{Compat("api.DOMTokenList.length")}}</p> +</div> 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 +--- +<div>{{APIRef("DOM")}}</div> + +<h2 id="الخلاصة">الخلاصة</h2> + +<p>تقوم <strong>className</strong> بجلب أو ضبط قيمة سمة class الخاصة بالعنصر.</p> + +<h2 id="بنية_الجملة">بنية الجملة</h2> + +<pre class="syntaxbox"><var>var cName</var> = <var>elementNodeReference</var>.className; +<var>elementNodeReference</var>.className = <var>cName</var>; +</pre> + +<ul> + <li>إن <em>cName</em> هو متغير نصي يعبر عن اسم class العنصر أو أكثر من class واحد يفصل بينها مسافات للعنصر الحالي.</li> +</ul> + +<h2 id="مثال">مثال</h2> + +<pre class="brush: js">let elm = document.getElementById('item'); + +if(elm.className === 'active'){ + elm.className = 'inactive'; +} else { + elm.className = 'active'; +}</pre> + +<h2 id="Notes" name="Notes">ملاحظات</h2> + +<p>تم استخدام <code>className</code> عوضًا عن <code>class</code> فقط لكي لا يتم خلطها مع كلمة class التي تستخدم في البرمجة الكائنية</p> + +<p>يمكن استخدام <code>className</code> في حالة {{domxref("SVGAnimatedString")}} إذا كان العنصر عبارة عن {{domxref("SVGElement")}}، من الأفضل أن تجلب قيمة <code>className</code> أو تضبطها باستخدام {{domxref("Element.getAttribute")}} و{{domxref("Element.setAttribute")}} إذا كنت تتعامل مع عنصر من نوع SVG.</p> + +<pre class="brush: js">elm.setAttribute('class', elm.getAttribute('class'))</pre> + +<p> </p> + +<h2 id="الخواص">الخواص</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">الخاصية</th> + <th scope="col">الحالة</th> + <th scope="col">تعليق</th> + </tr> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-element-classname", "element.className")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#dom-element-classname", "element.className")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM2 HTML", "html.html#ID-95362176", "element.className")}}</td> + <td>{{Spec2("DOM2 HTML")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="التوافق_مع_المتصفحات">التوافق مع المتصفحات</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="اقرأ_ايضًا">اقرأ ايضًا</h2> + +<ul> + <li>{{domxref("element.classList")}}</li> +</ul> 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 +--- +<div>{{APIRef('DOM')}}</div> + +<div dir="rtl">ال <code><strong>closest()</strong></code> method تجتاز {{domxref ("Element")}} والأصل(يتجهون نحو جذر المستند) حتى يعثروا على عقدة تتطابق مع الstring المحدد. سيعود نفسه أو أسلاف مطابقة. إذا لم يكن هناك مثل هذا العنصر ، فإنه يعيد <code>null</code>.</div> + +<h2 id="تركيب_الجملة">تركيب الجملة</h2> + +<pre class="syntaxbox notranslate">var <var>closestElement</var> = <var>targetElement</var>.closest(<var>selectors</var>); +</pre> + +<h3 id="المعاملات">المعاملات</h3> + +<ul> + <li><code><var>selectors</var></code> is a {{domxref("DOMString")}} containing a selector list.<br> + ex: <code>p:hover, .toto + q</code></li> +</ul> + +<h3 id="القيمة_المرجعة">القيمة المرجعة</h3> + +<ul> + <li><code><var>closestElement</var></code> is the {{domxref("Element")}} which is the closest ancestor of the selected element. It may be <code>null</code>.</li> +</ul> + +<h3 id="استثناءات">استثناءات</h3> + +<ul> + <li>{{exception("SyntaxError")}} is thrown if the <code><var>selectors</var></code> is not a valid selector list string.</li> +</ul> + +<h2 id="مثال">مثال</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><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></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js notranslate">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</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p dir="rtl">بالنسبة للمتصفحات التي لا تدعم ()Element.closest ، ولكنها تدعم ال()element.matches (أو ما يعادله سابقًا ، بمعنى IE9 +) ، توجد تعبئة متعددة:</p> + +<pre class="brush: js notranslate">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; + }; +}</pre> + +<p dir="rtl">ومع ذلك ، إذا كنت تحتاج بالفعل إلى دعم IE 8 ، فإن polyfill التالي سيقوم بالمهمة ببطء شديد ، ولكن في النهاية. ومع ذلك ، ستدعم فقط محددات CSS 2.1 في IE 8 ، ويمكن أن تسبب تأخر كبير في إنتاج المواقع .</p> + +<pre class="brush: js notranslate">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; + }; +} +</pre> + +<h2 id="مواصفات">مواصفات</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">مواصفات</th> + <th scope="col">الحالة</th> + <th scope="col">تعليق</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-element-closest', 'Element.closest()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>تعريف ابتدائي.</td> + </tr> + </tbody> +</table> + +<h2 id="التوافق_مع_المتصفحات">التوافق مع المتصفحات</h2> + +<div> +<div class="hidden" dir="rtl">يتم إنشاء جدول التوافق في هذه الصفحة من البيانات المنظمة. إذا كنت ترغب في المساهمة في البيانات ، يرجى مراجعة https://github.com/mdn/browser-compat-data وإرسال طلب سحب إلينا.</div> + +<p>{{Compat("api.Element.closest")}}</p> + +<h3 id="ملاحظات_التوافق">ملاحظات التوافق</h3> + +<ul dir="rtl"> + <li>في Edge 15-18 <code>document.createElement(tagName).closest(tagName)</code> ستعيد <code>null</code> ذا كان العنصر غير متصل أولاً (بشكل مباشر أو غير مباشر) بObject السياق ، على سبيل المثال {{domxref ("Document")}}<br> + Object في حالة DOM العادي.</li> +</ul> +</div> + +<h2 id="إقرأ_أيضا">إقرأ أيضا</h2> + +<ul> + <li>The {{domxref("Element")}} interface.</li> + <li> + <div class="syntaxbox"><a href="/en-US/docs/Web/Guide/CSS/Getting_started/Selectors">The syntax of Selectors</a></div> + </li> + <li> + <div class="syntaxbox">Other methods that take selectors: {{domxref("element.querySelector()")}} and {{domxref("element.matches()")}}.</div> + </li> +</ul> 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 +--- +<p>{{ APIRef("DOM") }}</p> + +<p><span class="seoSummary"><strong><code>Element</code></strong> 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 <code>Element</code>.</span> 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.</p> + +<p>Languages outside the realm of the Web platform, like XUL through the <code>XULElement</code> interface, also implement <code>Element</code>.</p> + +<p>{{InheritanceDiagram}}</p> + +<h2 id="Properties" name="Properties">Properties</h2> + +<p><em>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")}}, </em>and {{domxref("Animatable")}}.</p> + +<dl> + <dt>{{ domxref("Element.assignedSlot")}} {{experimental_inline}} {{readOnlyInline}}</dt> + <dd>Returns the {{domxref("HTMLSlotElement")}} interface associated with the element.</dd> + <dt>{{ domxref("Element.attributes") }} {{readOnlyInline}}</dt> + <dd>Returns a {{ domxref("NamedNodeMap") }} object containing the assigned attributes of the corresponding HTML element.</dd> + <dt>{{ domxref("Element.classList") }} {{readOnlyInline}}</dt> + <dd>Returns a {{ domxref("DOMTokenList") }} containing the list of class attributes.</dd> + <dt>{{ domxref("Element.className") }}</dt> + <dd>Is a {{domxref("DOMString")}} representing the class of the element.</dd> + <dt>{{ domxref("Element.clientHeight") }} {{experimental_inline}} {{readOnlyInline}}</dt> + <dd>Returns a {{jsxref("Number")}} representing the inner height of the element.</dd> + <dt>{{ domxref("Element.clientLeft") }} {{experimental_inline}} {{readOnlyInline}}</dt> + <dd>Returns a {{jsxref("Number")}} representing the width of the left border of the element.</dd> + <dt>{{ domxref("Element.clientTop") }} {{experimental_inline}} {{readOnlyInline}}</dt> + <dd>Returns a {{jsxref("Number")}} representing the width of the top border of the element.</dd> + <dt>{{ domxref("Element.clientWidth") }} {{experimental_inline}} {{readOnlyInline}}</dt> + <dd>Returns a {{jsxref("Number")}} representing the inner width of the element.</dd> + <dt>{{domxref("Element.computedName")}} {{readOnlyInline}}</dt> + <dd>Returns a {{domxref("DOMString")}} containing the label exposed to accessibility.</dd> + <dt>{{domxref("Element.computedRole")}} {{readOnlyInline}}</dt> + <dd>Returns a {{domxref("DOMString")}} containing the ARIA role that has been applied to a particular element. </dd> + <dt>{{ domxref("Element.id") }}</dt> + <dd>Is a {{domxref("DOMString")}} representing the id of the element.</dd> + <dt>{{ domxref("Element.innerHTML") }}</dt> + <dd>Is a {{domxref("DOMString")}} representing the markup of the element's content.</dd> + <dt>{{ domxref("Element.localName") }} {{readOnlyInline}}</dt> + <dd>A {{domxref("DOMString")}} representing the local part of the qualified name of the element.</dd> + <dt>{{domxref("Element.namespaceURI")}} {{readonlyInline}}</dt> + <dd>The namespace URI of the element, or <code>null</code> if it is no namespace. + <div class="note"> + <p><strong>Note:</strong> In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the <code><a class="linkification-ext external" href="http://www.w3.org/1999/xhtml" title="Linkification: http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code> namespace in both HTML and XML trees. {{ gecko_minversion_inline("1.9.2") }}</p> + </div> + </dd> + <dt>{{ domxref("NonDocumentTypeChildNode.nextElementSibling") }} {{readOnlyInline}}</dt> + <dd>Is a {{ domxref("Element") }}, the element immediately following the given one in the tree, or <code>null</code> if there's no sibling node.</dd> + <dt>{{ domxref("Element.outerHTML") }} {{experimental_inline}}</dt> + <dd>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.</dd> + <dt>{{ domxref("Element.prefix") }} {{readOnlyInline}}</dt> + <dd>A {{domxref("DOMString")}} representing the namespace prefix of the element, or <code>null</code> if no prefix is specified.</dd> + <dt>{{ domxref("NonDocumentTypeChildNode.previousElementSibling") }} {{readOnlyInline}}</dt> + <dd>Is a {{ domxref("Element") }}, the element immediately preceding the given one in the tree, or <code>null</code> if there is no sibling element.</dd> + <dt>{{ domxref("Element.scrollHeight") }} {{experimental_inline}} {{readOnlyInline}}</dt> + <dd>Returns a {{jsxref("Number")}} representing the scroll view height of an element.</dd> + <dt>{{ domxref("Element.scrollLeft") }} {{experimental_inline}}</dt> + <dd>Is a {{jsxref("Number")}} representing the left scroll offset of the element.</dd> + <dt>{{ domxref("Element.scrollLeftMax") }} {{non-standard_inline}} {{readOnlyInline}}</dt> + <dd>Returns a {{jsxref("Number")}} representing the maximum left scroll offset possible for the element.</dd> + <dt>{{ domxref("Element.scrollTop") }} {{experimental_inline}}</dt> + <dd>Is a {{jsxref("Number")}} representing the top scroll offset the element.</dd> + <dt>{{ domxref("Element.scrollTopMax") }} {{non-standard_inline}} {{readOnlyInline}}</dt> + <dd>Returns a {{jsxref("Number")}} representing the maximum top scroll offset possible for the element.</dd> + <dt>{{ domxref("Element.scrollWidth") }} {{experimental_inline}} {{readOnlyInline}}</dt> + <dd>Returns a {{jsxref("Number")}} representing the scroll view width of the element.</dd> + <dt>{{domxref("Element.shadowRoot") }} {{experimental_inline}} {{readOnlyInline}}</dt> + <dd>Returns the youngest shadow root that is hosted by the element.</dd> + <dt>{{domxref("Element.slot")}} {{experimental_inline}}</dt> + <dd>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.</dd> + <dt>{{domxref("Element.tabStop")}} {{non-standard_inline}}</dt> + <dd>Is a {{jsxref("Boolean")}} indicating if the element can receive input focus via the tab key.</dd> + <dt>{{ domxref("Element.tagName") }} {{readOnlyInline}}</dt> + <dd>Returns a {{domxref("String")}} with the name of the tag for the given element.</dd> + <dt>{{ domxref("Element.undoManager")}} {{experimental_inline}} {{readOnlyInline}}</dt> + <dd>Returns the {{domxref("UndoManager")}} associated with the element.</dd> + <dt>{{ domxref("Element.undoScope")}} {{experimental_inline}}</dt> + <dd>Is a {{jsxref("Boolean")}} indicating if the element is an undo scope host, or not.</dd> +</dl> + +<div class="note"> +<p><strong>Note:</strong> DOM Level 3 defined <code>namespaceURI</code>, <code>localName</code> and <code>prefix</code> on the {{domxref("Node")}} interface. In DOM4 they were moved to <code>Element</code>.</p> + +<p>This change is implemented in Chrome since version 46.0 and Firefox since version 48.0.</p> +</div> + +<h3 id="Handlers" name="Handlers">Event handlers</h3> + +<dl> + <dt>{{ domxref("Element.ongotpointercapture") }}</dt> + <dd>Returns the event handler for the {{event("gotpointercapture")}} event type.</dd> + <dt>{{ domxref("Element.onlostpointercapture") }}</dt> + <dd>Returns the event handler for the {{event("lostpointercapture")}} event type.</dd> +</dl> + +<h4 id="Obsolete_event_handlers">Obsolete event handlers</h4> + +<dl> + <dt>{{ domxref("Element.onwheel") }}</dt> + <dd>Returns the event handling code for the <code>wheel</code> event. <strong>This is now implemented on {{domxref("GlobalEventHandlers.onwheel", "GlobalEventHandlers")}}.</strong></dd> +</dl> + +<h2 id="Methods" name="Methods">Methods</h2> + +<p><em>Inherits methods from its parents {{domxref("Node")}}, and its own parent, {{domxref("EventTarget")}}<em>, and implements those of {{domxref("ParentNode")}}, {{domxref("ChildNode")}}<em>, {{domxref("NonDocumentTypeChildNode")}}, </em></em>and {{domxref("Animatable")}}.</em></p> + +<dl> + <dt>{{ domxref("EventTarget.addEventListener()") }}</dt> + <dd>Registers an event handler to a specific event type on the element.</dd> + <dt>{{domxref("Element.attachShadow()")}} {{experimental_inline}}</dt> + <dd>Attatches a shadow DOM tree to the specified element and returns a reference to its {{domxref("ShadowRoot")}}.</dd> + <dt>{{domxref("Element.animate()")}} {{experimental_inline}}</dt> + <dd>A shortcut method to create and run an animation on an element. Returns the created Animation object instance.</dd> + <dt>{{ domxref("Element.closest()")}} {{experimental_inline}}</dt> + <dd>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.</dd> + <dt>{{ domxref("Element.createShadowRoot()")}} {{experimental_inline}} {{deprecated_inline()}}</dt> + <dd>Creates a <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a> on on the element, turning it into a shadow host. Returns a {{domxref("ShadowRoot")}}.</dd> + <dt>{{ domxref("EventTarget.dispatchEvent()") }}</dt> + <dd>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.</dd> + <dt>{{domxref("Element.getAnimations()")}} {{experimental_inline}}</dt> + <dd>Returns an array of Animation objects currently active on the element.</dd> + <dt>{{ domxref("Element.getAttribute()") }}</dt> + <dd>Retrieves the value of the named attribute from the current node and returns it as an {{jsxref("Object")}}.</dd> + <dt>{{ domxref("Element.getAttributeNames()") }}</dt> + <dd>Returns an array of attribute names from the current element.</dd> + <dt>{{ domxref("Element.getAttributeNS()") }}</dt> + <dd>Retrieves the value of the attribute with the specified name and namespace, from the current node and returns it as an {{jsxref("Object")}}.</dd> + <dt>{{ domxref("Element.getAttributeNode()") }} {{obsolete_inline}}</dt> + <dd>Retrieves the node representation of the named attribute from the current node and returns it as an {{ domxref("Attr") }}.</dd> + <dt>{{ domxref("Element.getAttributeNodeNS()") }} {{obsolete_inline}}</dt> + <dd>Retrieves the node representation of the attribute with the specified name and namespace, from the current node and returns it as an {{ domxref("Attr") }}.</dd> + <dt>{{ domxref("Element.getBoundingClientRect()") }}</dt> + <dd>Returns the size of an element and its position relative to the viewport.</dd> + <dt>{{ domxref("Element.getClientRects()") }}</dt> + <dd>Returns a collection of rectangles that indicate the bounding rectangles for each line of text in a client.</dd> + <dt>{{ domxref("Element.getElementsByClassName()") }}</dt> + <dd>Returns a live {{ domxref("HTMLCollection") }} that contains all descendants of the current element that possess the list of classes given in the parameter.</dd> + <dt>{{ domxref("Element.getElementsByTagName()") }}</dt> + <dd>Returns a live {{ domxref("HTMLCollection") }} containing all descendant elements, of a particular tag name, from the current element.</dd> + <dt>{{ domxref("Element.getElementsByTagNameNS()") }}</dt> + <dd>Returns a live {{ domxref("HTMLCollection") }} containing all descendant elements, of a particular tag name and namespace, from the current element.</dd> + <dt>{{ domxref("Element.hasAttribute()") }}</dt> + <dd>Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute or not.</dd> + <dt>{{ domxref("Element.hasAttributeNS()") }}</dt> + <dd>Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute, in the specified namespace, or not.</dd> + <dt>{{ domxref("Element.hasAttributes()") }}</dt> + <dd>Returns a {{jsxref("Boolean")}} indicating if the element has one or more HTML attributes present.</dd> + <dt>{{ domxref("Element.insertAdjacentElement") }} {{experimental_inline}}</dt> + <dd>Inserts a given element node at a given position relative to the element it is invoked upon.</dd> + <dt>{{ domxref("Element.insertAdjacentHTML") }} {{experimental_inline}}</dt> + <dd>Parses the text as HTML or XML and inserts the resulting nodes into the tree in the position given.</dd> + <dt>{{ domxref("Element.insertAdjacentText") }} {{experimental_inline}}</dt> + <dd>Inserts a given text node at a given position relative to the element it is invoked upon.</dd> + <dt>{{ domxref("Element.matches()") }}<code> </code>{{experimental_inline}}</dt> + <dd>Returns a {{jsxref("Boolean")}} indicating whether or not the element would be selected by the specified selector string.</dd> + <dt>{{ domxref("Element.querySelector()") }}</dt> + <dd>Returns the first {{ domxref("Node") }} which matches the specified selector string relative to the element.</dd> + <dt>{{ domxref("Element.querySelectorAll") }}</dt> + <dd>Returns a {{ domxref("NodeList") }} of nodes which match the specified selector string relative to the element.</dd> + <dt>{{ domxref("Element.releasePointerCapture")}}</dt> + <dd>Releases (stops) pointer capture that was previously set for a specific {{domxref("PointerEvent","pointer event")}}.</dd> + <dt>{{domxref("ChildNode.remove()")}} {{experimental_inline}}</dt> + <dd>Removes the element from the children list of its parent.</dd> + <dt>{{ domxref("Element.removeAttribute()") }}</dt> + <dd>Removes the named attribute from the current node.</dd> + <dt>{{ domxref("Element.removeAttributeNS()") }}</dt> + <dd>Removes the attribute with the specified name and namespace, from the current node.</dd> + <dt>{{ domxref("Element.removeAttributeNode()") }} {{obsolete_inline}}</dt> + <dd>Removes the node representation of the named attribute from the current node.</dd> + <dt>{{ domxref("EventTarget.removeEventListener()") }}</dt> + <dd>Removes an event listener from the element.</dd> + <dt>{{ domxref("Element.requestFullscreen()") }} {{experimental_inline}}</dt> + <dd>Asynchronously asks the browser to make the element full-screen.</dd> + <dt>{{ domxref("Element.requestPointerLock()")}} {{experimental_inline}}</dt> + <dd>Allows to asynchronously ask for the pointer to be locked on the given element.</dd> +</dl> + +<dl> + <dt>{{ domxref("Element.scrollIntoView()") }} {{experimental_inline}}</dt> + <dd>Scrolls the page until the element gets into the view.</dd> + <dt>{{ domxref("Element.setAttribute()") }}</dt> + <dd>Sets the value of a named attribute of the current node.</dd> + <dt>{{ domxref("Element.setAttributeNS()") }}</dt> + <dd>Sets the value of the attribute with the specified name and namespace, from the current node.</dd> + <dt>{{ domxref("Element.setAttributeNode()") }} {{obsolete_inline}}</dt> + <dd>Sets the node representation of the named attribute from the current node.</dd> + <dt>{{ domxref("Element.setAttributeNodeNS()") }} {{obsolete_inline}}</dt> + <dd>Setw the node representation of the attribute with the specified name and namespace, from the current node.</dd> + <dt>{{ domxref("Element.setCapture()") }} {{non-standard_inline}}</dt> + <dd>Sets up mouse event capture, redirecting all mouse events to this element.</dd> + <dt>{{domxref("Element.setPointerCapture()")}}</dt> + <dd>Designates a specific element as the capture target of future {{domxref("PointerEvent","pointer events")}}.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Web Animations", '', '')}}</td> + <td>{{Spec2("Web Animations")}}</td> + <td>Added the <code>getAnimations()</code> method.</td> + </tr> + <tr> + <td>{{SpecName('Undo Manager', '', 'Element')}}</td> + <td>{{Spec2('Undo Manager')}}</td> + <td>Added the <code>undoScope</code> and <code>undoManager</code> properties.</td> + </tr> + <tr> + <td>{{SpecName('Pointer Events 2', '#extensions-to-the-element-interface', 'Element')}}</td> + <td>{{Spec2('Pointer Events 2')}}</td> + <td>Added the following event handlers: <code>ongotpointercapture</code> and <code>onlostpointercapture</code>.<br> + Added the following methods: <code>setPointerCapture()</code> and <code>releasePointerCapture()</code>.</td> + </tr> + <tr> + <td>{{SpecName('Pointer Events', '#extensions-to-the-element-interface', 'Element')}}</td> + <td>{{Spec2('Pointer Events')}}</td> + <td>Added the following event handlers: <code>ongotpointercapture</code> and <code>onlostpointercapture</code>.<br> + Added the following methods: <code>setPointerCapture()</code> and <code>releasePointerCapture()</code>.</td> + </tr> + <tr> + <td>{{SpecName('Selectors API Level 1', '#interface-definitions', 'Element')}}</td> + <td>{{Spec2('Selectors API Level 1')}}</td> + <td>Added the following methods: <code>querySelector()</code> and <code>querySelectorAll()</code>.</td> + </tr> + <tr> + <td>{{SpecName('Pointer Lock', 'index.html#element-interface', 'Element')}}</td> + <td>{{Spec2('Pointer Lock')}}</td> + <td>Added the <code>requestPointerLock()</code> method.</td> + </tr> + <tr> + <td>{{SpecName('Fullscreen', '#api', 'Element')}}</td> + <td>{{Spec2('Fullscreen')}}</td> + <td>Added the <code>requestFullscreen()</code> method.</td> + </tr> + <tr> + <td>{{SpecName('DOM Parsing', '#extensions-to-the-element-interface', 'Element')}}</td> + <td>{{Spec2('DOM Parsing')}}</td> + <td>Added the following properties: <code>innerHTML</code>, and <code>outerHTML</code>.<br> + Added the following method: <code>insertAdjacentHTML()</code>.</td> + </tr> + <tr> + <td>{{SpecName('CSSOM View', '#extensions-to-the-element-interface', 'Element')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + <td>Added the following properties: <code>scrollTop</code>, <code>scrollLeft</code>, <code>scrollWidth</code>, <code>scrollHeight</code>, <code>clientTop</code>, <code>clientLeft</code>, <code>clientWidth</code>, and <code>clientHeight</code>.<br> + Added the following methods: <code>getClientRects()</code>, <code>getBoundingClientRect()</code>, and <code>scrollIntoView()</code>.</td> + </tr> + <tr> + <td>{{SpecName('Element Traversal', '#ecmascript-bindings', 'Element')}}</td> + <td>{{Spec2('Element Traversal')}}</td> + <td>Added inheritance of the {{domxref("ElementTraversal")}} interface.</td> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#interface-element', 'Element')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Removed the following methods: <code>closest()</code>, <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, and <code>setIdAttributeNode()</code>.<br> + Removed the <code>schemaTypeInfo</code> property.<br> + Modified the return value of <code>getElementsByTag()</code> and <code>getElementsByTagNS()</code>.<br> + Moved <code>hasAttributes()</code> from the <code>Node</code> interface to this one.<br> + Inserted <code>insertAdjacentElement()</code> and <code>insertAdjacentText()</code>.</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-745549614', 'Element')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Added the following methods: <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, and <code>setIdAttributeNode()</code>. These methods were never implemented and have been removed in later specifications.<br> + Added the <code>schemaTypeInfo</code> property. This property was never implemented and has been removed in later specifications.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-745549614', 'Element')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>The <code>normalize()</code> method has been moved to {{domxref("Node")}}.</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-745549614', 'Element')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>1.0</td> + </tr> + <tr> + <td><code>children</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>7.0 with a significant bug [1]<br> + 9.0 according to the spec</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>childElementCount</code>, <code>nextElementSibling</code>, <code>previousElementSibling</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>9.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>firstElementChild</code>, <code>lastElementChild</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>9.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>classList</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.2")}}</td> + <td> </td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>outerHTML</code> {{experimental_inline}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("11")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>clientLeft</code>, <code>clientTop</code> {{experimental_inline}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>getBoundingClientRect()</code>, <code>getClientRects()</code> {{experimental_inline}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>querySelector()</code>, <code>querySelectorAll()</code></td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>8.0</td> + <td>10.0</td> + <td>3.2 (525.3)</td> + </tr> + <tr> + <td><code>insertAdjacentHTML()</code> {{experimental_inline}}</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("8")}}</td> + <td>4.0</td> + <td>7.0</td> + <td>4.0 (527)</td> + </tr> + <tr> + <td><code>setCapture() </code>{{non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("2")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>oncopy</code>, <code>oncut</code>, <code>onpaste</code> {{non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td> </td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>onwheel</code> {{non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("17")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>ongotpointercapture</code>, <code>onlostpointercapture</code>, <code>setPointerCapture()</code>, and <code>releasePointerCapture()</code></td> + <td>{{CompatChrome(52.0)}} [4]</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}} <sup>[3]</sup></td> + <td>10.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>matches()</code> {{experimental_inline}}</td> + <td>{{CompatVersionUnknown}} with the non-standard name <code>webkitMatchesSelector</code></td> + <td>{{CompatVersionUnknown}} {{property_prefix("webkit")}} {{property_prefix("ms")}}</td> + <td>{{CompatGeckoDesktop("1.9.2")}} with the non-standard name <code>mozMatchesSelector</code><br> + {{CompatGeckoDesktop("34")}} with the standard name</td> + <td>9.0 with the non-standard name <code>msMatchesSelector</code></td> + <td>11.5 with the non-standard name <code>oMatchesSelector</code><br> + 15.0 with the non-standard name <code>webkitMatchesSelector</code></td> + <td>5.0 with the non-standard name <code>webkitMatchesSelector</code></td> + </tr> + <tr> + <td><code>requestPointerLock()</code></td> + <td>16.0 {{property_prefix("webkit")}}, behind an about:flags<br> + 22.0 {{property_prefix("webkit")}} (with special cases, progressively lifted see [2])</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("14")}}{{property_prefix("moz")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>requestFullscreen()</code></td> + <td>14.0 {{property_prefix("webkit")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("10")}} {{property_prefix("moz")}}</td> + <td>11.0 {{property_prefix("ms")}}</td> + <td>12.10<br> + 15.0 {{property_prefix("webkit")}}</td> + <td>5.1 {{property_prefix("webkit")}}</td> + </tr> + <tr> + <td><code>undoManager</code> and <code>undoScope</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}} (behind the <code>dom.undo_manager.enabled</code> pref)</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>attributes</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("22")}}<br> + Before this it was available via the {{domxref("Node")}} interface that any <code>element</code> inherits.</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>scrollTopMax()</code> and <code>scrollLeftMax()</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("16")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>closest()</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("35")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>hasAttributes()</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("1.0")}} (on the {{domxref("Node")}} interface)<br> + {{CompatGeckoDesktop("35")}} (on this interface</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>insertAdjacentElement()</code>, <code>insertAdjacentText()</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("48.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>assignedSlot</code>, <code>attatchShadow</code>, <code>shadowRoot</code>, and <code>slot</code></td> + <td>{{CompatChrome(53)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>computedRole</code> and <code>computedName</code></td> + <td>{{CompatChrome(41)}}[4]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>28[4]</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td> </td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>1.0</td> + <td> </td> + </tr> + <tr> + <td><code>scrollTopMax()</code> and <code>scrollLeftMax()</code></td> + <td>{{CompatNo}}</td> + <td> </td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("16")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td> </td> + </tr> + <tr> + <td><code>closest()</code></td> + <td>{{CompatUnknown}}</td> + <td> </td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("35")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td> </td> + </tr> + <tr> + <td><code>hasAttributes()</code></td> + <td>{{CompatVersionUnknown}}</td> + <td> </td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("1.0")}} (on the {{domxref("Node")}} interface)<br> + {{CompatGeckoMobile("35")}} (on this interface</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td> </td> + </tr> + <tr> + <td><code>insertAdjacentElement()</code>, <code>insertAdjacentText()</code></td> + <td>{{CompatVersionUnknown}}</td> + <td> </td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("48.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td> </td> + </tr> + <tr> + <td><code>assignedSlot</code>, <code>attatchShadow</code>, <code>shadowRoot</code>, and <code>slot</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(53.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(53)}}</td> + </tr> + <tr> + <td><code>computedRole</code> and <code>computedName</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>28[4]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[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.</p> + +<p>[2] Chrome 16 allowed <code>webkitRequestPointerLock()</code> 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 <code>webkit-allow-pointer-lock</code> is set to the {{htmlattrxref("sandbox", "iframe")}} attribute.</p> + +<p>[3] Implementation withdrawn. See {{Bug("1166347")}}.</p> + +<p>[4] Behind a flag.</p> 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 +--- +<div dir="rtl">{{APIRef("DOM")}}</div> + +<p dir="rtl">تعمل طريقة ()insertAdjacentHTML ل {{domxref ("Element")}}</p> + +<p dir="rtl">للواجهة على تحليل النص المحدد بتنسيق HTML أو XML وإدراج العقد الناتجة في شجرة DOM في موضع محدد. لا يعيد العنصر الذي يتم استخدامه عليه، وبالتالي لا يفسد العناصر الموجودة داخل هذا العنصر. هذا يتجنب الخطوة الإضافية للتسلسل، مما يجعلها أسرع بكثير من المعالجة المباشر</p> + +<p dir="rtl">{{domxref ("Element.innerHTML","innerHTML")}}.</p> + +<h2 dir="rtl" id="بناء_الجملة">بناء الجملة</h2> + +<pre class="syntaxbox notranslate"><em>element</em>.insertAdjacentHTML(<em>position</em>, <em>text</em>);</pre> + +<h3 dir="rtl" id="العوامل">العوامل</h3> + +<dl> + <dt><code>position الموضع </code></dt> + <dd dir="rtl">{{domxref ("DOMString")}} يمثل الموضع المتعلق بالعنصر element ؛ يجب أن يكون أحد السلاسل strings التالية:</dd> + <dd> + <ul> + <li dir="rtl"><code style="color: red;">'beforebegin'</code>: قبل العنصر <code>element نفسه</code>.</li> + <li dir="rtl"><code style="color: green;">'afterbegin'</code>: داخل العنصر <code>element</code>, قبل التابع الأول له (child).</li> + <li dir="rtl"><code style="color: blue;">'beforeend'</code>: داخل العنصر <code>element</code>, بعد آخر تابع له (child).</li> + <li dir="rtl"><code style="color: magenta;">'afterend'</code>: بعد العنصر <code>element</code> نفسه.</li> + </ul> + </dd> + <dt><code>text النص</code></dt> + <dd dir="rtl">السلسلة (string) المطلوب تحليلها كـ HTML أو XML وإدراجها في الشجرة.</dd> +</dl> + +<h3 dir="rtl" id="تصور_مرئي_لأسماء_المواقع">تصور مرئي لأسماء المواقع</h3> + +<pre class="notranslate"><!-- <strong><code style="color: red;">beforebegin</code></strong> --> +<code style="font-weight: bold;"><p></code> + <!-- <strong><code style="color: green;">afterbegin</code></strong> --> + foo + <!-- <strong><code style="color: blue;">beforeend</code></strong> --> +<code style="font-weight: bold;"></p></code> +<!-- <strong><code style="color: magenta;">afterend</code></strong> --></pre> + +<div class="note" dir="rtl"><strong>ملحوظة</strong>: لا يعمل الوضع قبل البداية والنهاية إلا إذا كانت العقدة في شجرة DOM ولها عنصر أصل.</div> + +<h2 dir="rtl" id="مثال">مثال</h2> + +<pre class="brush: js notranslate">// <div id="one">one</div> +var d1 = document.getElementById('one'); +d1.insertAdjacentHTML('afterend', '<div id="two">two</div>'); + +// </pre> + +<pre class="notranslate">At this point, the new structure is:</pre> + +<pre class="brush: js notranslate">// <div id="one">one</div><div id="two">two</div></pre> + +<h2 dir="rtl" id="ملاحظات">ملاحظات</h2> + +<h3 dir="rtl" id="إعتبارات_أمنية">إعتبارات أمنية</h3> + +<p dir="rtl">عند إدراج HTML في صفحة باستخدام insertAdjacentHTML () ، احرص على عدم استخدام إدخال المستخدم الذي لم يتم تجاوزه.</p> + +<p dir="rtl">لا يُنصح باستخدام insertAdjacentHTML () عند إدراج نص عادي ؛ بدلاً من ذلك ، استخدم خاصية {{domxref ("Node.textContent")}} أو طريقة method {{domxref ("Element.insertAdjacentText ()")}}. هذا لا يفسر المحتوى الذي تم تمريره على أنه HTML ، ولكن بدلاً من ذلك يُدرجه كنص خام.</p> + +<h2 dir="rtl" id="مواصفات">مواصفات</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">مواصفات</th> + <th scope="col">الحالة</th> + <th scope="col">تعليق</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM Parsing', '#dom-element-insertadjacenthtml', 'Element.insertAdjacentHTML()')}}</td> + <td>{{ Spec2('DOM Parsing') }}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="التوافق_مع_المتصفحات">التوافق مع المتصفحات</h2> + +<div class="hidden" dir="rtl">يتم إنشاء جدول التوافق في هذه الصفحة من البيانات المهيكلة. إذا كنت ترغب في المساهمة في البيانات ، يرجى مراجعة https://github.com/mdn/browser-compat-data وإرسال طلب سحب إلينا.</div> + +<p dir="rtl">{{Compat("api.Element.insertAdjacentHTML")}}</p> + +<h2 dir="rtl" id="شاهد_أيضا">شاهد أيضا</h2> + +<ul> + <li>{{domxref("Element.insertAdjacentElement()")}}</li> + <li>{{domxref("Element.insertAdjacentText()")}}</li> + <li>{{domxref("XMLSerializer")}}: Construct a DOM representation of XML text</li> + <li><a class="external" href="https://hacks.mozilla.org/2011/11/insertadjacenthtml-enables-faster-html-snippet-injection/">hacks.mozilla.org guest post</a><span class="external"> by Henri Sivonen including benchmark showing that insertAdjacentHTML can be way faster in some cases.</span></li> +</ul> 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 +--- +<p>{{APIRef("DOM")}}</p> + +<p>The <code><strong>Event</strong></code> interface represents any event of the DOM. It contains common properties and methods to any event.</p> + +<p>A lot of other interfaces inherits, directly or not, from this base interface:</p> + +<div class="index"> +<ul> + <li>{{domxref("AnimationEvent")}}</li> + <li>{{domxref("AudioProcessingEvent")}}</li> + <li>{{domxref("BeforeInputEvent")}}</li> + <li>{{domxref("BeforeUnloadEvent")}}</li> + <li>{{domxref("BlobEvent")}}</li> + <li>{{domxref("ClipboardEvent")}}</li> + <li>{{domxref("CloseEvent")}}</li> + <li>{{domxref("CompositionEvent")}}</li> + <li>{{domxref("CSSFontFaceLoadEvent")}}</li> + <li>{{domxref("CustomEvent")}}</li> + <li>{{domxref("DeviceLightEvent")}}</li> + <li>{{domxref("DeviceMotionEvent")}}</li> + <li>{{domxref("DeviceOrientationEvent")}}</li> + <li>{{domxref("DeviceProximityEvent")}}</li> + <li>{{domxref("DOMTransactionEvent")}}</li> + <li>{{domxref("DragEvent")}}</li> + <li>{{domxref("EditingBeforeInputEvent")}}</li> + <li>{{domxref("ErrorEvent")}}</li> + <li>{{domxref("FocusEvent")}}</li> + <li>{{domxref("GamepadEvent")}}</li> + <li>{{domxref("HashChangeEvent")}}</li> + <li>{{domxref("IDBVersionChangeEvent")}}</li> + <li>{{domxref("InputEvent")}}</li> + <li>{{domxref("KeyboardEvent")}}</li> + <li>{{domxref("MediaStreamEvent")}}</li> + <li>{{domxref("MessageEvent")}}</li> + <li>{{domxref("MouseEvent")}}</li> + <li>{{domxref("MutationEvent")}}</li> + <li>{{domxref("OfflineAudioCompletionEvent")}}</li> + <li>{{domxref("PageTransitionEvent")}}</li> + <li>{{domxref("PointerEvent")}}</li> + <li>{{domxref("PopStateEvent")}}</li> + <li>{{domxref("ProgressEvent")}}</li> + <li>{{domxref("RelatedEvent")}}</li> + <li>{{domxref("RTCDataChannelEvent")}}</li> + <li>{{domxref("RTCIdentityErrorEvent")}}</li> + <li>{{domxref("RTCIdentityEvent")}}</li> + <li>{{domxref("RTCPeerConnectionIceEvent")}}</li> + <li>{{domxref("SensorEvent")}}</li> + <li>{{domxref("StorageEvent")}}</li> + <li>{{domxref("SVGEvent")}}</li> + <li>{{domxref("SVGZoomEvent")}}</li> + <li>{{domxref("TimeEvent")}}</li> + <li>{{domxref("TouchEvent")}}</li> + <li>{{domxref("TrackEvent")}}</li> + <li>{{domxref("TransitionEvent")}}</li> + <li>{{domxref("UIEvent")}}</li> + <li>{{domxref("UserProximityEvent")}}</li> + <li>{{domxref("WheelEvent")}}</li> +</ul> +</div> + +<h2 id="Properties" name="Properties">Constructor</h2> + +<dl> + <dt>{{domxref("Event.Event", "Event()")}}</dt> + <dd>Creates an <code>Event</code> object.</dd> +</dl> + +<h2 id="Properties" name="Properties">Properties</h2> + +<p><em>This interface doesn't inherit any property.</em></p> + +<dl> + <dt>{{domxref("Event.bubbles")}} {{readonlyinline}}</dt> + <dd>A boolean indicating whether the event bubbles up through the DOM or not.</dd> + <dt>{{domxref("Event.cancelable")}} {{readonlyinline}}</dt> + <dd>A boolean indicating whether the event is cancelable.</dd> + <dt>{{domxref("Event.currentTarget")}} {{readonlyinline}}</dt> + <dd>A reference to the currently registered target for the event.</dd> + <dt>{{domxref("Event.defaultPrevented")}} {{readonlyinline}}</dt> + <dd>Indicates whether or not {{domxref("event.preventDefault()")}} has been called on the event.</dd> + <dt>{{domxref("Event.eventPhase")}} {{readonlyinline}}</dt> + <dd>Indicates which phase of the event flow is being processed.</dd> + <dt>{{domxref("Event.explicitOriginalTarget")}} {{non-standard_inline}} {{readonlyinline}}</dt> + <dd>The explicit original target of the event (Mozilla-specific).</dd> + <dt>{{domxref("Event.originalTarget")}} {{non-standard_inline}} {{readonlyinline}}</dt> + <dd>The original target of the event, before any retargetings (Mozilla-specific).</dd> + <dt>{{domxref("Event.target")}} {{readonlyinline}}</dt> + <dd>A reference to the target to which the event was originally dispatched.</dd> + <dt>{{domxref("Event.timeStamp")}} {{readonlyinline}}</dt> + <dd>The time that the event was created.</dd> + <dt>{{domxref("Event.type")}} {{readonlyinline}}</dt> + <dd>The name of the event (case-insensitive).</dd> + <dt>{{domxref("Event.isTrusted")}} {{readonlyinline}}</dt> + <dd>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 <a href="/en-US/docs/DOM/event.initEvent">event.initEvent</a>)</dd> +</dl> + +<h2 id="Methods" name="Methods">Methods</h2> + +<p><em>This interface doesn't inherit any method.</em></p> + +<dl> + <dt>{{domxref("Event.initEvent()")}} {{deprecated_inline}}</dt> + <dd>Initializes the value of an Event created. If the event has already being dispatched, this method does nothing.</dd> + <dt>{{domxref("Event.preventBubble()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}</dt> + <dd>Prevents the event from bubbling. Obsolete, use {{domxref("event.stopPropagation")}} instead.</dd> + <dt>{{domxref("Event.preventCapture()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}</dt> + <dd>Obsolete, use {{domxref("event.stopPropagation")}} instead.</dd> + <dt>{{domxref("Event.preventDefault()")}}</dt> + <dd>Cancels the event (if it is cancelable).</dd> + <dt>{{domxref("Event.stopImmediatePropagation()")}}</dt> + <dd>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)</dd> + <dt>{{domxref("Event.stopPropagation()")}}</dt> + <dd>Stops the propagation of events further along in the DOM.</dd> + <dt>{{domxref("Event.getPreventDefault()")}} {{non-standard_inline}}</dt> + <dd>?</dd> +</dl> + +<h2 id="See_also" name="See_also">See also</h2> + +<ul> + <li>Types of events available: <a href="/en-US/docs/Web/Reference/Events">Event reference</a></li> + <li><a href="/en-US/docs/Web/API/Event/Comparison_of_Event_Targets">Comparison of Event Targets</a> (target vs currentTarget vs relatedTarget vs originalTarget)</li> + <li><a href="/en-US/docs/Web/Guide/DOM/Events/Creating_and_triggering_events">Creating and triggering custom events</a></li> + <li>For Firefox add-on developers: + <ul> + <li><a href="/en-US/docs/Listening_to_events_in_Firefox_extensions">Listening to events in Firefox extensions</a></li> + <li><a href="/en-US/docs/Listening_to_events_on_all_tabs">Listening to events on all tabs</a></li> + </ul> + </li> + <li><a class="link-https" href="https://wiki.mozilla.org/Events">Mozilla related events in real life at wiki.mozilla.org </a></li> +</ul> 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 +--- +<div>{{APIRef("Geolocation API")}}</div> + +<p>The <code><strong>Geolocation</strong></code> 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.</p> + +<p>An object with this interface is obtained using the {{domxref("NavigatorGeolocation.geolocation")}} property implemented by the {{domxref("Navigator")}} object.</p> + +<div class="note"> +<p><strong>Note:</strong> 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.</p> +</div> + +<h2 id="Properties">Properties</h2> + +<p><em>The <code>Geolocation</code> interface neither implements, nor inherits any property.</em></p> + +<h2 id="Methods">Methods</h2> + +<p><em><em>The <code>Geolocation</code> interface doesn't inherit any </em>method</em>.</p> + +<dl> + <dt>{{domxref("Geolocation.getCurrentPosition()")}}</dt> + <dd>Determines the device's current location and gives back a {{domxref("Position")}} object with the data.</dd> + <dt>{{domxref("Geolocation.watchPosition()")}}</dt> + <dd>Returns a <code>long</code> value representing the newly established callback function to be invoked whenever the device location changes.</dd> + <dt>{{domxref("Geolocation.clearWatch()")}}</dt> + <dd>Removes the particular handler previously installed using <code>watchPosition()</code>.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Geolocation')}}</td> + <td>{{Spec2('Geolocation')}}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>5</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>9</td> + <td>10.60<br> + Removed in 15.0<br> + Reintroduced in 16.0</td> + <td>5</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatGeckoMobile("4")}}</td> + <td>{{CompatUnknown()}}</td> + <td>10.60</td> + <td>{{CompatUnknown()}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></li> +</ul> 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 +--- +<p>The <strong>geolocation API</strong> 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.</p> + +<h2 id="The_geolocation_object">The geolocation object</h2> + +<p>The geolocation API is published through the {{domxref("navigator.geolocation")}} object.</p> + +<p>If the object exists, geolocation services are available. You can test for the presence of geolocation thusly:</p> + +<pre class="brush: js">if ("geolocation" in navigator) { + /* geolocation is available */ +} else { + /* geolocation IS NOT available */ +} +</pre> + +<div class="note"> +<p><strong>Note:</strong> On Firefox 24 and older versions, <code>"geolocation" in navigator</code> always returned <code>true</code> even if the API was disabled. This has been fixed with <a href="/en-US/docs/Mozilla/Firefox/Releases/25/Site_Compatibility">Firefox 25</a> to comply with the spec. ({{bug(884921)}}).</p> +</div> + +<h3 id="Getting_the_current_position">Getting the current position</h3> + +<p>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.</p> + +<div class="note"> +<p><strong>Note:</strong> 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()")}}.</p> +</div> + +<pre class="brush: js">navigator.geolocation.getCurrentPosition(function(position) { + do_something(position.coords.latitude, position.coords.longitude); +});</pre> + +<p>The above example will cause the <code>do_something()</code> function to execute when the location is obtained.</p> + +<h3 id="Watching_the_current_position">Watching the current position</h3> + +<p>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.</p> + +<div class="note"> +<p><strong>Note:</strong> You can use {{domxref("Geolocation.watchPosition()","watchPosition()")}} without an initial {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} call.</p> +</div> + +<pre class="brush: js">var watchID = navigator.geolocation.watchPosition(function(position) { + do_something(position.coords.latitude, position.coords.longitude); +});</pre> + +<p>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.</p> + +<pre class="brush: js">navigator.geolocation.clearWatch(watchID); +</pre> + +<h3 id="Fine_tuning_response">Fine tuning response</h3> + +<p>Both {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} and {{domxref("Geolocation.watchPosition()","watchPosition()")}} accept a success callback, an optional error callback, and an optional <a href="/en-US/docs/Web/API/PositionOptions">PositionOptions</a> object.</p> + +<p>{{page("/en-US/docs/DOM/navigator.geolocation.getCurrentPosition","PositionOptions")}}</p> + +<p>A call to {{domxref("Geolocation.watchPosition()","watchPosition")}} could look like:</p> + +<pre class="brush: js">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);</pre> + +<p><a id="fck_paste_padding">A demo of watchPosition in use: </a><a href="http://www.thedotproduct.org/experiments/geo/">http://www.thedotproduct.org/experiments/geo/</a><br> + <a id="fck_paste_padding"></a></p> + +<h2 id="Describing_a_position">Describing a position</h2> + +<p>The user's location is described using a <code>Position</code> object referencing a <code>Coordinates</code> object.</p> + +<p>{{page("/en-US/docs/DOM/navigator/geolocation/getCurrentPosition","Position")}}</p> + +<p>{{page("/en-US/docs/DOM/navigator/geolocation/getCurrentPosition","Coordinates")}}</p> + +<h2 id="Handling_errors">Handling errors</h2> + +<p>The error callback function, if provided when calling <code>getCurrentPosition()</code> or <code>watchPosition()</code>, expects a <a href="/en-US/docs/Web/API/PositionError">PositionError</a> object as its first parameter.</p> + +<pre class="brush: js">function errorCallback(error) { + alert('ERROR(' + error.code + '): ' + error.message); +}; +</pre> + +<p>{{page("/en-US/docs/DOM/navigator/geolocation/getCurrentPosition","PositionError")}}</p> + +<h2 id="Geolocation_Live_Example">Geolocation Live Example</h2> + +<div class="hidden"> +<pre class="brush: css">body { + padding: 20px; + background-color:#ffffc9 +} + +p { margin : 0; } +</pre> +</div> + +<h3 id="HTML_Content">HTML Content</h3> + +<pre class="brush: html;"><p><button onclick="geoFindMe()">Show my location</button></p> +<div id="out"></div> +</pre> + +<h3 id="JavaScript_Content">JavaScript Content</h3> + +<pre class="brush: js;">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); +} +</pre> + +<h3 id="Live_Result">Live Result</h3> + +<p>{{EmbedLiveSample('Geolocation_Live_Example', 350, 410)}}</p> + +<h2 id="Prompting_for_permission">Prompting for permission</h2> + +<p>Any add-on hosted on <a href="https://addons.mozilla.org/">addons.mozilla.org</a> 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 <code>pref</code> parameter, if applicable. The function provided in the <code>callback</code> parameter will be called with a boolean value indicating the user's response. If <code>true</code>, the add-on may access geolocation data.</p> + +<pre class="brush: js">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); }); +</pre> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>5</td> + <td>{{CompatGeckoDesktop("1.9.1")}}<sup>[1]</sup></td> + <td>9</td> + <td>10.60<br> + {{CompatNo}} 15.0<br> + 16.0</td> + <td>5</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("4")}}</td> + <td>1.0.1</td> + <td>{{CompatUnknown}}</td> + <td>10.60<br> + {{CompatNo}} 15.0<br> + 16.0</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[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 <a href="http://www.mozilla.com/en-US/legal/privacy/">Privacy Policy</a> and Google's <a href="http://www.google.com/privacy-lsf.html">Privacy Policy</a> covering how this data can be used.</p> + +<p>Firefox 3.6 (Gecko 1.9.2) added support for using the <a href="http://catb.org/gpsd/">GPSD</a> (GPS daemon) service for geolocation on Linux.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("navigator.geolocation")}}</li> + <li><a href="/en-US/Apps/Build/gather_and_modify_data/Plotting_yourself_on_the_map">Plotting yourself on the map</a></li> + <li><a href="http://www.w3.org/TR/geolocation-API/" rel="external">Geolocation API on w3.org</a></li> + <li><a href="/en-US/demos/tag/tech:geolocation">Demos about the Geolocation API</a></li> + <li><a href="https://hacks.mozilla.org/2013/10/who-moved-my-geolocation/">Who moved my geolocation?</a> (Hacks blog)</li> +</ul> 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 +--- +<div>{{securecontext_header}}{{DefaultAPISidebar("Geolocation API")}}</div> + +<p>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.</p> + +<h2 id="The_geolocation_object">The geolocation object</h2> + +<p>The <a href="/en-US/docs/Web/API/Geolocation">Geolocation</a> API is available through the {{domxref("navigator.geolocation")}} object.</p> + +<p>If the object exists, geolocation services are available. You can test for the presence of geolocation thusly:</p> + +<pre class="brush: js">if ("geolocation" in navigator) { + /* geolocation is available */ +} else { + /* geolocation IS NOT available */ +} +</pre> + +<h3 id="Getting_the_current_position">Getting the current position</h3> + +<p>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.</p> + +<div class="note"> +<p><strong>Note:</strong> 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()")}}.</p> +</div> + +<pre class="brush: js">navigator.geolocation.getCurrentPosition(function(position) { + do_something(position.coords.latitude, position.coords.longitude); +});</pre> + +<p>The above example will cause the <code>do_something()</code> function to execute when the location is obtained.</p> + +<h3 id="Watching_the_current_position">Watching the current position</h3> + +<p>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.</p> + +<div class="note"> +<p><strong>Note:</strong> You can use {{domxref("Geolocation.watchPosition()","watchPosition()")}} without an initial {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} call.</p> +</div> + +<pre class="brush: js">var watchID = navigator.geolocation.watchPosition(function(position) { + do_something(position.coords.latitude, position.coords.longitude); +});</pre> + +<p>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.</p> + +<pre class="brush: js">navigator.geolocation.clearWatch(watchID); +</pre> + +<h3 id="Fine_tuning_the_response">Fine tuning the response</h3> + +<p>Both {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} and {{domxref("Geolocation.watchPosition()","watchPosition()")}} accept a success callback, an optional error callback, and an optional <code><a href="/en-US/docs/Web/API/PositionOptions">PositionOptions</a></code> object.</p> + +<p>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.</p> + +<p>A call to {{domxref("Geolocation.watchPosition()","watchPosition")}} could look like:</p> + +<pre class="brush: js">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);</pre> + +<h2 id="Describing_a_position">Describing a position</h2> + +<p>The user's location is described using a {{domxref("GeolocationPosition")}} object instance, which itself contains a {{domxref("GeolocationCoordinates")}} object instance.</p> + +<p>The <code>GeolocationPosition</code> instance contains only two things, a <code>coords</code> property that contains the <code>GeolocationCoordinates</code> instance, and a timestamp property that contains a {{domxref("DOMTimeStamp")}} instance representing the time at which the position data was retrieved.</p> + +<p>The <code>GeolocationCoordinates</code> instance contains a number of properties, but the two you'll use most commonly are <code>latitude</code> and <code>longitude</code>, which are what you need to draw your position on a map. Hence many Geolocation success callbacks look fairly simple:</p> + +<pre class="brush: js">function success(position) { + const latitude = position.coords.latitude; + const longitude = position.coords.longitude; + + // Do something with your latitude and longitude +}</pre> + +<p>You can however get a number of other bits of information from a <code>GeolocationCoordinates</code> object, including altitude, speed, what direction the device is facing, and an accuracy measure of the altitude, longitude, and latitude data.</p> + +<h2 id="Handling_errors">Handling errors</h2> + +<p>The error callback function, if provided when calling <code>getCurrentPosition()</code> or <code>watchPosition()</code>, expects a <code><a href="/en-US/docs/Web/API/GeolocationPositionError">GeolocationPositionError</a></code> object instance as its first parameter. This object type contains two properties, a <code>code</code> indicating what type of error has been returned, and a human-readable <code>message</code> that describes what the error code means.</p> + +<p>You could use it like so:</p> + +<pre class="brush: js">function errorCallback(error) { + alert('ERROR(' + error.code + '): ' + error.message); +}; +</pre> + +<h2 id="Examples">Examples</h2> + +<p>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 <code>openstreetmap.org </code>URL that will show their location.</p> + +<div class="hidden"> +<pre class="brush: css">body { + padding: 20px; + background-color:#ffffc9 +} + +button { + margin: .5rem 0; +} +</pre> +</div> + +<h3 id="HTML_Content">HTML Content</h3> + +<pre class="brush: html;"><button id = "find-me">Show my location</button><br/> +<p id = "status"></p> +<a id = "map-link" target="_blank"></a> +</pre> + +<h3 id="JavaScript_Content">JavaScript Content</h3> + +<pre class="brush: js">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); +</pre> + +<h3 id="Live_Result">Live Result</h3> + +<p>{{EmbedLiveSample('Examples', 350, 150, "", "", "", "geolocation")}}</p> 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 +--- +<p dir="rtl">با استفاده از آبجکت {{ domxref("window") }} می توانید به تاریخچه مرورگر توسط آبجت {{ domxref("window.history", "history") }} دسترسی داشته باشید . این آبجکت متد ها و ویژگی های بسیار کاربردی را در اختیار شما قرار میدهد تا بتوانید در تاریخچه مرورگر به عقب یا جلو بروید در واقع قادر خواهید بود تا عمل back و forward را انجام دهید</p> + +<h2 dir="rtl" id="مرور_در_تاریخچه_مرورگر">مرور در تاریخچه مرورگر</h2> + +<p dir="rtl">با استفاده از</p> + +<p>Moving backward and forward through the user's history is done using the <code>back()</code>, <code>forward()</code>, and <code>go()</code> methods.</p> + +<h3 id="Moving_forward_and_backward">Moving forward and backward</h3> + +<p>To move backward through history, just do:</p> + +<pre class="brush: js">window.history.back(); +</pre> + +<p>This will act exactly like the user clicked on the Back button in their browser toolbar.</p> + +<p>Similarly, you can move forward (as if the user clicked the Forward button), like this:</p> + +<pre class="brush: js">window.history.forward(); +</pre> + +<h3 id="Moving_to_a_specific_point_in_history">Moving to a specific point in history</h3> + +<p>You can use the <code>go()</code> 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).</p> + +<p>To move back one page (the equivalent of calling <code>back()</code>):</p> + +<pre class="brush: js">window.history.go(-1); +</pre> + +<p>To move forward a page, just like calling <code>forward()</code>:</p> + +<pre class="brush: js">window.history.go(1); +</pre> + +<p>Similarly, you can move forward 2 pages by passing 2, and so forth.</p> + +<p>You can determine the number of pages in the history stack by looking at the value of the length property:</p> + +<pre class="brush: js">var numberOfEntries = window.history.length; +</pre> + +<div class="note"><strong>Note:</strong> Internet Explorer supports passing string URLs as a parameter to <code>go()</code>; this is non-standard and not supported by Gecko.</div> + +<h2 id="Adding_and_modifying_history_entries">Adding and modifying history entries</h2> + +<p>{{ gecko_minversion_header("2") }}</p> + +<p>HTML5 introduced the<a href="/en-US/docs/Web/API/History/pushState"> history.pushState()</a> and <a href="/en-US/docs/Web/API/History_API#The_replaceState()_method">history.replaceState()</a> methods, which allow you to add and modify history entries, respectively. These methods work in conjunction with the {{ domxref("window.onpopstate") }} event.</p> + +<p>Using <code>history.pushState()</code> changes the referrer that gets used in the HTTP header for <a href="/en/DOM/XMLHttpRequest" title="en/XMLHttpRequest"><code>XMLHttpRequest</code></a> objects created after you change the state. The referrer will be the URL of the document whose window is <code>this</code> at the time of creation of the <a href="/en/DOM/XMLHttpRequest" title="en/XMLHttpRequest"><code>XMLHttpRequest</code></a> object.</p> + +<h3 id="Example_of_pushState()_method">Example of pushState() method</h3> + +<p>Suppose <span class="nowiki">http://mozilla.org/foo.html</span> executes the following JavaScript:</p> + +<pre class="brush: js">var stateObj = { foo: "bar" }; +history.pushState(stateObj, "page 2", "bar.html"); +</pre> + +<p>This will cause the URL bar to display <span class="nowiki">http://mozilla.org/bar.html</span>, but won't cause the browser to load <code>bar.html</code> or even check that <code>bar.html</code> exists.</p> + +<p>Suppose now that the user now navigates to <span class="nowiki">http://google.com</span>, then clicks back. At this point, the URL bar will display <span class="nowiki">http://mozilla.org/bar.html</span>, and the page will get a <code>popstate</code> event whose <em>state object</em> contains a copy of <code>stateObj</code>. The page itself will look like <code>foo.html</code>, although the page might modify its contents during the <code>popstate</code> event.</p> + +<p>If we click back again, the URL will change to <span class="nowiki">http://mozilla.org/foo.html</span>, and the document will get another <code>popstate</code> 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 <code>popstate</code> event.</p> + +<h3 id="The_pushState()_method">The pushState() method</h3> + +<p><code>pushState()</code> 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:</p> + +<ul> + <li> + <p><strong>state object</strong> — The state object is a JavaScript object which is associated with the new history entry created by <code>pushState()</code>. Whenever the user navigates to the new state, a <code>popstate</code> event is fired, and the <code>state</code> property of the event contains a copy of the history entry's state object.</p> + + <p>The state object can be anything that can be serialized. Because Firefox saves state objects to the user's disk so they can be restored after the user restarts the browser, we impose a size limit of 640k characters on the serialized representation of a state object. If you pass a state object whose serialized representation is larger than this to <code>pushState()</code>, the method will throw an exception. If you need more space than this, you're encouraged to use <code>sessionStorage</code> and/or <code>localStorage</code>.</p> + </li> + <li> + <p><strong>title</strong> — Firefox currently ignores this parameter, although it may use it in the future. Passing the empty string here should be safe against future changes to the method. Alternatively, you could pass a short title for the state to which you're moving.</p> + </li> + <li> + <p><strong>URL</strong> — The new history entry's URL is given by this parameter. Note that the browser won't attempt to load this URL after a call to <code>pushState()</code>, but it might attempt to load the URL later, for instance after the user restarts the browser. The new URL does not need to be absolute; if it's relative, it's resolved relative to the current URL. The new URL must be of the same origin as the current URL; otherwise, <code>pushState()</code> will throw an exception. This parameter is optional; if it isn't specified, it's set to the document's current URL.</p> + </li> +</ul> + +<div class="note"><strong>Note:</strong> 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 <a href="/en/DOM/The_structured_clone_algorithm" title="en/DOM/The structured clone algorithm">the structured clone algorithm</a>. This allows a wider variety of objects to be safely passed.</div> + +<p>In a sense, calling <code>pushState()</code> is similar to setting <code>window.location = "#foo"</code>, in that both will also create and activate another history entry associated with the current document. But <code>pushState()</code> has a few advantages:</p> + +<ul> + <li>The new URL can be any URL in the same origin as the current URL. In contrast, setting <code>window.location</code> keeps you at the same {{ domxref("document") }} only if you modify only the hash.</li> + <li>You don't have to change the URL if you don't want to. In contrast, setting <code>window.location = "#foo";</code> only creates a new history entry if the current hash isn't <code>#foo</code>.</li> + <li>You can associate arbitrary data with your new history entry. With the hash-based approach, you need to encode all of the relevant data into a short string.</li> + <li>If <code>title </code>is subsequently used by browsers, this data can be utilized (independent of, say, the hash).</li> +</ul> + +<p>Note that <code>pushState()</code> never causes a <code>hashchange</code> event to be fired, even if the new URL differs from the old URL only in its hash.</p> + +<p>In a <a href="/en-US/docs/Mozilla/Tech/XUL">XUL</a> document, it creates the specified XUL element.</p> + +<p>In other documents, it creates an element with a <code>null</code> namespace URI.</p> + +<h3 id="The_replaceState()_method">The replaceState() method</h3> + +<p><code>history.replaceState()</code> operates exactly like <code>history.pushState()</code> except that <code>replaceState()</code> 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.</p> + +<p><code>replaceState()</code> is particularly useful when you want to update the state object or URL of the current history entry in response to some user action.</p> + +<div class="note"><strong>Note:</strong> 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 <a href="/en/DOM/The_structured_clone_algorithm" title="en/DOM/The structured clone algorithm">the structured clone algorithm</a>. This allows a wider variety of objects to be safely passed.</div> + +<h3 id="Example_of_replaceState()_method">Example of replaceState() method</h3> + +<p>Suppose <span class="nowiki">http://mozilla.org/foo.html</span> executes the following JavaScript:</p> + +<pre class="brush: js">var stateObj = { foo: "bar" }; +history.pushState(stateObj, "page 2", "bar.html"); +</pre> + +<p>The explanation of these two lines above can be found at "Example of pushState() method" section. Then suppose <span class="nowiki">http://mozilla.org/bar.html</span> executes the following JavaScript:</p> + +<pre class="brush: js">history.replaceState(stateObj, "page 3", "bar2.html"); +</pre> + +<p>This will cause the URL bar to display <span class="nowiki">http://mozilla.org/bar2.html</span>, but won't cause the browser to load <code>bar2.html</code> or even check that <code>bar2.html</code> exists.</p> + +<p>Suppose now that the user now navigates to <span class="nowiki">http://www.microsoft.com</span>, then clicks back. At this point, the URL bar will display <span class="nowiki">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.</span></p> + +<h3 id="The_popstate_event">The popstate event</h3> + +<p>A <code>popstate</code> 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 <code>pushState</code> or affected by a call to <code>replaceState</code>, the <code>popstate</code> event's <code>state</code> property contains a copy of the history entry's state object.</p> + +<p>See {{ domxref("window.onpopstate") }} for sample usage.</p> + +<h3 id="Reading_the_current_state">Reading the current state</h3> + +<p>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 <code>pushState()</code> or <code>replaceState()</code>) and then the user restarts their browser. When your page reloads, the page will receive an <span style="font-family: courier new;">onload</span><span style="font-family: helvetica;"> event, but no <span style="font-family: courier new;">popstate</span> event.</span> However, if you read the <span style="font-family: courier new;">history.state</span> property, you'll get back the state object you would have gotten if a <span style="font-family: courier new;">popstate</span> had fired.</p> + +<p>You can read the state of the current history entry without waiting for a <code>popstate</code> event using the <code>history.state</code> property like this:</p> + +<pre class="brush: js">var currentState = history.state; +</pre> + +<h2 id="Examples">Examples</h2> + +<p>For a complete example of AJAX web site, please see: <a href="/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history/Example" title="/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history/Example">Ajax navigation example</a>.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "browsers.html#history", "History")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from {{SpecName("HTML5 W3C")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "browsers.html#history", "History")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>replaceState, pushState</td> + <td>5</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop("2.0") }}</td> + <td>10</td> + <td>11.50</td> + <td>5.0</td> + </tr> + <tr> + <td>history.state</td> + <td>18</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop("2.0") }}</td> + <td>10</td> + <td>11.50</td> + <td>6.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>replaceState, pushState</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>history.state</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p><strong style="font-size: 2.143rem; font-weight: 700; letter-spacing: -1px; line-height: 1;">See also</strong></p> + +<ul> + <li>{{ domxref("window.history") }}</li> + <li>{{ domxref("window.onpopstate") }}</li> +</ul> + +<p> </p> + +<p> </p> 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..1bcce72374 --- /dev/null +++ b/files/ar/web/api/history_api/مثال/index.html @@ -0,0 +1,416 @@ +--- +title: مثال تصفح آجاكس +slug: Web/API/History_API/مثال +translation_of: Web/API/History_API/Example +--- +<p dir="rtl">هذا مثال عن موقع واب يستعمل تقنية Ajax مُكَـوَّن فقط من ثلاث صفحات (<em>first_page.php</em>، <em>second_page.php </em> و <em>third_page.php</em>). لرؤية كيفية اشتغالها، رجاء، قم بصنع الملفات التالية (أو git clone <a href="https://github.com/giabao/mdn-ajax-nav-example" title="/en-US/docs/">https://github.com/giabao/mdn-ajax-nav-example.git</a>)</p> + +<div class="note" dir="rtl"><strong>ملاحظة</strong>: لدمج كامل لعناصر{{HTMLElement("form")}} ضمن هذه الآلية، رجاء ألق نظرة على فقرة <a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">Submitting forms and uploading files</a>.</div> + +<p dir="rtl"><strong>first_page.php</strong>:</p> + +<div dir="rtl" style="height: 400px; margin-bottom: 12px; overflow: auto;"> +<pre class="brush: 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>"; + } +?> +</pre> +</div> + +<p dir="rtl"><strong>second_page.php</strong>:</p> + +<div dir="rtl" style="height: 400px; margin-bottom: 12px; overflow: auto;"> +<pre class="brush: 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>"; + } +?> +</pre> +</div> + +<p dir="rtl"><strong>third_page.php</strong>:</p> + +<div dir="rtl" style="height: 400px; margin-bottom: 12px; overflow: auto;"> +<pre class="brush: 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>"; + } +?> +</pre> +</div> + +<p dir="rtl"><strong>css/style.css</strong>:</p> + +<pre class="brush: css" dir="rtl">#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; +} +</pre> + +<p dir="rtl"><strong>include/after_content.php</strong>:</p> + +<pre class="brush: php" dir="rtl"><p>This is the footer. It is shared between all ajax pages.</p> +</pre> + +<p dir="rtl"><strong>include/before_content.php</strong>:</p> + +<pre class="brush: php" dir="rtl"><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> + +</pre> + +<p dir="rtl"><strong>include/header.php</strong>:</p> + +<pre class="brush: php" dir="rtl"><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" /> +</pre> + +<p dir="rtl"><strong>js/ajax_nav.js</strong>:</p> + +<p dir="rtl">(قبل تنفيذها في بيئة العمل، رجاءً اقرأ<strong> <a href="#const_compatibility" title="Note about *const* compatibility">the note about the const statement compatibility</a></strong>)</p> + +<div dir="rtl" style="height: 400px; margin-bottom: 12px; overflow: auto;"> +<pre class="brush: js" dir="rtl">"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; + +})(); + +</pre> +</div> + +<div class="note" dir="rtl"><strong>ملاحظة</strong>: التنفيذ الحالي لـ<a href="/en/JavaScript/Reference/Statements/const" title="en/JavaScript/Reference/Statements/const"><code>const</code></a> (تعليمة ثابتة) ليست جزءا من <strong>ECMAScript 5</strong>. هي مدعومة على متصفحات فايرفوكس وكروم (V8) ومدعومة جزئيا على أوبرا 9+ وسافاري. ليست مدعومة على <strong>Internet Explorer 6-9</strong>، ولا في معاينة <strong>Internet Explorer </strong>10. - ستكون معرفة في ECMAScript 6، لكن بدلالات أخرى. على غرار المتغيرات المعرفة (declared) بـتعليمة <a href="/en/JavaScript/Reference/Statements/let" title="en/JavaScript/Reference/Statements/let"><code>let</code></a> ، الثوابت المعرفة بـ<a href="/en/JavaScript/Reference/Statements/const" title="en/JavaScript/Reference/Statements/const"><code>const</code></a> ستكون. نقوم باستعمالها لغرض تعليمي. إذا كنت تريد توافقا كاملا مع المتصفح، رجاء قم باستبدال تعليمات <code><a href="/en/JavaScript/Reference/Statements/const" title="en/JavaScript/Reference/Statements/const">const</a> </code>بتعليمات <strong><a href="/en/JavaScript/Reference/Statements/var" title="en/JavaScript/Reference/Statements/var"><code>var</code></a></strong>.</div> + +<p dir="rtl">For more information, please see: <a href="/en-US/docs/DOM/Manipulating_the_browser_history" title="/en-US/docs/DOM/Manipulating_the_browser_history">Manipulating the browser history</a>.</p> + +<h2 dir="rtl" id="See_also">See also</h2> + +<ul> + <li dir="rtl">{{ domxref("window.history") }}</li> + <li dir="rtl">{{ domxref("window.onpopstate") }}</li> +</ul> 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 +--- +<div> + {{APIRef}}</div> +<p>إن خاصية HTMLElement.contentEditable تستخدم لتحديد إذا ما كان العنصر قابل للتحرير أو لا.هذه الخاصية يمكن أن تأخذ إحدى القيم التالية:</p> +<ul> + <li><code>true</code>, أو عدم تعيين قيمة,تحديد أن العنصر قابل للتحرير.</li> + <li><code>false</code>,تعيين أن العنصر غير قابل للتحرير.</li> + <li><code>inherit,تحديد أن كل العناصر التي تليه سوف ترث إمكانية التحرير من عدمها من خلال العنصر الأب</code>.</li> +</ul> +<h2 id="Syntax" name="Syntax">الشكل العام</h2> +<pre class="syntaxbox"><em>editable</em> = element.contentEditable +element.contentEditable = "true" +</pre> +<h2 id="Notes" name="Notes">ملاحظات</h2> +<p>بإمكانك إستعمال خاصية {{domxref("HTMLElement.isContentEditable")}} لإختبارالقيمة المنطقية المحوسبة {{domxref("Boolean")}} من هذا العنصر.</p> +<h2 id="توافق_المتصفحات">توافق المتصفحات</h2> +<div> + {{CompatibilityTable}}</div> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>الميزة</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>الدعم الأساسي</td> + <td>11</td> + <td>{{CompatGeckoDesktop(1.9)}}</td> + <td>6</td> + <td>10.6</td> + <td>3.2</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>الميزة</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>الدعم الأساسي</td> + <td>3</td> + <td>{{CompatGeckoMobile(1.9)}}</td> + <td>6</td> + <td>{{CompatNo}}</td> + <td>5</td> + </tr> + </tbody> + </table> +</div> +<h2 id="Specification" name="Specification">المواصفات</h2> +<ul> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#contenteditable">واصفة contenteditable من موقع رابطة WHATWG</a></li> +</ul> 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 +--- +<div> +<div>{{ APIRef("HTML DOM") }}</div> +</div> + +<div> </div> + +<p>The <strong><code>HTMLElement</code></strong> interface represents any <a href="/en-US/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a> element. Some elements directly implement this interface, others implement it via an interface that inherits it.</p> + +<h2 id="Properties">Properties</h2> + +<p><em>Inherits properties from its parent, {{domxref("Element")}}, and implements those from {{domxref("GlobalEventHandlers")}} and {{domxref("TouchEventHandlers")}}.</em></p> + +<dl> + <dt>{{domxref("HTMLElement.accessKey")}}</dt> + <dd>Is a {{domxref("DOMString")}} representing the access key assigned to the element.</dd> + <dt>{{domxref("HTMLElement.accessKeyLabel")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("DOMString")}} containing the element's assigned access key.</dd> + <dt>{{domxref("HTMLElement.contentEditable")}}</dt> + <dd>Is a {{domxref("DOMString")}}, where a value of <code>"true"</code> means the element is editable and a value of <code>"false"</code> means it isn't.</dd> + <dt>{{domxref("HTMLElement.isContentEditable")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("Boolean")}} that indicates whether or not the content of the element can be edited.</dd> + <dt>{{domxref("HTMLElement.contextMenu")}}</dt> + <dd>Is an {{domxref("HTMLMenuElement")}} representing the contextual menu associated with the element. It may be null</dd> + <dt>{{domxref("HTMLElement.dataset")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("DOMStringMap")}} that allows access to read and write the element custom data attributes (<code>data-*</code>) .</dd> + <dt>{{domxref("HTMLElement.dir")}}</dt> + <dd>Is a {{domxref("DOMString")}}, reflecting the <code>dir</code> global attribute, representing the directionality of the element. Possible values are <code>"ltr"</code>, <code>"rtl"</code>, and <code>"auto"</code>.</dd> + <dt>{{domxref("HTMLElement.draggable")}}</dt> + <dd>Is a {{jsxref("Boolean")}} indicating if the element can be dragged.</dd> + <dt>{{domxref("HTMLElement.dropzone")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("DOMSettableTokenList")}} reflecting the <code>dropzone</code> global attribute and describing the behavior of the element regarding a drop operation.</dd> + <dt>{{domxref("HTMLElement.hidden")}}</dt> + <dd>Is a {{jsxref("Boolean")}} indicating if the element is hidden or not.</dd> + <dt>{{domxref("HTMLElement.itemScope")}} {{experimental_inline}}</dt> + <dd>Is a {{jsxref("Boolean")}}…</dd> + <dt>{{domxref("HTMLElement.itemType")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns a {{domxref("DOMSettableTokenList")}}…</dd> + <dt>{{domxref("HTMLElement.itemId")}} {{experimental_inline}}</dt> + <dd>Is a {{domxref("DOMString")}}…</dd> + <dt>{{domxref("HTMLElement.itemRef")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns a {{domxref("DOMSettableTokenList")}}…</dd> + <dt>{{domxref("HTMLElement.itemProp")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns a {{domxref("DOMSettableTokenList")}}…</dd> + <dt>{{domxref("HTMLElement.itemValue")}} {{experimental_inline}}</dt> + <dd>Returns an {{jsxref("Object")}}…</dd> + <dt>{{domxref("HTMLElement.lang")}}</dt> + <dd>Is a {{domxref("DOMString")}} representing the language of an element's attributes, text, and element contents.</dd> + <dt>{{domxref("HTMLElement.offsetHeight")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns a <code>double</code> containing the height of an element, relative to the layout.</dd> + <dt>{{domxref("HTMLElement.offsetLeft")}}{{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns a <code>double</code>, the distance from this element's left border to its <code>offsetParent</code>'s left border.</dd> + <dt>{{domxref("HTMLElement.offsetParent")}}{{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns an {{domxref("Element")}} that is the element from which all offset calculations are currently computed.</dd> + <dt>{{domxref("HTMLElement.offsetTop")}}{{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns a <code>double</code>, the distance from this element's top border to its <code>offsetParent</code>'s top border.</dd> + <dt>{{domxref("HTMLElement.offsetWidth")}}{{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns a <code>double</code> containing the width of an element, relative to the layout.</dd> + <dt>{{domxref("HTMLElement.properties")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns an {{domxref("HTMLPropertiesCollection")}}…</dd> + <dt>{{domxref("HTMLElement.spellcheck")}}{{ gecko_minversion_inline("1.9")}}</dt> + <dd>Is a {{jsxref("Boolean")}} that controls <a href="/en-US/docs/HTML/Controlling_spell_checking_in_HTML_forms" title="en/Controlling_spell_checking_in_HTML_forms">spell-checking</a>. It is present on all HTML elements, though it hasn't an effect on all of them.</dd> + <dt>{{domxref("HTMLElement.style")}}</dt> + <dd>Is {{domxref("CSSStyleDeclaration")}}, an object representing the declarations of an element's style attributes.</dd> + <dt>{{domxref("HTMLElement.tabIndex")}}</dt> + <dd>Is a <code>long</code> representing the position of the element in the tabbing order.</dd> + <dt>{{domxref("HTMLElement.title")}}</dt> + <dd>Is a {{domxref("DOMString")}} containing the text that appears in a popup box when mouse is over the element.</dd> + <dt>{{domxref("HTMLElement.translate")}} {{experimental_inline}}</dt> + <dd>Is a {{jsxref("Boolean")}}</dd> +</dl> + +<h3 id="Event_handlers">Event handlers</h3> + +<p>Most events properties, of the form <code>onXYZ</code>, are defined on the {{domxref("GlobalEventHandlers")}} or {{domxref("TouchEventHandlers")}}, implemented by <code>HTMLElement</code>. A few more are specific to <code>HTMLElement</code>.</p> + +<dl> + <dt>{{ domxref("HTMLElement.oncopy") }} {{ non-standard_inline() }}</dt> + <dd>Returns the event handling code for the <code>copy</code> event ({{bug("280959")}}).</dd> + <dt>{{ domxref("HTMLElement.oncut") }} {{ non-standard_inline() }}</dt> + <dd>Returns the event handling code for the <code>cut</code> event ({{bug("280959")}}).</dd> + <dt>{{ domxref("HTMLElement.onpaste") }} {{ non-standard_inline() }}</dt> + <dd>Returns the event handling code for the <code>paste</code> event ({{bug("280959")}}).</dd> + <dt>{{domxref("TouchEventHandlers.ontouchstart")}} {{non-standard_inline}}</dt> + <dd>Returns the event handling code for the {{event("touchstart")}} event.</dd> + <dt>{{domxref("TouchEventHandlers.ontouchend")}} {{non-standard_inline}}</dt> + <dd>Returns the event handling code for the {{event("touchend")}} event.</dd> + <dt>{{domxref("TouchEventHandlers.ontouchmove")}} {{non-standard_inline}}</dt> + <dd>Returns the event handling code for the {{event("touchmove")}} event.</dd> + <dt>{{domxref("TouchEventHandlers.ontouchenter")}} {{non-standard_inline}}</dt> + <dd>Returns the event handling code for the {{event("touchenter")}} event.</dd> + <dt>{{domxref("TouchEventHandlers.ontouchleave")}} {{non-standard_inline}}</dt> + <dd>Returns the event handling code for the {{event("touchleave")}} event.</dd> + <dt>{{domxref("TouchEventHandlers.ontouchcancel")}} {{non-standard_inline}}</dt> + <dd>Returns the event handling code for the {{event("touchcancel")}} event.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>Inherits methods from its parent, {{domxref("Element")}}.</em></p> + +<dl> + <dt>{{domxref("HTMLElement.blur()")}}</dt> + <dd>Removes keyboard focus from the currently focused element.</dd> + <dt>{{domxref("HTMLElement.click()")}}</dt> + <dd>Sends a mouse click event to the element.</dd> + <dt>{{domxref("HTMLElement.focus()")}}</dt> + <dd>Makes the element the current keyboard focus.</dd> + <dt>{{domxref("HTMLElement.forceSpellCheck()")}} {{experimental_inline}}</dt> + <dd>Makes the spell checker runs on the element.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSSOM View', '#extensions-to-the-htmlelement-interface', 'HTMLElement')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + <td>Added the following properties: <code>offsetParent</code>, <code>offsetTop</code>, <code>offsetLeft</code>, <code>offsetWidth</code>, and <code>offsetHeight</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'elements.html#htmlelement', 'HTMLElement')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Added the following properties: <code>translate</code>, <code>itemScope</code>, <code>itemType</code>, <code>itemId</code>, <code>itemRef</code>, <code>itemProp</code>, <code>properties</code>, and <code>itemValue</code>.<br> + Added the following method: <code>forceSpellcheck()</code>.<br> + Moved the <code>onXYZ</code> attributes to the {{domxref("GlobalEventHandlers")}} interface and added an inheritance from it.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'dom.html#htmlelement', 'HTMLElement')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Added the following properties: <code>dataset</code>, <code>hidden</code>, <code>tabindex</code>, <code>accessKey</code>, <code>accessKeyLabel</code>, <code>draggable</code>, <code>dropzone</code>, <code>contentEditable</code>, <code>isContentEditable</code>, <code>contextMenu</code>, <code>spellcheck</code>, <code>commandType</code>, <code>commandLabel</code>, <code>commandIcon</code>, <code>commandHidden</code>, <code>commandDisabled</code>, <code>commandChecked</code>, <code>style</code>, and all the <code>onXYZ</code> properties.<br> + Moved the <code>id</code> and <code>className</code> properties to the {{domxref("Element")}} interface.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 HTML', 'html.html#ID-011100101', 'HTMLElement')}}</td> + <td>{{Spec2('DOM2 HTML')}}</td> + <td>No change from {{SpecName('DOM2 HTML')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-html.html#ID-011100101', 'HTMLElement')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.accessKey", "accessKey")}}</td> + <td>{{CompatGeckoDesktop("5.0")}}</td> + <td>17.0</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}(<a class="external" href="http://trac.webkit.org/changeset/107483">535.10</a>)</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.accessKeyLabel", "accessKeyLabel")}}</td> + <td>{{CompatGeckoDesktop("8.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}{{WebkitBug(72715)}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.blur()", "blur()")}}</td> + <td>{{CompatGeckoDesktop("5.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.click()", "click()")}}</td> + <td>{{CompatGeckoDesktop("5.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}(<a class="external" href="http://trac.webkit.org/changeset/107483">535.24</a>)</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.dataset", "dataset")}}</td> + <td>{{CompatGeckoDesktop("6.0")}}</td> + <td>9.0</td> + <td>{{CompatUnknown}}</td> + <td>11.10</td> + <td>5.1</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.focus()", "focus()")}}</td> + <td>{{CompatGeckoDesktop("5.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.contentEditable", "contentEditable")}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>5.5</td> + <td>9</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.spellcheck", "spellcheck")}}</td> + <td>{{CompatGeckoDesktop("1.8.1")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.style", "style")}}</td> + <td>{{CompatVersionUnknown}} (returns a {{domxref("CSS2Properties")}}, rather than a {{domxref("CSSStyleDeclaration")}})</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.forceSpellCheck", "forceSpellCheck()")}} {{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.dataset", "dataset")}}</td> + <td>{{CompatGeckoDesktop("6.0")}}</td> + <td>8.0</td> + <td>11</td> + <td>11.10</td> + <td>6</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.draggable", "draggable")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>12.0</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.dropzone", "dropzone")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>12.0</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.offsetLeft", "offsetLeft")}}, {{domxref("HTMLElement.offsetTop", "offsetTop")}}, {{domxref("HTMLElement.offsetParent", "offsetParent")}}, {{domxref("HTMLElement.offsetHeight", "offsetHeight")}} and {{domxref("HTMLElement.offsetWidth", "offsetWidth")}} {{experimental_inline}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.translate", "translate")}} {{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>{{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}}</td> + <td>{{CompatGeckoDesktop("6.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>11.60<br> + (Removed in Opera 15)</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.properties", "properties")}} {{experimental_inline}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.ontouchstart")}}, {{domxref("HTMLElement.ontouchend")}}, {{domxref("HTMLElement.ontouchmove")}}, {{domxref("HTMLElement.ontouchenter")}}, {{domxref("HTMLElement.ontouchleave")}}, and {{domxref("HTMLElement.ontouchcancel")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.oncopy")}}, {{domxref("HTMLElement.oncut")}}, and {{domxref("HTMLElement.onpaste")}} {{Non-standard_inline}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td> + <p>{{CompatGeckoMobile("1.0")}}</p> + </td> + <td rowspan="7">{{CompatUnknown}}</td> + <td rowspan="7">{{CompatUnknown}}</td> + <td rowspan="7">{{CompatUnknown}}</td> + <td rowspan="7">{{CompatUnknown}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.accessKey", "accessKey")}}</td> + <td>{{CompatGeckoMobile("5.0")}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.accessKeyLabel", "accessKeyLabel")}}</td> + <td>{{CompatGeckoMobile("8.0")}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.blur()", "blur()")}}</td> + <td>{{CompatGeckoMobile("5.0")}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.click()", "click()")}}</td> + <td>{{CompatGeckoMobile("5.0")}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.dataset", "dataset")}}</td> + <td>{{CompatGeckoMobile("6.0")}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.focus()", "focus()")}}</td> + <td>{{CompatGeckoMobile("5.0")}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.oncopy")}}, {{domxref("HTMLElement.oncut")}}, and {{domxref("HTMLElement.onpaste")}} {{Non-standard_inline}}</td> + <td>{{CompatGeckoMobile("1.9")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("Element")}}</li> +</ul> 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 +--- +<p dir="rtl">عندما تكتب نصوصاً برمجيّة للويب مُستخدِماً لغة الجافاسكرِبت، ستجد العديد من الواجهات البرمجيّة (API) المتوفرة. القائمة أدناه تسرد كل الواجهات (أي أنواع الكائنات) التي يمكنك استخدامها أثناء تطوير تطبيقات أو موقع الويب.</p> + +<div> +<div>{{APIListAlpha}}</div> +</div> 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 +--- +<p>{{ ApiRef() }}</p> +<h2 id="الملخص">الملخص</h2> +<h4 id="يقوم_كائن_battery_بتقديم_معلومات_حول_مستوى_شحن_بطارية_النظام.">يقوم كائن battery بتقديم معلومات حول مستوى شحن بطارية النظام.</h4> +<h4 id="بإمكانك_أيضاً_التنصت_على_الأحداث_التي_يرسلها_النظام_حول_تحديثات_حالة_البطارية.هذه_الأداة_تندرج_تحت_تطبيق_الواجهة_البرمجية_لحالة_البطاريةاقرأ_ذلك_المستند_لتفاصيل_إضافيةمع_دليل_لكيفية_أستعمالهاو_نموذج_برمجي.">بإمكانك أيضاً التنصت على الأحداث التي يرسلها النظام حول تحديثات حالة البطارية.هذه الأداة تندرج تحت <a href="https://developer.mozilla.org/en-US/docs/WebAPI/Battery_Status">تطبيق الواجهة البرمجية لحالة البطارية</a>,اقرأ ذلك المستند لتفاصيل إضافية,مع دليل لكيفية أستعمالها,و نموذج برمجي.</h4> +<h2 id="Syntax" name="Syntax">الشكل العام</h2> +<pre class="syntaxbox">var battery = window.navigator.battery;</pre> +<h2 id="القيمة">القيمة</h2> +<p><code>navigator.battery</code> هو كائن {{domxref("لإدارة البطارية.")}}.</p> +<h2 id="المواصفات">المواصفات</h2> +<p>{{page("/en-US/docs/Web/API/BatteryManager","Specifications")}}</p> +<h2 id="توافق_المتصفحات">توافق المتصفحات</h2> +<p>{{page("/en-US/docs/Web/API/BatteryManager","Browser_compatibility")}}</p> +<h2 id="اقرأ_أيضاً">اقرأ أيضاً</h2> +<ul> + <li>{{domxref("BatteryManager")}}</li> + <li><a href="https://developer.mozilla.org/en-US/docs/WebAPI/Battery_Status">مقالة حالة البطارية</a></li> + <li><a href="http://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/">على المدونة-إستعمال تطبيق الواجهة البرمجية للبطارية</a></li> + <li><a href="http://davidwalsh.name/battery-api">موقع دايفد ولش-الجافا سكريبت و تطبيق البطارية.</a></li> + <li><a href="https://github.com/pstadler/battery.js">battery.js-نص برمجي صغير متوافق مع المتصفحات.</a></li> +</ul> 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 +--- +<p>{{ APIRef("DOM4") }}</p> + +<p>The <code><strong>Navigator</strong></code> 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.</p> + +<p>A <code>Navigator</code> object can be retrieved using the read-only {{domxref("window.navigator")}} property.</p> + +<h2 id="Properties">Properties</h2> + +<p><em>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")}}.</em></p> + +<h3 id="Standard">Standard</h3> + +<dl> + <dt>{{domxref("Navigator.activeVRDisplays")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns an array containing every {{domxref("VRDisplay")}} object that is currently presenting ({{domxref("VRDisplay.ispresenting")}} is <code>true</code>).</dd> + <dt>{{domxref("NavigatorID.appCodeName")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns the internal "code" name of the current browser. Do not rely on this property to return the correct value.</dd> + <dt>{{domxref("NavigatorID.appName")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns a {{domxref("DOMString")}} with the official name of the browser. Do not rely on this property to return the correct value.</dd> + <dt>{{domxref("NavigatorID.appVersion")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns the version of the browser as a {{domxref("DOMString")}}. Do not rely on this property to return the correct value.</dd> + <dt>{{domxref("Navigator.battery")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("BatteryManager")}} object you can use to get information about the battery charging status.</dd> + <dt>{{domxref("Navigator.connection")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Provides a {{domxref("NetworkInformation")}} object containing information about the network connection of a device.</dd> + <dt>{{domxref("Navigator.geolocation")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("Geolocation")}} object allowing accessing the location of the device.</dd> + <dt>{{domxref("NavigatorConcurrentHardware.hardwareConcurrency")}} {{readOnlyInline}}</dt> + <dd>Returns the number of logical processor cores available.</dd> + <dt>{{domxref("NavigatorPlugins.javaEnabled")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns a {{domxref("Boolean")}} flag indicating whether the host browser is Java-enabled or not.</dd> + <dt>{{domxref("NavigatorLanguage.language")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("DOMString")}} representing the preferred language of the user, usually the language of the browser UI. The <code>null</code> value is returned when this is unknown.</dd> + <dt>{{domxref("NavigatorLanguage.languages")}} {{readonlyInline}}</dt> + <dd>Returns an array of {{domxref("DOMString")}} representing the languages known to the user, by order of preference.</dd> + <dt>{{domxref("NavigatorPlugins.mimeTypes")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns an {{domxref("MimeTypeArray")}} listing the MIME types supported by the browser.</dd> + <dt>{{domxref("NavigatorOnLine.onLine")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("Boolean")}} indicating whether the browser is working online.</dd> + <dt>{{domxref("Navigator.oscpu")}}</dt> + <dd>Returns a string that represents the current operating system.</dd> + <dt>{{domxref("Navigator.permissions")}} {{readonlyinline}}{{experimental_inline}}</dt> + <dd>Returns a {{domxref("Permissions")}} object that can be used to query and update permission status of APIs covered by the <a href="/en-US/docs/Web/API/Permissions_API">Permissions API</a>.</dd> + <dt>{{domxref("NavigatorID.platform")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns a string representing the platform of the browser. Do not rely on this function to return a significant value.</dd> + <dt>{{domxref("NavigatorPlugins.plugins")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns a {{domxref("PluginArray")}} listing the plugins installed in the browser.</dd> + <dt>{{domxref("NavigatorID.product")}} {{readonlyInline}} {{experimental_inline}}</dt> + <dd>Always returns <code>'Gecko'</code>, on any browser. This property is kept only for compatibility purpose.</dd> + <dt>{{domxref("Navigator.serviceWorker")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("ServiceWorkerContainer")}} object, which provides access to registration, removal, upgrade, and communication with the {{domxref("ServiceWorker")}} objects for the <a href="https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window">associated document</a>.</dd> + <dt>{{domxref("Navigator.storage")}} {{readonlyinline}}</dt> + <dd>Returns the singleton {{domxref('StorageManager')}} object used for managing persistance permissions and estimating available storage on a site-by-site/app-by-app basis.</dd> + <dt>{{domxref("NavigatorID.userAgent")}} {{readonlyInline}}</dt> + <dd>Returns the user agent string for the current browser.</dd> +</dl> + +<h3 id="Methods" name="Methods">Non-standard</h3> + +<div class="note"> +<p>Firefox OS devices adds more non-standard properties. You can consult them on the <a href="/en-US/docs/Mozilla/Firefox_OS/API/Navigator">Firefox OS Navigator extensions article</a>.</p> +</div> + +<p>{{domxref("Navigator.buildID")}} {{non-standard_inline}}</p> + +<dl> + <dd>Returns the build identifier of the browser (e.g., "2006090803").</dd> + <dt>{{domxref("Navigator.cookieEnabled")}} {{non-standard_inline}}</dt> + <dd>Returns a boolean indicating whether cookies are enabled in the browser or not.</dd> + <dt>{{domxref("Navigator.credentials")}} {{non-standard_inline}}</dt> + <dd>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. </dd> + <dt>{{domxref("Navigator.doNotTrack")}} {{non-standard_inline}}</dt> + <dd>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.</dd> + <dt>{{domxref("Navigator.id")}} {{non-standard_inline}}</dt> + <dd>Returns the {{domxref("window.navigator.id", "id")}} object which you can use to add support for <a href="/en-US/docs/BrowserID" title="BrowserID">BrowserID</a> to your web site.</dd> + <dt>{{domxref("Navigator.mediaDevices")}} {{non-standard_inline}}</dt> + <dd>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()")}}.</dd> + <dt>{{domxref("Navigator.mozNotification")}} {{deprecated_inline("22")}} {{non-standard_inline}}<br> + {{domxref("Navigator.webkitNotification")}}</dt> + <dd>Returns a {{domxref("navigator.mozNotification", "notification")}} object you can use to deliver notifications to the user from your web application.</dd> + <dt>{{domxref("Navigator.mozSocial")}} {{non-standard_inline}}</dt> + <dd>The Object, returned by the <code>navigator.mozSocial</code> property, is available within the social media provider's panel to provide functionality it may need.</dd> + <dt>{{domxref("Navigator.presentation")}} {{non-standard_inline}}</dt> + <dd>Returns a reference to the {{domxref("Presentation")}} API.</dd> + <dt>{{domxref("Navigator.productSub")}} {{non-standard_inline}}</dt> + <dd>Returns the build number of the current browser (e.g., "20060909").</dd> + <dt>{{domxref("Navigator.securitypolicy")}} {{non-standard_inline}}</dt> + <dd>Returns an empty string. In Netscape 4.7x, returns "US & CA domestic policy" or "Export policy".</dd> + <dt>{{domxref("Navigator.standalone")}} {{non-standard_inline}}</dt> + <dd>Returns a boolean indicating whether the browser is running in standalone mode. Available on Apple's iOS Safari only.</dd> + <dt>{{domxref("Navigator.storageQuota")}} {{readonlyinline}} {{experimental_inline}}</dt> + <dd>Returns a {{domxref('StorageQuota')}} interface which provides means to query and request storage usage and quota information.</dd> + <dt>{{domxref("Navigator.vendor")}} {{non-standard_inline}}</dt> + <dd>Returns the vendor name of the current browser (e.g., "Netscape6").</dd> + <dt>{{domxref("Navigator.vendorSub")}} {{non-standard_inline}}</dt> + <dd>Returns the vendor version number (e.g. "6.1").</dd> + <dt>{{domxref("Navigator.webkitPointer")}} {{non-standard_inline}}</dt> + <dd>Returns a PointerLock object for the <a href="/en-US/docs/API/Pointer_Lock_API" title="Mouse Lock API">Mouse Lock API</a>.</dd> +</dl> + +<h2 id="Methods" name="Methods">Methods</h2> + +<p><em>Doesn't inherit any method, but implements those defined in {{domxref("NavigatorID")}}, {{domxref("NavigatorContentUtils")}}, <em>{{domxref("NavigatorUserMedia")}}, </em>and {{domxref("NavigatorStorageUtils")}}.</em></p> + +<h3 id="Standard_2">Standard</h3> + +<dl> + <dt>{{domxref("Navigator.getVRDisplays()")}} {{experimental_inline}}</dt> + <dd>Returns a promise that resolves to an array of {{domxref("VRDisplay")}} objects representing any available VR devices connected to the computer.</dd> + <dt>{{domxref("Navigator.getUserMedia", "Navigator.getUserMedia()")}} {{experimental_inline}}</dt> + <dd>After having prompted the user for permission, returns the audio or video stream associated to a camera or microphone on the local computer.</dd> + <dt>{{domxref("Navigator.registerContentHandler()")}}</dt> + <dd>Allows web sites to register themselves as a possible handler for a given MIME type.</dd> + <dt>{{domxref("Navigator.registerProtocolHandler()")}}</dt> + <dd>Allows web sites to register themselves as a possible handler for a given protocol.</dd> + <dt>{{domxref("Navigator.requestMediaKeySystemAccess()")}} {{experimental_inline}}</dt> + <dd>Returns a <span style="line-height: 19.0909080505371px;">{{jsxref("Promise")}} for a MediaKeySystemAccess object.</span></dd> + <dt>{{domxref("Navigator.sendBeacon()")}}{{experimental_inline}}</dt> + <dd>Used to asynchronously transfer a small amount of data using {{Glossary("HTTP")}} from the User Agent to a web server.</dd> + <dt>{{domxref("NavigatorID.taintEnabled()")}} {{deprecated_inline("1.7.8")}} {{obsolete_inline("9.0")}} {{experimental_inline}}</dt> + <dd>Returns <code>false</code>. JavaScript taint/untaint functions removed in JavaScript 1.2.</dd> + <dt>{{domxref("Navigator.vibrate()")}} {{gecko_minversion_inline("11.0")}}</dt> + <dd>Causes vibration on devices with support for it. Does nothing if vibration support isn't available.</dd> +</dl> + +<h3 id="Specification" name="Specification">Non-standard</h3> + +<div class="note"> +<p>Firefox OS devices adds more non-standard methods. You can consult them on the <a href="/en-US/docs/Mozilla/Firefox_OS/API/Navigator">Firefox OS Navigator extensions article</a>.</p> +</div> + +<p>{{domxref("Navigator.mozIsLocallyAvailable()")}} {{non-standard_inline}}</p> + +<dl> + <dd>Lets code check to see if the document at a given URI is available without using the network.</dd> + <dt>{{domxref("Navigator.mozPay()")}} {{non-standard_inline}}</dt> + <dd>Allows in-app payment.</dd> +</dl> 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 +--- +<p>{{APIRef("DOM")}}</p> + +<p><span class="seoSummary">The {{Glossary("DOM")}} <strong><code>Node</code></strong> 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.</span> Key among the interfaces which inherit the features of <code>Node</code> are {{domxref("Document")}} and {{domxref("Element")}}. However, all of the following also inherit methods and properties from <code>Node</code>: {{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")}}.</p> + +<p>In some cases, a particular feature of <code>Node</code> may not apply to a particular interface based on it; in that case, the inheriting node may return <code>null</code> 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.</p> + +<p>{{InheritanceDiagram}}</p> + +<h2 id="Properties">Properties</h2> + +<p><em>Inherits properties from its parent, {{DOMxRef("EventTarget")}}</em>.<sup>[1]</sup></p> + +<dl> + <dt>{{DOMxRef("Node.baseURI")}}{{ReadOnlyInline}}</dt> + <dd>Returns a {{DOMxRef("DOMString")}} representing the base URL of the document containing the <code>Node</code>.</dd> + <dt>{{DOMxRef("Node.baseURIObject")}} {{Non-standard_inline}} {{ReadOnlyInline}}{{Fx_MinVersion_Inline("3")}}</dt> + <dd>(Not available to web content.) The {{ Interface("nsIURI") }} object representing the base URI for the element.</dd> + <dt>{{DOMxRef("Node.childNodes")}}{{ReadOnlyInline}}</dt> + <dd>Returns a live {{DOMxRef("NodeList")}} containing all the children of this node. {{DOMxRef("NodeList")}} being live means that if the children of the <code>Node</code> change, the {{DOMxRef("NodeList")}} object is automatically updated.</dd> + <dt>{{DOMxRef("Node.firstChild")}}{{ReadOnlyInline}}</dt> + <dd>Returns a {{DOMxRef("Node")}} representing the first direct child node of the node, or <code>null</code> if the node has no child.</dd> + <dt>{{DOMxRef("Node.isConnected")}}{{ReadOnlyInline}}</dt> + <dd>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.</dd> + <dt>{{DOMxRef("Node.lastChild")}}{{ReadOnlyInline}}</dt> + <dd>Returns a {{DOMxRef("Node")}} representing the last direct child node of the node, or <code>null</code> if the node has no child.</dd> + <dt>{{DOMxRef("Node.nextSibling")}}{{ReadOnlyInline}}</dt> + <dd>Returns a {{DOMxRef("Node")}} representing the next node in the tree, or <code>null</code> if there isn't such node.</dd> + <dt>{{DOMxRef("Node.nodeName")}}{{ReadOnlyInline}}</dt> + <dd>Returns a {{DOMxRef("DOMString")}} containing the name of the <code>Node</code>. 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 <code>'audio'</code> for an {{DOMxRef("HTMLAudioElement")}}, a {{DOMxRef("Text")}} node will have the <code>'#text'</code> string, or a {{DOMxRef("Document")}} node will have the <code>'#document'</code> string.</dd> + <dt>{{DOMxRef("Node.nodeType")}}{{ReadOnlyInline}}</dt> + <dd>Returns an <code>unsigned short</code> representing the type of the node. Possible values are: + <table class="standard-table"> + <thead> + <tr> + <th scope="col">Name</th> + <th scope="col">Value</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>ELEMENT_NODE</code></td> + <td><code>1</code></td> + </tr> + <tr> + <td><code>ATTRIBUTE_NODE</code> {{Deprecated_Inline}}</td> + <td><code>2</code></td> + </tr> + <tr> + <td><code>TEXT_NODE</code></td> + <td><code>3</code></td> + </tr> + <tr> + <td><code>CDATA_SECTION_NODE</code></td> + <td><code>4</code></td> + </tr> + <tr> + <td><code>ENTITY_REFERENCE_NODE</code> {{Deprecated_Inline}}</td> + <td><code>5</code></td> + </tr> + <tr> + <td><code>ENTITY_NODE</code> {{Deprecated_Inline}}</td> + <td><code>6</code></td> + </tr> + <tr> + <td><code>PROCESSING_INSTRUCTION_NODE</code></td> + <td><code>7</code></td> + </tr> + <tr> + <td><code>COMMENT_NODE</code></td> + <td><code>8</code></td> + </tr> + <tr> + <td><code>DOCUMENT_NODE</code></td> + <td><code>9</code></td> + </tr> + <tr> + <td><code>DOCUMENT_TYPE_NODE</code></td> + <td><code>10</code></td> + </tr> + <tr> + <td><code>DOCUMENT_FRAGMENT_NODE</code></td> + <td><code>11</code></td> + </tr> + <tr> + <td><code>NOTATION_NODE</code> {{Deprecated_Inline}}</td> + <td><code>12</code></td> + </tr> + </tbody> + </table> + </dd> + <dt>{{DOMxRef("Node.nodeValue")}}</dt> + <dd>Returns / Sets the value of the current node.</dd> + <dt>{{DOMxRef("Node.ownerDocument")}}{{ReadOnlyInline}}</dt> + <dd>Returns the {{DOMxRef("Document")}} that this node belongs to. If the node is itself a document, returns <code>null</code>.</dd> + <dt>{{DOMxRef("Node.parentNode")}}{{ReadOnlyInline}}</dt> + <dd>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 <code>null</code>.</dd> + <dt>{{DOMxRef("Node.parentElement")}}{{ReadOnlyInline}}</dt> + <dd>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 <code>null</code>.</dd> + <dt>{{DOMxRef("Node.previousSibling")}}{{ReadOnlyInline}}</dt> + <dd>Returns a {{DOMxRef("Node")}} representing the previous node in the tree, or <code>null</code> if there isn't such node.</dd> + <dt>{{DOMxRef("Node.textContent")}}</dt> + <dd>Returns / Sets the textual content of an element and all its descendants.</dd> +</dl> + +<h3 id="Obsolete_properties">Obsolete properties</h3> + +<dl> + <dt>{{DOMxRef("Node.localName")}} {{Obsolete_Inline}}{{ReadOnlyInline}}</dt> + <dd>Returns a {{DOMxRef("DOMString")}} representing the local part of the qualified name of an element. + <div class="blockIndicator note"> + <p><strong>Note:</strong> 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.</p> + </div> + </dd> + <dt>{{DOMxRef("Node.namespaceURI")}} {{Obsolete_Inline}}{{ReadOnlyInline}}</dt> + <dd>The namespace URI of this node, or <code>null</code> if it is no namespace. + <div class="blockIndicator note"> + <p><strong>Note:</strong> In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the <code><a class="linkification-ext external" href="https://www.w3.org/1999/xhtml/">http://www.w3.org/1999/xhtml/</a></code> namespace in both HTML and XML trees.</p> + </div> + </dd> + <dt>{{DOMxRef("Node.nodePrincipal")}} {{Non-standard_inline}}{{Obsolete_Inline("gecko46")}}{{Fx_MinVersion_Inline("3")}}</dt> + <dd>A {{Interface("nsIPrincipal")}} representing the node principal.</dd> + <dt>{{DOMxRef("Node.prefix")}} {{Obsolete_Inline}}{{ReadOnlyInline}}</dt> + <dd>Is a {{DOMxRef("DOMString")}} representing the namespace prefix of the node, or <code>null</code> if no prefix is specified.</dd> + <dt>{{DOMxRef("Node.rootNode")}} {{Obsolete_Inline}}{{ReadOnlyInline}}</dt> + <dd>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()")}}.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>Inherits methods from its parent, {{DOMxRef("EventTarget")}}</em>.<sup>[1]</sup></p> + +<dl> + <dt>{{DOMxRef("Node.appendChild()", "Node.appendChild(<var>childNode</var>)")}}</dt> + <dd>Adds the specified <code><var>childNode</var></code> argument as the last child to the current node.<br> + 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.</dd> + <dt>{{DOMxRef("Node.cloneNode()")}}</dt> + <dd>Clone a {{DOMxRef("Node")}}, and optionally, all of its contents. By default, it clones the content of the node.</dd> + <dt>{{DOMxRef("Node.compareDocumentPosition()")}}</dt> + <dd>Compares the position of the current node against another node in any other document.</dd> + <dt>{{DOMxRef("Node.contains()")}}</dt> + <dd>Returns a {{jsxref("Boolean")}} value indicating whether or not a node is a descendant of the calling node.</dd> + <dt>{{domxref("Node.getBoxQuads()")}} {{experimental_inline}}</dt> + <dd>Returns a list of the node's CSS boxes relative to another node.</dd> + <dt>{{DOMxRef("Node.getRootNode()")}}</dt> + <dd>Returns the context object's root which optionally includes the shadow root if it is available. </dd> + <dt>{{DOMxRef("Node.hasChildNodes()")}}</dt> + <dd>Returns a {{jsxref("Boolean")}} indicating whether or not the element has any child nodes.</dd> + <dt>{{DOMxRef("Node.insertBefore()")}}</dt> + <dd>Inserts a {{DOMxRef("Node")}} before the reference node as a child of a specified parent node.</dd> + <dt>{{DOMxRef("Node.isDefaultNamespace()")}}</dt> + <dd>Accepts a namespace URI as an argument and returns a {{jsxref("Boolean")}} with a value of <code>true</code> if the namespace is the default namespace on the given node or <code>false</code> if not.</dd> + <dt>{{DOMxRef("Node.isEqualNode()")}}</dt> + <dd>Returns a {{jsxref("Boolean")}} which indicates whether or not two nodes are of the same type and all their defining data points match.</dd> + <dt>{{DOMxRef("Node.isSameNode()")}}</dt> + <dd>Returns a {{jsxref("Boolean")}} value indicating whether or not the two nodes are the same (that is, they reference the same object).</dd> + <dt>{{DOMxRef("Node.lookupPrefix()")}}</dt> + <dd>Returns a {{DOMxRef("DOMString")}} containing the prefix for a given namespace URI, if present, and <code>null</code> if not. When multiple prefixes are possible, the result is implementation-dependent.</dd> + <dt>{{DOMxRef("Node.lookupNamespaceURI()")}}</dt> + <dd>Accepts a prefix and returns the namespace URI associated with it on the given node if found (and <code>null</code> if not). Supplying <code>null</code> for the prefix will return the default namespace.</dd> + <dt>{{DOMxRef("Node.normalize()")}}</dt> + <dd>Clean up all the text nodes under this element (merge adjacent, remove empty).</dd> + <dt>{{DOMxRef("Node.removeChild()")}}</dt> + <dd>Removes a child node from the current element, which must be a child of the current node.</dd> + <dt>{{DOMxRef("Node.replaceChild()")}}</dt> + <dd>Replaces one child {{DOMxRef("Node")}} of the current one with the second one given in parameter.</dd> +</dl> + +<h3 id="Obsolete_methods">Obsolete methods</h3> + +<dl> + <dt>{{DOMxRef("Node.getFeature()")}} {{Obsolete_Inline}}</dt> + <dd></dd> + <dt>{{DOMxRef("Node.getUserData()")}} {{Obsolete_Inline}}</dt> + <dd>Allows a user to get some {{DOMxRef("DOMUserData")}} from the node.</dd> + <dt>{{DOMxRef("Node.hasAttributes()")}} {{Obsolete_Inline}}</dt> + <dd>Returns a {{jsxref("Boolean")}} indicating if the element has any attributes, or not.</dd> + <dt>{{DOMxRef("Node.isSupported()")}} {{Obsolete_Inline}}</dt> + <dd>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.</dd> + <dt>{{DOMxRef("Node.setUserData()")}} {{Obsolete_Inline}}</dt> + <dd>Allows a user to attach, or remove, {{DOMxRef("DOMUserData")}} to the node.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<h3 id="Remove_all_children_nested_within_a_node">Remove all children nested within a node</h3> + +<pre class="brush: js">function removeAllChildren(element) { + while (element.firstChild) { + element.removeChild(element.firstChild) + } +}</pre> + +<h4 id="Sample_usage">Sample usage</h4> + +<pre class="brush: js;">/* ... an alternative to document.body.innerHTML = "" ... */ +removeAllChildren(document.body)</pre> + +<h3 id="Recurse_through_child_nodes">Recurse through child nodes</h3> + +<p>The following function recursively calls a callback function for each node contained by a root node (including the root itself):</p> + +<pre class="brush: js;">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 + } + } + } +} +</pre> + +<h4 id="Syntax">Syntax</h4> + +<pre class="syntaxbox">eachNode(<var>rootNode</var>, <var>callback</var>)</pre> + +<h4 id="Description">Description</h4> + +<p>Recursively calls a function for each descendant node of <code><var>rootNode</var></code> (including the root itself).</p> + +<p>If <code><var>callback</var></code> is omitted, the function returns an {{jsxref("Array")}} instead, which contains <code><var>rootNode</var></code> and all nodes contained within.</p> + +<p>If <code><var>callback</var></code> is provided, and it returns {{jsxref("Boolean")}} <code>false</code> 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).</p> + +<h4 id="Parameters">Parameters</h4> + +<dl> + <dt><code><var>rootNode</var></code></dt> + <dd>The <code>Node</code> object whose descendants will be recursed through.</dd> + <dt><code><var>callback</var></code> {{optional_inline}}</dt> + <dd>An optional callback <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function">function</a> that receives a <code>Node</code> as its only argument. If omitted, <code>eachNode</code> returns an {{jsxref("Array")}} of every node contained within <code><var>rootNode</var></code> (including the root itself).</dd> +</dl> + +<h4 id="Sample_usage_2">Sample usage</h4> + +<p>The following example prints the <a href="/en-US/docs/Web/API/Node/textContent"><code>textContent</code></a> properties of each <code><span></code> tag in a <code><div></code> element named <code>"box"</code>:</p> + +<pre class="brush: html;"><div id="box"> + <span>Foo</span> + <span>Bar</span> + <span>Baz</span> +</div></pre> + +<pre class="brush: js;">const box = document.getElementById("box") +eachNode(box, function(node) { + if (null != node.textContent) { + console.log(node.textContent) + } +})</pre> + +<p>The above will result in the following strings printing to the user's console:</p> + +<pre class="brush: js;">"\n\t", "Foo", "\n\t", "Bar", "\n\t", "Baz"</pre> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> Whitespace forms part of a {{DOMxRef("Text")}} node, meaning indentation and newlines form separate <code>Text</code> between the <code>Element</code> nodes.</p> +</div> + +<h4 id="Realistic_usage">Realistic usage</h4> + +<p>The following demonstrates a real-world use of the <code>eachNode()</code> function: searching for text on a web-page.</p> + +<p>We use a wrapper function named <code>grep</code> to do the searching:</p> + +<pre class="brush: js;">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 +}</pre> + +<p>For example, to find {{DOMxRef("Text")}} nodes that contain typos:</p> + +<pre class="brush: js;">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) +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("DOM WHATWG", "#interface-node", "Node")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td>Added the following methods: <code>getRootNode()</code></td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#interface-node", "Node")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td>Removed the following properties: <code>attributes</code>, <code>namespaceURI</code>, <code>prefix</code>, and <code>localName</code>.<br> + Removed the following methods: <code>isSupported()</code>, <code>hasAttributes()</code>, <code>getFeature()</code>, <code>setUserData()</code>, and <code>getUserData()</code>.</td> + </tr> + <tr> + <td>{{SpecName("DOM3 Core", "core.html#ID-1950641247", "Node")}}</td> + <td>{{Spec2("DOM3 Core")}}</td> + <td>The methods <code>insertBefore()</code>, <code>replaceChild()</code>, <code>removeChild()</code>, and <code>appendChild()</code> returns one more kind of error (<code>NOT_SUPPORTED_ERR</code>) if called on a {{DOMxRef("Document")}}.<br> + The <code>normalize()</code> method has been modified so that {{DOMxRef("Text")}} node can also be normalized if the proper {{DOMxRef("DOMConfiguration")}} flag is set.<br> + Added the following methods: <code>compareDocumentPosition()</code>, <code>isSameNode()</code>, <code>lookupPrefix()</code>, <code>isDefaultNamespace()</code>, <code>lookupNamespaceURI()</code>, <code>isEqualNode()</code>, <code>getFeature()</code>, <code>setUserData()</code>, and <code>getUserData().</code><br> + Added the following properties: <code>baseURI</code> and <code>textContent</code>.</td> + </tr> + <tr> + <td>{{SpecName("DOM2 Core", "core.html#ID-1950641247", "Node")}}</td> + <td>{{Spec2("DOM2 Core")}}</td> + <td>The <code>ownerDocument</code> property was slightly modified so that {{DOMxRef("DocumentFragment")}} also returns <code>null</code>.<br> + Added the following properties: <code>namespaceURI</code>, <code>prefix</code>, and <code>localName</code>.<br> + Added the following methods: <code>normalize()</code>, <code>isSupported()</code> and <code>hasAttributes()</code>.</td> + </tr> + <tr> + <td>{{SpecName("DOM1", "level-one-core.html#ID-1950641247", "Node")}}</td> + <td>{{Spec2("DOM1")}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Node")}}</p> 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 +--- +<div>{{APIRef("DOM")}}</div> + +<p>و <code><strong>Node.removeChild()</strong></code>الأسلوب يزيل عقدة الطفل من DOM وإرجاع العقدة التي تمت إزالتها.</p> + +<h2 id="بناء_الجملة">بناء الجملة</h2> + +<pre class="syntaxbox">var <em>oldChild</em> = <em>العقدة</em> .removeChild ( <em>child</em> ) ؛ +<strong>أو </strong> +<em>عقدة.</em> إزالة <em>الطفل</em> ( <em>طفل</em> ) ؛ +</pre> + +<ul> + <li><code>child</code> هي العقدة الفرعية المراد إزالتها من DOM.</li> + <li><code>node</code>هي العقدة الأم لـ <code>child</code>.</li> + <li><code>oldChild</code>يحمل إشارة إلى العقدة الفرعية التي تمت إزالتها ، أي <code>oldChild === child</code>.</li> +</ul> + +<p>لا تزال العقدة الفرعية التي تمت إزالتها موجودة في الذاكرة ، ولكنها لم تعد جزءًا من DOM. مع عرض أول صيغة ، يمكنك إعادة استخدام العقدة التي تمت إزالتها لاحقًا في التعليمات البرمجية ، عبر <code>oldChild</code>مرجع الكائن.</p> + +<p>ومع ذلك ، في النموذج الثاني للبناء ، لا يوجد <code>oldChild</code>مرجع محفوظ ، لذلك بافتراض أن الشفرة الخاصة بك لم تحتفظ بأي مرجع آخر للعقدة في مكان آخر ، فستصبح غير قابلة للاستخدام ولا رجعة فيها على الفور ، وعادة ما يتم <a href="/en-US/docs/Web/JavaScript/Memory_Management">حذفها تلقائيًا</a> من الذاكرة بعد وقت قصير.</p> + +<p>إذا <code>child</code>لم يكن في الواقع تابع <code>element</code>للعقدة ، فإن الطريقة تستثني. سيحدث هذا أيضًا إذا <code>child</code>كان في الواقع طفلًا <code>element</code>في وقت المكالمة ، ولكن تمت إزالته بواسطة معالج حدث تم استدعاؤه أثناء محاولة إزالة العنصر (على سبيل المثال ، {{Event("blur")}}.)</p> + +<h3 id="ألقيت_أخطاء">ألقيت أخطاء</h3> + +<p>تقدم الطريقة استثناءً بطريقتين مختلفتين:</p> + +<ol> + <li> + <p>If the <code>child</code> was in fact a child of <code>element</code> and so existing on the DOM, but was removed the method throws the following exception:</p> + + <p><code>Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node</code>.</p> + </li> + <li> + <p>If the <code>child</code> doesn't exist on the DOM of the page, the method throws the following exception:<br> + <br> + <code>Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.</code></p> + </li> +</ol> + +<h2 id="Examples">Examples</h2> + +<h3 id="Simple_examples">Simple examples</h3> + +<p>Given this HTML:</p> + +<pre class="brush: html"><div id="top"> + <div id="nested"></div> +</div> +</pre> + +<p>To remove a specified element when knowing its parent node:</p> + +<pre class="brush:js">let d = document.getElementById("top"); +let d_nested = document.getElementById("nested"); +let throwawayNode = d.removeChild(d_nested); +</pre> + +<p>To remove a specified element without having to specify its parent node:</p> + +<pre class="brush:js">let node = document.getElementById("nested"); +if (node.parentNode) { + node.parentNode.removeChild(node); +} +</pre> + +<p>To remove all children from an element:</p> + +<pre class="brush:js">let element = document.getElementById("top"); +while (element.firstChild) { + element.removeChild(element.firstChild); +} +</pre> + +<h3 id="Causing_a_TypeError">Causing a TypeError</h3> + +<pre class="brush: html"><!--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> +</pre> + +<h3 id="Causing_a_NotFoundError">Causing a NotFoundError</h3> + +<pre class="brush: html"><!--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> +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-node-removechild", "Node: removeChild")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="التوافق_المتصفح">التوافق المتصفح</h2> + +<div class="hidden">يتم إنشاء جدول التوافق في هذه الصفحة من البيانات المنظمة. إذا كنت ترغب في المساهمة في البيانات ، يرجى مراجعة <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> وإرسال طلب سحب إلينا.</div> + +<p>{{Compat("api.Node.removeChild")}}</p> + +<h2 id="أنظر_أيضا">أنظر أيضا</h2> + +<ul> + <li>{{domxref("Node.replaceChild")}}</li> + <li>{{domxref("Node.parentNode")}}</li> + <li>{{domxref("ChildNode.remove")}}</li> +</ul> 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 +--- +<p>{{ APIRef }}</p> + +<p>دالة التنبية ()Window.alert هي وظيفة تقوم بإظهار رسالة مخصصة مع زر حسناً.</p> + +<h2 id="Syntax" name="Syntax">بناء الجملة</h2> + +<pre class="syntaxbox notranslate">window.alert(<em>message</em>);</pre> + +<h3 id="خصائص">خصائص</h3> + +<dl> + <dt><code>message</code> {{optional_inline}}</dt> + <dt></dt> + <dd>يمكنك تمرير سلسلة نصية بين أقواس الدالة حتى يتم إظهارها من خلال نافذة التنبيه، أو كائن يتم تحويلة إلى نص ثم عرض محتواه.</dd> +</dl> + +<h2 id="Example" name="Example">مثال</h2> + +<pre class="brush: js notranslate">window.alert("مرحبا بالعالم!"); +alert("مرحبا بالعالم!");</pre> + +<p>كلاهما ينتج:</p> + +<p><img alt="Image:AlertHelloWorld.png" src="/files/130/AlertHelloWorld.png"></p> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p>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.</p> + +<p><span class="comment">The following text is shared between this article, DOM:window.prompt and DOM:window.confirm</span> 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).</p> + +<h2 id="Specification">Specification</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'timers-and-user-prompts.html#dom-alert', 'alert()')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Window.alert")}}</p> + +<h2 id="See_also" name="See_also">See also</h2> + +<ul> + <li>{{domxref("window.confirm","confirm")}}</li> + <li>{{domxref("window.prompt","prompt")}}</li> + <li>For <a href="/en-US/docs/Chrome" title="/en-US/docs/Chrome">Mozilla Chrome</a> see {{ifmethod("nsIPromptService","alert")}} and {{ifmethod("nsIPromptService","alertCheck")}}</li> +</ul> + +<div id="gtx-trans" style="position: absolute; left: 504px; top: 245px;"> +<div class="gtx-trans-icon"></div> +</div> 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 +--- +<div>{{APIRef}}</div> + +<p dir="rtl">يبدأ حدث DOMContentLoaded عند تحميل مستند HTML الأولي وتحليله بالكامل ، دون انتظار انتهاء تحميل صفحات الأنماط والصور والأطر الفرعية.</p> + +<table class="properties"> + <tbody> + <tr> + <th dir="rtl" scope="row">Bubbles</th> + <td dir="rtl">Yes</td> + </tr> + <tr> + <th scope="row">Cancelable</th> + <td>Yes (although specified as a simple event that isn't cancelable)</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td>{{domxref("Event")}}</td> + </tr> + <tr> + <th scope="row">Event handler property</th> + <td>None</td> + </tr> + </tbody> +</table> + +<p>The original target for this event is the {{domxref("Document")}} that has loaded. You can listen for this event on the <code>Window</code> 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.</p> + +<p>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 <code>load</code> where <code>DOMContentLoaded</code> would be more appropriate.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Basic_usage">Basic usage</h3> + +<pre class="brush: js notranslate">window.addEventListener('DOMContentLoaded', (event) => { + console.log('DOM fully loaded and parsed'); +}); +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'indices.html#event-domcontentloaded')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Window.DOMContentLoaded_event")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Related events: {{domxref("Window/load_event", "load")}}, {{domxref("Document/readystatechange_event", "readystatechange")}}, {{domxref("Window/beforeunload_event", "beforeunload")}}, {{domxref("Window/unload_event", "unload")}}</li> + <li>This event on {{domxref("Document")}} targets: {{domxref("Document/DOMContentLoaded_event", "DOMContentLoaded")}}</li> +</ul> 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 +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary">The <strong><code>Window</code></strong> interface represents a window containing a {{glossary("DOM")}} document; the <code>document</code> property points to the <a href="/en-US/docs/Web/API/Document">DOM document</a> loaded in that window.</span> A window for a given document can be obtained using the {{domxref("document.defaultView")}} property.</p> + +<p>A global variable, <code>window</code>, representing the window in which the script is running, is exposed to JavaScript code.</p> + +<p>The <code>Window</code> 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 <code>Window</code> interface is a suitable place to include these items that need to be globally available. Many of these are documented in the <a href="/en-US/docs/Web/JavaScript/Reference">JavaScript Reference</a> and the <a href="/en-US/docs/Web/API/Document_Object_Model">DOM Reference</a>.</p> + +<p>In a tabbed browser, each tab is represented by its own <code>Window</code> object; the global <code>window</code> 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.</p> + +<p>{{InheritanceDiagram}}</p> + +<h2 id="Constructors">Constructors</h2> + +<p>See also the <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM Interfaces</a>.</p> + +<dl> + <dt>{{domxref("DOMParser")}}</dt> + <dd><code>DOMParser</code> can parse XML or HTML source stored in a string into a DOM <a href="/en-US/docs/DOM/document" title="document">Document</a>. <code>DOMParser</code> is specified in <a href="https://w3c.github.io/DOM-Parsing/" title="http://html5.org/specs/dom-parsing.html">DOM Parsing and Serialization</a>.</dd> + <dt>{{domxref("Image")}}</dt> + <dd>Used for creating an {{domxref("HTMLImageElement")}}.</dd> + <dt>{{domxref("Option")}}</dt> + <dd>Used for creating an {{domxref("HTMLOptionElement")}}.</dd> + <dt>{{domxref("StaticRange")}} {{experimental_inline}} {{readonlyinline}}</dt> + <dd>Returns a {{domxref('StaticRange.StaticRange','StaticRange()')}} constructor which creates a {{domxref('StaticRange')}} object.</dd> + <dt>{{domxref("Worker")}}</dt> + <dd>Used for creating a <a href="/en-US/docs/DOM/Using_web_workers">Web worker.</a></dd> + <dt>{{domxref("XMLSerializer")}}</dt> + <dd>Converts a DOM tree into XML or HTML source.</dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<p><em>This interface inherits properties from the {{domxref("EventTarget")}} interface and implements properties from the {{domxref("WindowOrWorkerGlobalScope")}} and {{domxref("WindowEventHandlers")}} mixins.</em></p> + +<p>Note that properties which are objects (e.g.,. for overriding the prototype of built-in elements) are listed in a separate section below.</p> + +<dl> + <dt>{{domxref("Window.closed")}} {{Non-standard_inline}} {{readOnlyInline}}</dt> + <dd>This property indicates whether the current window is closed or not.</dd> + <dt>{{domxref("Window.console")}} {{ReadOnlyInline}}</dt> + <dd>Returns a reference to the console object which provides access to the browser's debugging console.</dd> + <dt>{{domxref("Window.controllers")}} {{non-standard_inline}} {{ReadOnlyInline}}</dt> + <dd>Returns the XUL controller objects for the current chrome window.</dd> + <dt>{{domxref("Window.customElements")}} {{ReadOnlyInline}}</dt> + <dd>returns a reference to the {{domxref("CustomElementRegistry")}} object, which can be used to register new <a href="/en-US/docs/Web/Web_Components/Using_custom_elements">custom elements</a> and get information about previously registered custom elements.</dd> + <dt>{{domxref("Window.crypto")}} {{readOnlyInline}}</dt> + <dd>Returns the browser crypto object.</dd> + <dt>{{domxref("Window.devicePixelRatio")}} {{non-standard_inline}} {{ReadOnlyInline}}</dt> + <dd>Returns the ratio between physical pixels and device independent pixels in the current display.</dd> + <dt>{{domxref("Window.dialogArguments")}} {{ReadOnlyInline}}</dt> + <dd>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")}}.</dd> + <dt>{{domxref("Window.document")}} {{ReadOnlyInline}}</dt> + <dd>Returns a reference to the document that the window contains.</dd> + <dt>{{domxref("Window.DOMMatrix")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>Returns a reference to a {{domxref("DOMMatrix")}} object, which represents 4x4 matrices, suitable for 2D and 3D operations.</dd> + <dt>{{domxref("Window.DOMMatrixReadOnly")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>Returns a reference to a {{domxref("DOMMatrixReadOnly")}} object, which represents 4x4 matrices, suitable for 2D and 3D operations.</dd> + <dt>{{domxref("Window.DOMPoint")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>Returns a reference to a {{domxref("DOMPoint")}} object, which represents a 2D or 3D point in a coordinate system.</dd> + <dt>{{domxref("Window.DOMPointReadOnly")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>Returns a reference to a {{domxref("DOMPointReadOnly")}} object, which represents a 2D or 3D point in a coordinate system.</dd> + <dt>{{domxref("Window.DOMQuad")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>Returns a reference to a {{domxref("DOMQuad")}} object, which provides represents a quadrilaterial object, that is one having four corners and four sides.</dd> + <dt>{{domxref("Window.DOMRect")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>Returns a reference to a {{domxref("DOMRect")}} object, which represents a rectangle.</dd> + <dt>{{domxref("Window.DOMRectReadOnly")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>Returns a reference to a {{domxref("DOMRectReadOnly")}} object, which represents a rectangle.</dd> + <dt>{{domxref("Window.event")}} {{ReadOnlyInline}}</dt> + <dd>Returns the <strong>current event</strong>, which is the event currently being handled by the JavaScript code's context, or <code>undefined</code> if no event is currently being handled. The {{domxref("Event")}} object passed directly to event handlers should be used instead whenever possible.</dd> + <dt>{{domxref("Window.frameElement")}} {{readOnlyInline}}</dt> + <dd>Returns the element in which the window is embedded, or null if the window is not embedded.</dd> + <dt>{{domxref("Window.frames")}} {{readOnlyInline}}</dt> + <dd>Returns an array of the subframes in the current window.</dd> + <dt>{{domxref("Window.fullScreen")}}</dt> + <dd>This property indicates whether the window is displayed in full screen or not.</dd> + <dt>{{domxref("Window.history")}} {{ReadOnlyInline}}</dt> + <dd>Returns a reference to the history object.</dd> + <dt>{{domxref("Window.innerHeight")}} {{readOnlyInline}}</dt> + <dd>Gets the height of the content area of the browser window including, if rendered, the horizontal scrollbar.</dd> + <dt>{{domxref("Window.innerWidth")}} {{readOnlyInline}}</dt> + <dd>Gets the width of the content area of the browser window including, if rendered, the vertical scrollbar.</dd> + <dt>{{domxref("Window.isSecureContext")}} {{experimental_inline}} {{readOnlyInline}}</dt> + <dd>Indicates whether a context is capable of using features that require secure contexts.</dd> + <dt>{{domxref("Window.length")}} {{readOnlyInline}}</dt> + <dd>Returns the number of frames in the window. See also {{domxref("window.frames")}}.</dd> + <dt>{{domxref("Window.location")}}</dt> + <dd>Gets/sets the location, or current URL, of the window object.</dd> + <dt>{{domxref("Window.locationbar")}} {{ReadOnlyInline}}</dt> + <dd>Returns the locationbar object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.localStorage")}} {{readOnlyInline}}</dt> + <dd>Returns a reference to the local storage object used to store data that may only be accessed by the origin that created it.</dd> + <dt>{{domxref("Window.menubar")}} {{ReadOnlyInline}}</dt> + <dd>Returns the menubar object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.messageManager")}}</dt> + <dd>Returns the <a href="/en-US/docs/The_message_manager">message manager</a> object for this window.</dd> + <dt>{{domxref("Window.mozInnerScreenX")}} {{ReadOnlyInline}} {{non-standard_inline}}</dt> + <dd>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 <code>mozScreenPixelsPerCSSPixel</code> in {{interface("nsIDOMWindowUtils")}} for a conversion factor to adapt to screen pixels if needed.</dd> + <dt>{{domxref("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{non-standard_inline}}</dt> + <dd>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 <code>mozScreenPixelsPerCSSPixel</code> for a conversion factor to adapt to screen pixels if needed.</dd> + <dt>{{domxref("Window.name")}}</dt> + <dd>Gets/sets the name of the window.</dd> + <dt>{{domxref("Window.navigator")}} {{readOnlyInline}}</dt> + <dd>Returns a reference to the navigator object.</dd> + <dt>{{domxref("Window.opener")}}</dt> + <dd>Returns a reference to the window that opened this current window.</dd> + <dt>{{domxref("Window.orientation")}} {{non-standard_inline}} {{deprecated_inline}} {{readOnlyInline}}</dt> + <dd>Returns the orientation in degrees (in 90 degree increments) of the viewport relative to the device's natural orientation.</dd> + <dt>{{domxref("Window.outerHeight")}} {{readOnlyInline}}</dt> + <dd>Gets the height of the outside of the browser window.</dd> + <dt>{{domxref("Window.outerWidth")}} {{readOnlyInline}}</dt> + <dd>Gets the width of the outside of the browser window.</dd> + <dt>{{domxref("Window.scrollX","Window.pageXOffset")}} {{readOnlyInline}}</dt> + <dd>An alias for {{domxref("window.scrollX")}}.</dd> + <dt>{{domxref("Window.scrollY","Window.pageYOffset")}} {{readOnlyInline}}</dt> + <dd>An alias for {{domxref("window.scrollY")}}</dd> + <dt>{{domxref("Window.parent")}} {{readOnlyInline}}</dt> + <dd>Returns a reference to the parent of the current window or subframe.</dd> + <dt>{{domxref("Window.performance")}} {{readOnlyInline}}</dt> + <dd>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 <a href="/en-US/docs/Navigation_timing">performance-related</a> data. See also <a href="/en-US/docs/Web/API/Navigation_timing_API/Using_Navigation_Timing">Using Navigation Timing</a> for additional information and examples.</dd> + <dt>{{domxref("Window.personalbar")}} {{readOnlyInline}}</dt> + <dd>Returns the personalbar object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.screen")}} {{readOnlyInline}}</dt> + <dd>Returns a reference to the screen object associated with the window.</dd> + <dt>{{domxref("Window.screenX")}} and {{domxref("Window.screenLeft")}} {{readOnlyInline}}</dt> + <dd>Both properties return the horizontal distance from the left border of the user's browser viewport to the left side of the screen.</dd> + <dt>{{domxref("Window.screenY")}} and {{domxref("Window.screenTop")}} {{readOnlyInline}}</dt> + <dd>Both properties return the vertical distance from the top border of the user's browser viewport to the top side of the screen.</dd> + <dt>{{domxref("Window.scrollbars")}} {{readOnlyInline}}</dt> + <dd>Returns the scrollbars object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.scrollMaxX")}} {{non-standard_inline}} {{ReadOnlyInline}}</dt> + <dd>The maximum offset that the window can be scrolled to horizontally, that is the document width minus the viewport width.</dd> + <dt>{{domxref("Window.scrollMaxY")}} {{non-standard_inline}} {{ReadOnlyInline}}</dt> + <dd>The maximum offset that the window can be scrolled to vertically (i.e., the document height minus the viewport height).</dd> + <dt>{{domxref("Window.scrollX")}} {{readOnlyInline}}</dt> + <dd>Returns the number of pixels that the document has already been scrolled horizontally.</dd> + <dt>{{domxref("Window.scrollY")}} {{readOnlyInline}}</dt> + <dd>Returns the number of pixels that the document has already been scrolled vertically.</dd> + <dt>{{domxref("Window.self")}} {{ReadOnlyInline}}</dt> + <dd>Returns an object reference to the window object itself.</dd> + <dt>{{domxref("Window.sessionStorage")}}</dt> + <dd>Returns a reference to the session storage object used to store data that may only be accessed by the origin that created it.</dd> + <dt>{{domxref("Window.sidebar")}} {{non-standard_inline}} {{ReadOnlyInline}}</dt> + <dd>Returns a reference to the window object of the sidebar.</dd> + <dt>{{domxref("Window.speechSynthesis")}} {{ReadOnlyInline}}</dt> + <dd>Returns a {{domxref("SpeechSynthesis")}} object, which is the entry point into using <a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a> speech synthesis functionality.</dd> + <dt>{{domxref("Window.status")}}</dt> + <dd>Gets/sets the text in the statusbar at the bottom of the browser.</dd> + <dt>{{domxref("Window.statusbar")}} {{readOnlyInline}}</dt> + <dd>Returns the statusbar object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.toolbar")}} {{readOnlyInline}}</dt> + <dd>Returns the toolbar object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.top")}} {{readOnlyInline}}</dt> + <dd>Returns a reference to the topmost window in the window hierarchy. This property is read only.</dd> + <dt>{{domxref("Window.visualViewport")}} {{readOnlyInline}}</dt> + <dd>Returns a {{domxref("VisualViewport")}} object which represents the visual viewport for a given window.</dd> + <dt>{{domxref("Window.window")}} {{ReadOnlyInline}}</dt> + <dd>Returns a reference to the current window.</dd> + <dt><code>window[0]</code>, <code>window[1]</code>, etc.</dt> + <dd>Returns a reference to the <code>window</code> object in the frames. See {{domxref("Window.frames")}} for more details.</dd> +</dl> + +<h3 id="Properties_implemented_from_elsewhere">Properties implemented from elsewhere</h3> + +<dl> + <dt>{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}</dt> + <dd>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.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}</dt> + <dd>Provides a mechanism for applications to asynchronously access capabilities of indexed databases; returns an {{domxref("IDBFactory")}} object.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}</dt> + <dd>Returns a boolean indicating whether the current context is secure (<code>true</code>) or not (<code>false</code>).</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}</dt> + <dd>Returns the global object's origin, serialized as a string. (This does not yet appear to be implemented in any browser.)</dd> +</dl> + +<h3 id="Obsolete_properties">Obsolete properties</h3> + +<dl> + <dt>{{domxref("Window.content")}} and <code>Window._content</code> {{Non-standard_inline}} {{obsolete_inline}} {{ReadOnlyInline}}</dt> + <dd>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.</dd> + <dt>{{domxref("Window.defaultStatus")}} {{obsolete_inline}}</dt> + <dd>Gets/sets the status bar text for the given window.</dd> + <dt>{{domxref("Window.directories")}} {{obsolete_inline}}</dt> + <dd>Synonym of {{domxref("window.personalbar")}}</dd> + <dt>{{domxref("Window.globalStorage")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Multiple storage objects that were used for storing data across multiple pages.</dd> + <dt>{{domxref("Window.mozAnimationStartTime")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>The time in milliseconds since epoch at which the current animation cycle began. Use {{domxref("Animation.startTime")}} instead.</dd> + <dt>{{domxref("Window.mozPaintCount")}} {{non-standard_inline}} {{obsolete_inline}}</dt> + <dd>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.</dd> + <dt>{{domxref("Window.pkcs11")}} {{obsolete_inline}}</dt> + <dd>Formerly provided access to install and remove PKCS11 modules.</dd> + <dt>{{domxref("Window.returnValue")}} {{obsolete_inline}}</dt> + <dd>The return value to be returned to the function that called {{domxref("window.showModalDialog()")}} to display the window as a modal dialog.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>This interface inherits methods from the {{domxref("EventTarget")}} interface and implements methods from {{domxref("WindowOrWorkerGlobalScope")}} and {{domxref("EventTarget")}}.</em></p> + +<dl> + <dt>{{domxref("Window.alert()")}}</dt> + <dd>Displays an alert dialog.</dd> + <dt>{{domxref("Window.blur()")}}</dt> + <dd>Sets focus away from the window.</dd> + <dt>{{domxref("Window.cancelAnimationFrame()")}} {{experimental_inline}}</dt> + <dd>Enables you to cancel a callback previously scheduled with {{domxref("Window.requestAnimationFrame")}}.</dd> + <dt>{{domxref("Window.cancelIdleCallback()")}} {{experimental_inline}}</dt> + <dd>Enables you to cancel a callback previously scheduled with {{domxref("Window.requestIdleCallback")}}.</dd> + <dt>{{domxref("Window.clearImmediate()")}}</dt> + <dd>Cancels the repeated execution set using <code>setImmediate</code>.</dd> + <dt>{{domxref("Window.close()")}}</dt> + <dd>Closes the current window.</dd> + <dt>{{domxref("Window.confirm()")}}</dt> + <dd>Displays a dialog with a message that the user needs to respond to.</dd> + <dt>{{domxref("Window.dump()")}} {{Non-standard_inline}}</dt> + <dd>Writes a message to the console.</dd> + <dt>{{domxref("Window.find()")}}</dt> + <dd>Searches for a given string in a window.</dd> + <dt>{{domxref("Window.focus()")}}</dt> + <dd>Sets focus on the current window.</dd> + <dt>{{domxref("Window.getComputedStyle()")}}</dt> + <dd>Gets computed style for the specified element. Computed style indicates the computed values of all CSS properties of the element.</dd> + <dt>{{domxref("Window.getDefaultComputedStyle()")}} {{Non-standard_inline}}</dt> + <dd>Gets default computed style for the specified element, ignoring author stylesheets.</dd> + <dt>{{domxref("Window.getSelection()")}}</dt> + <dd>Returns the selection object representing the selected item(s).</dd> + <dt>{{domxref("Window.matchMedia()")}}</dt> + <dd>Returns a {{domxref("MediaQueryList")}} object representing the specified media query string.</dd> + <dt>{{domxref("Window.maximize()")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.minimize()")}} (top-level XUL windows only)</dt> + <dd>Minimizes the window.</dd> + <dt>{{domxref("Window.moveBy()")}}</dt> + <dd>Moves the current window by a specified amount.</dd> + <dt>{{domxref("Window.moveTo()")}}</dt> + <dd>Moves the window to the specified coordinates.</dd> + <dt>{{domxref("Window.open()")}}</dt> + <dd>Opens a new window.</dd> + <dt>{{domxref("Window.postMessage()")}}</dt> + <dd>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.</dd> + <dt>{{domxref("Window.print()")}}</dt> + <dd>Opens the Print Dialog to print the current document.</dd> + <dt>{{domxref("Window.prompt()")}}</dt> + <dd>Returns the text entered by the user in a prompt dialog.</dd> + <dt>{{domxref("Window.requestAnimationFrame()")}}</dt> + <dd>Tells the browser that an animation is in progress, requesting that the browser schedule a repaint of the window for the next animation frame.</dd> + <dt>{{domxref("Window.requestIdleCallback()")}} {{experimental_inline}}</dt> + <dd>Enables the scheduling of tasks during a browser's idle periods.</dd> + <dt>{{domxref("Window.resizeBy()")}}</dt> + <dd>Resizes the current window by a certain amount.</dd> + <dt>{{domxref("Window.resizeTo()")}}</dt> + <dd>Dynamically resizes window.</dd> + <dt>{{domxref("Window.scroll()")}}</dt> + <dd>Scrolls the window to a particular place in the document.</dd> + <dt>{{domxref("Window.scrollBy()")}}</dt> + <dd>Scrolls the document in the window by the given amount.</dd> + <dt>{{domxref("Window.scrollByLines()")}} {{Non-standard_inline}}</dt> + <dd>Scrolls the document by the given number of lines.</dd> + <dt>{{domxref("Window.scrollByPages()")}} {{Non-standard_inline}}</dt> + <dd>Scrolls the current document by the specified number of pages.</dd> + <dt>{{domxref("Window.scrollTo()")}}</dt> + <dd>Scrolls to a particular set of coordinates in the document.</dd> + <dt>{{domxref("Window.setCursor()")}} {{Non-standard_inline}} (top-level XUL windows only)</dt> + <dd>Changes the cursor for the current window</dd> + <dt>{{domxref("Window.setImmediate()")}}</dt> + <dd>Executes a function after the browser has finished other heavy tasks</dd> + <dt>{{domxref("Window.setResizable()")}} {{Non-standard_inline}}</dt> + <dd>Toggles a user's ability to resize a window.</dd> + <dt>{{domxref("Window.sizeToContent()")}} {{Non-standard_inline}}</dt> + <dd>Sizes the window according to its content.</dd> + <dt>{{domxref("Window.stop()")}}</dt> + <dd>This method stops window loading.</dd> + <dt>{{domxref("Window.updateCommands()")}} {{Non-standard_inline}}</dt> + <dd>Updates the state of commands of the current chrome window (UI).</dd> +</dl> + +<h3 id="Methods_implemented_from_elsewhere">Methods implemented from elsewhere</h3> + +<dl> + <dt>{{domxref("EventTarget.addEventListener()")}}</dt> + <dd>Register an event handler to a specific event type on the window.</dd> + <dt>{{domxref("EventTarget.dispatchEvent()")}}</dt> + <dd>Used to trigger an event.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.atob()")}}</dt> + <dd>Decodes a string of data which has been encoded using base-64 encoding.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.btoa()")}}</dt> + <dd>Creates a base-64 encoded ASCII string from a string of binary data.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}</dt> + <dd>Cancels the repeated execution set using {{domxref("WindowOrWorkerGlobalScope.setInterval()")}}.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}</dt> + <dd>Cancels the delayed execution set using {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}</dt> + <dd>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 <em>(sx, sy)</em> with width sw, and height sh.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.fetch()")}}</dt> + <dd>Starts the process of fetching a resource from the network.</dd> + <dt>{{domxref("EventTarget.removeEventListener")}}</dt> + <dd>Removes an event listener from the window.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}</dt> + <dd>Schedules a function to execute every time a given number of milliseconds elapses.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}</dt> + <dd>Schedules a function to execute in a given amount of time.</dd> +</dl> + +<h3 id="Obsolete_methods">Obsolete methods</h3> + +<dl> + <dt>{{domxref("Window.back()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Moves back one in the window history. This method is obsolete; you should instead use {{domxref("History.back", "window.history.back()")}}.</dd> + <dt>{{domxref("Window.captureEvents()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Registers the window to capture all events of the specified type.</dd> + <dt>{{domxref("Window.forward()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Moves the window one document forward in the history. This method is obsolete; you should instead use {{domxref("History.forward", "window.history.forward()")}}.</dd> + <dt>{{domxref("Window.getAttention()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Flashes the application icon.</dd> + <dt>{{domxref("Window.home()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Returns the browser to the home page.</dd> + <dt>{{domxref("Window.openDialog()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Opens a new dialog window.</dd> + <dt>{{domxref("Window.releaseEvents()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Releases the window from trapping events of a specific type.</dd> + <dt>{{domxref("Window.showModalDialog()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Displays a modal dialog.</dd> +</dl> + +<h2 id="Event_handlers">Event handlers</h2> + +<p>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.</p> + +<p><em>This interface inherits event handlers from the {{domxref("EventTarget")}} interface and implements event handlers from {{domxref("WindowEventHandlers")}}.</em></p> + +<div class="note"> +<p><strong>Note:</strong> Starting in {{Gecko("9.0")}}, you can now use the syntax <code>if ("onabort" in window)</code> 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 <a href="/en-US/docs/DOM/DOM_event_handlers">DOM event handlers</a> for details.</p> +</div> + +<dl> + <dt>{{domxref("Window.onappinstalled")}}</dt> + <dd>Called when the page is installed as a webapp. See {{domxref("Window/appinstalled_event", "appinstalled")}} event.</dd> + <dt>{{domxref("Window.onbeforeinstallprompt")}}</dt> + <dd>An event handler property dispatched before a user is prompted to save a web site to a home screen on mobile.</dd> + <dt>{{domxref("Window.ondevicelight")}}</dt> + <dd>An event handler property for any ambient light levels changes</dd> + <dt>{{domxref("Window.ondevicemotion")}}</dt> + <dd>Called if accelerometer detects a change (For mobile devices)</dd> + <dt>{{domxref("Window.ondeviceorientation")}}</dt> + <dd>Called when the orientation is changed (For mobile devices)</dd> + <dt>{{domxref("Window.ondeviceorientationabsolute")}} {{non-standard_inline}}</dt> + <dd>An event handler property for any device orientation changes.</dd> + <dt>{{domxref("Window.ondeviceproximity")}}</dt> + <dd>An event handler property for device proximity event</dd> + <dt>{{domxref("Window.ongamepadconnected")}}</dt> + <dd>Represents an event handler that will run when a gamepad is connected (when the {{event('gamepadconnected')}} event fires).</dd> + <dt>{{domxref("Window.ongamepaddisconnected")}}</dt> + <dd>Represents an event handler that will run when a gamepad is disconnected (when the {{event('gamepaddisconnected')}} event fires).</dd> + <dt>{{domxref("Window.onmozbeforepaint")}}</dt> + <dd>An event handler property for the <code>MozBeforePaint</code> event, which is sent before repainting the window if the event has been requested by a call to the {{domxref("Window.mozRequestAnimationFrame()")}} method.</dd> + <dt>{{domxref("Window.onpaint")}}</dt> + <dd>An event handler property for paint events on the window.</dd> + <dt>{{domxref("Window.onrejectionhandled")}} {{experimental_inline}}</dt> + <dd>An event handler for handled {{jsxref("Promise")}} rejection events.</dd> + <dt>{{domxref("Window.onuserproximity")}}</dt> + <dd>An event handler property for user proximity events.</dd> + <dt>{{domxref("Window.onvrdisplayconnect")}}</dt> + <dd>Represents an event handler that will run when a compatible VR device has been connected to the computer (when the {{event("vrdisplayconnected")}} event fires).</dd> + <dt>{{domxref("Window.onvrdisplaydisconnect")}}</dt> + <dd>Represents an event handler that will run when a compatible VR device has been disconnected from the computer (when the {{event("vrdisplaydisconnected")}} event fires).</dd> + <dt>{{domxref("Window.onvrdisplayactivate")}}</dt> + <dd>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.</dd> + <dt>{{domxref("Window.onvrdisplaydeactivate")}}</dt> + <dd>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.</dd> + <dt>{{domxref("Window.onvrdisplayblur")}}</dt> + <dd>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.</dd> + <dt>{{domxref("Window.onvrdisplayfocus")}}</dt> + <dd>Represents an event handler that will run when presentation to a display has resumed after being blurred (when the {{event("vrdisplayfocus")}} event fires).</dd> + <dt>{{domxref("Window.onvrdisplaypresentchange")}}</dt> + <dd>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).</dd> +</dl> + +<h3 id="Event_handlers_implemented_from_elsewhere">Event handlers implemented from elsewhere</h3> + +<dl> + <dt>{{domxref("GlobalEventHandlers.onabort")}}</dt> + <dd>Called when the loading of a resource has been aborted, such as by a user canceling the load while it is still in progress</dd> + <dt>{{domxref("WindowEventHandlers.onafterprint")}}</dt> + <dd>Called when the print dialog box is closed. See {{event("afterprint")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.onbeforeprint")}}</dt> + <dd>Called when the print dialog box is opened. See {{event("beforeprint")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.onbeforeunload")}}</dt> + <dd>An event handler property for before-unload events on the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onblur")}}</dt> + <dd>Called after the window loses focus, such as due to a popup.</dd> + <dt>{{domxref("GlobalEventHandlers.onchange")}}</dt> + <dd>An event handler property for change events on the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onclick")}}</dt> + <dd>Called after the ANY mouse button is pressed & released</dd> + <dt>{{domxref("GlobalEventHandlers.ondblclick")}}</dt> + <dd>Called when a double click is made with ANY mouse button.</dd> + <dt>{{domxref("GlobalEventHandlers.onclose")}}</dt> + <dd>Called after the window is closed</dd> + <dt>{{domxref("GlobalEventHandlers.oncontextmenu")}}</dt> + <dd>Called when the RIGHT mouse button is pressed</dd> + <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt> + <dd>Called when a resource fails to load OR when an error occurs at runtime. See {{event("error")}} event.</dd> + <dt>{{domxref("GlobalEventHandlers.onfocus")}}</dt> + <dd>Called after the window receives or regains focus. See {{event("focus")}} events.</dd> + <dt>{{domxref("WindowEventHandlers.onhashchange")}} {{gecko_minversion_inline("1.9.2")}}</dt> + <dd>An event handler property for {{event('hashchange')}} events on the window; called when the part of the URL after the hash mark ("#") changes.</dd> + <dt>{{domxref("GlobalEventHandlers.oninput")}}</dt> + <dd>Called when the value of an <input> element changes</dd> + <dt>{{domxref("GlobalEventHandlers.onkeydown")}}</dt> + <dd>Called when you begin pressing ANY key. See {{event("keydown")}} event.</dd> + <dt>{{domxref("GlobalEventHandlers.onkeypress")}}</dt> + <dd>Called when a key (except Shift, Fn, and CapsLock) is in pressed position. See {{event("keypress")}} event.</dd> + <dt>{{domxref("GlobalEventHandlers.onkeyup")}}</dt> + <dd>Called when you finish releasing ANY key. See {{event("keyup")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.onlanguagechange")}}</dt> + <dd>An event handler property for {{event("languagechange")}} events on the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onload")}}</dt> + <dd>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.</dd> + <dt>{{domxref("WindowEventHandlers.onmessage")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("message")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onmousedown")}}</dt> + <dd>Called when ANY mouse button is pressed.</dd> + <dt>{{domxref("GlobalEventHandlers.onmousemove")}}</dt> + <dd>Called continously when the mouse is moved inside the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseout")}}</dt> + <dd>Called when the pointer leaves the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseover")}}</dt> + <dd>Called when the pointer enters the window</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseup")}}</dt> + <dd>Called when ANY mouse button is released</dd> + <dt>{{domxref("WindowEventHandlers.onoffline")}}</dt> + <dd>Called when network connection is lost. See {{event("offline")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.ononline")}}</dt> + <dd>Called when network connection is established. See {{event("online")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.onpagehide")}}</dt> + <dd>Called when the user navigates away from the page, before the onunload event. See {{event("pagehide")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.onpageshow")}}</dt> + <dd>Called after all resources and the DOM are fully loaded. See {{event("pageshow")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.onpopstate")}}</dt> + <dd>Called when a back button is pressed.</dd> + <dt>{{domxref("GlobalEventHandlers.onreset")}}</dt> + <dd>Called when a form is reset</dd> + <dt>{{domxref("GlobalEventHandlers.onresize")}}</dt> + <dd>Called continuously as you are resizing the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onscroll")}}</dt> + <dd>Called when the scroll bar is moved via ANY means. If the resource fully fits in the window, then this event cannot be invoked</dd> + <dt>{{domxref("GlobalEventHandlers.onwheel")}}</dt> + <dd>Called when the mouse wheel is rotated around any axis</dd> + <dt>{{domxref("GlobalEventHandlers.onselect")}}</dt> + <dd>Called after text in an input field is selected</dd> + <dt>{{domxref("GlobalEventHandlers.onselectionchange")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised.</dd> + <dt>{{domxref("WindowEventHandlers.onstorage")}}</dt> + <dd>Called when there is a change in session storage or local storage. See {{event("storage")}} event</dd> + <dt>{{domxref("GlobalEventHandlers.onsubmit")}}</dt> + <dd>Called when a form is submitted</dd> + <dt>{{domxref("WindowEventHandlers.onunhandledrejection")}} {{experimental_inline}}</dt> + <dd>An event handler for unhandled {{jsxref("Promise")}} rejection events.</dd> + <dt>{{domxref("WindowEventHandlers.onunload")}}</dt> + <dd>Called when the user navigates away from the page.</dd> +</dl> + +<h2 id="Events">Events</h2> + +<p>Listen to these events using <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> or by assigning an event listener to the <code>on<em>eventname</em></code> property of this interface.</p> + +<dl> + <dt>{{domxref("Window/error_event", "error")}}</dt> + <dd>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.<br> + Also available via the {{domxref("GlobalEventHandlers/onerror", "onerror")}} property.</dd> + <dt>{{domxref("Window/languagechange_event", "languagechange")}}</dt> + <dd>Fired at the global scope object when the user's preferred language changes.<br> + Also available via the {{domxref("WindowEventHandlers/onlanguagechange", "onlanguagechange")}} property.</dd> + <dt>{{domxref("Window/orientationchange_event", "orientationchange")}}</dt> + <dd>Fired when the orientation of the device has changed.<br> + Also available via the {{domxref("Window/onorientationchange", "onorientationchange")}} property.</dd> + <dt>{{domxref("Window/devicemotion_event", "devicemotion")}}</dt> + <dd>Fired at a regular interval, indicating the amount of physical force of acceleration the device is receiving and the rate of rotation, if available.</dd> + <dt>{{domxref("Window/deviceorientation_event", "deviceorientation")}}</dt> + <dd>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.</dd> + <dt><code>{{domxref("Document/defaultView/resize_event", "resize")}}</code></dt> + <dd>Fired when the window has been resized.<br> + Also available via the {{domxref("GlobalEventHandlers/onresize", "onresize")}} property.</dd> + <dt><code>{{domxref("Document/defaultView/storage_event", "storage")}}</code></dt> + <dd>Fired when a storage area (<code>localStorage</code> or <code>sessionStorage</code>) has been modified in the context of another document.<br> + Also available via the {{domxref("WindowEventHandlers/onstorage", "onstorage")}} property.</dd> +</dl> + +<h3 id="Animation_events">Animation events</h3> + +<dl> + <dt>{{domxref("Window/animationcancel_event", "animationcancel")}}</dt> + <dd>Fired when an animation unexpectedly aborts.<br> + Also available via the {{domxref("GlobalEventHandlers/onanimationcancel", "onanimationcancel")}} property.</dd> + <dt>{{domxref("Window/animationend_event", "animationend")}}</dt> + <dd>Fired when an animation has completed normally.<br> + Also available via the {{domxref("GlobalEventHandlers/onanimationend", "onanimationend")}} property.</dd> + <dt>{{domxref("Window/animationiteration_event", "animationiteration")}}</dt> + <dd>Fired when an animation iteration has completed.<br> + Also available via the {{domxref("GlobalEventHandlers/onanimationiteration", "onanimationiteration")}} property.</dd> + <dt>{{domxref("Window/animationstart_event", "animationstart")}}</dt> + <dd>Fired when an animation starts.<br> + Also available via the {{domxref("GlobalEventHandlers/onanimationstart", "onanimationstart")}} property.</dd> +</dl> + +<h3 id="Clipboard_events">Clipboard events</h3> + +<dl> + <dt>{{domxref("Window/clipboardchange_event", "clipboardchange")}}</dt> + <dd>Fired when the system clipboard content changes.</dd> + <dt>{{domxref("Window/copy_event", "copy")}}</dt> + <dd>Fired when the user initiates a copy action through the browser's user interface.<br> + Also available via the {{domxref("HTMLElement/oncopy", "oncopy")}} property.</dd> + <dt>{{domxref("Window/cut_event", "cut")}}</dt> + <dd>Fired when the user initiates a cut action through the browser's user interface.<br> + Also available via the {{domxref("HTMLElement/oncut", "oncut")}} property.</dd> + <dt>{{domxref("Window/paste_event", "paste")}}</dt> + <dd>Fired when the user initiates a paste action through the browser's user interface.<br> + Also available via the {{domxref("HTMLElement/onpaste", "onpaste")}} property.</dd> +</dl> + +<h3 id="Connection_events">Connection events</h3> + +<dl> + <dt>{{domxref("Window/offline_event", "offline")}}</dt> + <dd>Fired when the browser has lost access to the network and the value of <code>navigator.onLine</code> has switched to <code>false</code>.<br> + Also available via the {{domxref("WindowEventHandlers.onoffline", "onoffline")}} property.</dd> + <dt>{{domxref("Window/online_event", "online ")}}</dt> + <dd>Fired when the browser has gained access to the network and the value of <code>navigator.onLine</code> has switched to <code>true</code>.<br> + Also available via the {{domxref("WindowEventHandlers.ononline", "ononline")}} property.</dd> +</dl> + +<h3 id="Focus_events">Focus events</h3> + +<dl> + <dt>{{domxref("Window/blur_event", "blur")}}</dt> + <dd>Fired when an element has lost focus.<br> + Also available via the {{domxref("GlobalEventHandlers/onblur", "onblur")}} property.</dd> + <dt>{{domxref("Window/focus_event", "focus")}}</dt> + <dd>Fired when an element has gained focus.<br> + Also available via the {{domxref("GlobalEventHandlers/onfocus", "onfocus")}} property</dd> +</dl> + +<h3 id="Gamepad_events">Gamepad events</h3> + +<dl> + <dt>{{domxref("Window/gamepadconnected_event", "gamepadconnected")}}</dt> + <dd>Fired when the browser detects that a gamepad has been connected or the first time a button/axis of the gamepad is used.<br> + Also available via the {{domxref("Window/ongamepadconnected", "ongamepadconnected")}} property.</dd> + <dt>{{domxref("Window/gamepaddisconnected_event", "gamepaddisconnected")}}</dt> + <dd>Fired when the browser detects that a gamepad has been disconnected.<br> + Also available via the {{domxref("Window/ongamepaddisconnected", "ongamepaddisconnected")}} property</dd> +</dl> + +<h3 id="History_events">History events</h3> + +<dl> + <dt>{{domxref("Window/hashchange_event", "hashchange")}}</dt> + <dd>Fired when the fragment identifier of the URL has changed (the part of the URL beginning with and following the <code>#</code> symbol).<br> + Also available via the {{domxref("WindowEventHandlers/onhashchange", "onhashchange")}} property.</dd> + <dt>{{domxref("Window/pagehide_event", "pagehide")}}</dt> + <dd>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.<br> + Also available through the <code><a href="/en-US/docs/Mozilla/Tech/XUL/Attribute/onpagehide">onpagehide</a></code> event handler property.</dd> + <dt>{{domxref("Window/pageshow_event", "pageshow")}}</dt> + <dd>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.<br> + Also available using the <code><a href="/en-US/docs/Mozilla/Tech/XUL/Attribute/onpageshow">onpageshow</a></code> event handler property.</dd> + <dt><code>{{domxref("Document/defaultView/popstate_event", "popstate")}}</code></dt> + <dd>Fired when the active history entry changes.<br> + Also available using the {{domxref("WindowEventHandlers/onpopstate", "onpopstate")}} event handler property.</dd> +</dl> + +<h3 id="Load_unload_events">Load & unload events</h3> + +<dl> + <dt>{{domxref("Window/beforeunload_event", "beforeunload")}}</dt> + <dd>Fired when the window, the document and its resources are about to be unloaded.<br> + Also available via the {{domxref("WindowEventHandlers/onbeforeunload", "onbeforeunload")}} property.</dd> + <dt>{{domxref("Window/DOMContentLoaded_event", "DOMContentLoaded")}}</dt> + <dd>Fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.</dd> + <dt>{{domxref("Window/load_event", "load")}}</dt> + <dd>Fired when the whole page has loaded, including all dependent resources such as stylesheets images.<br> + Also available via the {{domxref("GlobalEventHandlers/onload", "onload")}} property.</dd> + <dt>{{domxref("Window/unload_event", "unload")}}</dt> + <dd>Fired when the document or a child resource is being unloaded.<br> + Also available via the {{domxref("WindowEventHandlers/onunload", "onunload")}} property.</dd> +</dl> + +<h3 id="Manifest_events">Manifest events</h3> + +<dl> + <dt>{{domxref("Window/appinstalled_event", "appinstalled")}}</dt> + <dd>Fired when the browser has successfully installed a page as an application.<br> + Also available via the {{domxref("Window/onappinstalled", "onappinstalled")}} property.</dd> + <dt>{{domxref("Window/beforeinstallprompt_event", "beforeinstallprompt")}}</dt> + <dd>Fired when a user is about to be prompted to install a web application.<br> + Also available via the {{domxref("Window/onbeforeinstallprompt", "onbeforeinstallprompt")}} property.</dd> +</dl> + +<h3 id="Messaging_events">Messaging events</h3> + +<dl> + <dt>{{domxref("Window/message_event", "message")}}</dt> + <dd>Fired when the window receives a message, for example from a call to {{domxref("Window/postMessage", "Window.postMessage()")}} from another browsing context.<br> + Also available via the {{domxref("WindowEventHandlers/onmessage", "onmessage")}} property.</dd> + <dt>{{domxref("Window/messageerror_event", "messageerror")}}</dt> + <dd>Fired when a <code>Window</code> object receives a message that can't be deserialized.<br> + Also available via the {{domxref("WindowEventHandlers/onmessageerror", "onmessageerror")}} property.</dd> +</dl> + +<h3 id="Print_events">Print events</h3> + +<dl> + <dt>{{domxref("Window/afterprint_event", "afterprint")}}</dt> + <dd>Fired after the associated document has started printing or the print preview has been closed.<br> + Also available via the {{domxref("WindowEventHandlers/onafterprint", "onafterprint")}} property.</dd> + <dt>{{domxref("Window/beforeprint_event", "beforeprint")}}</dt> + <dd>Fired when the associated document is about to be printed or previewed for printing.<br> + Also available via the {{domxref("WindowEventHandlers/onbeforeprint", "onbeforeprint")}} property.</dd> +</dl> + +<h3 id="Promise_rejection_events">Promise rejection events</h3> + +<dl> + <dt>{{domxref("Window/rejectionhandled_event", "rejectionhandled")}}</dt> + <dd>Sent every time a JavaScript {{jsxref("Promise")}} is rejected, regardless of whether or not there is a handler in place to catch the rejection.<br> + Also available through the {{domxref("WindowEventHandlers/onrejectionhandled", "onrejectionhandled")}} event handler property.</dd> + <dt>{{domxref("Window/unhandledrejection_event", "unhandledrejection")}}</dt> + <dd>Sent when a JavaScript {{jsxref("Promise")}} is rejected but there is no handler in place to catch the rejection.<br> + Also available using the {{domxref("WindowEventHandlers/onunhandledrejection", "onunhandledrejection")}} event handler property.</dd> +</dl> + +<h3 id="Transition_events">Transition events</h3> + +<dl> + <dt>{{domxref("Window/transitioncancel_event", "transitioncancel")}}</dt> + <dd>Fired when a <a href="/en-US/docs/CSS/Using_CSS_transitions">CSS transition</a> is canceled.<br> + Also available via the {{domxref("GlobalEventHandlers/ontransitioncancel", "ontransitioncancel")}} property.</dd> + <dt>{{domxref("Window/transitionend_event", "transitionend")}}</dt> + <dd>Fired when a <a href="/en-US/docs/CSS/Using_CSS_transitions">CSS transition</a> has completed.<br> + Also available via the {{domxref("GlobalEventHandlers/ontransitionend", "ontransitionend")}} property.</dd> + <dt>{{domxref("Window/transitionrun_event", "transitionrun")}}</dt> + <dd>Fired when a <a href="/en-US/docs/CSS/Using_CSS_transitions">CSS transition</a> is first created.<br> + Also available via the {{domxref("GlobalEventHandlers/ontransitionrun", "ontransitionrun")}} property.</dd> + <dt>{{domxref("Window/transitionstart_event", "transitionstart")}}</dt> + <dd>Fired when a <a href="/en-US/docs/CSS/Using_CSS_transitions">CSS transition</a> has actually started.<br> + Also available via the {{domxref("GlobalEventHandlers/ontransitionstart", "ontransitionstart")}} property.</dd> +</dl> + +<h3 id="WebVR_events">WebVR events</h3> + +<dl> + <dt>{{domxref("Window/vrdisplayactivate_event", "vrdisplayactivate")}}</dt> + <dd>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.<br> + Also available via the {{domxref("Window/onvrdisplayactivate", "onvrdisplayactivate")}} property.</dd> + <dt>{{domxref("Window/vrdisplayblur_event", "vrdisplayblur")}}</dt> + <dd>Fired when presentation to a VR display has been paused for some reason by the browser, OS, or VR hardware.<br> + Also available via the {{domxref("Window/onvrdisplayblur", "onvrdisplayblur")}} property.</dd> + <dt>{{domxref("Window/vrdisplayconnect_event", "vrdisplayconnect")}}</dt> + <dd>Fired when a compatible VR display is connected to the computer.<br> + Also available via the {{domxref("Window/onvrdisplayconnect", "onvrdisplayconnect")}} property.</dd> + <dt>{{domxref("Window/vrdisplaydeactivate_event", "vrdisplaydeactivate")}}</dt> + <dd>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.<br> + Also available via the {{domxref("Window/onvrdisplaydeactivate", "onvrdisplaydeactivate")}} property.</dd> + <dt>{{domxref("Window/vrdisplaydisconnect_event", "vrdisplaydisconnect")}}</dt> + <dd>Fired when a compatible VR display is disconnected from the computer.<br> + Also available via the {{domxref("Window/onvrdisplaydisconnect", "onvrdisplaydisconnect")}} property.</dd> + <dt>{{domxref("Window/vrdisplayfocus_event", "vrdisplayfocus")}}</dt> + <dd>Fired when presentation to a VR display has resumed after being blurred.<br> + Also available via the {{domxref("Window/onvrdisplayfocus", "onvrdisplayfocus")}} property.</dd> + <dt>{{domxref("Window/vrdisplaypresentchange_event", "vrdisplaypresentchange")}}</dt> + <dd>Fired when the presenting state of a VR display changes — i.e. goes from presenting to not presenting, or vice versa.<br> + Also available via the {{domxref("Window/onvrdisplaypresentchange", "onvrdisplaypresentchange")}} property.</dd> + <dt>{{domxref("Window/vrdisplaypointerrestricted_event", "vrdisplaypointerrestricted")}}</dt> + <dd>Fired when the VR display's pointer input is restricted to consumption via a <a href="/en-US/docs/Web/API/Pointer_Lock_API">pointerlocked element</a>.<br> + Also available via the {{domxref("Window/onvrdisplaypointerrestricted", "onvrdisplaypointerrestricted")}} property.</dd> + <dt>{{domxref("Window/vrdisplaypointerunrestricted_event", "vrdisplaypointerunrestricted")}}</dt> + <dd>Fired when the VR display's pointer input is no longer restricted to consumption via a <a href="/en-US/docs/Web/API/Pointer_Lock_API">pointerlocked element</a>.<br> + Also available via the {{domxref("Window/onvrdisplaypointerunrestricted", "onvrdisplaypointerunrestricted")}} property.</dd> +</dl> + +<h2 id="Interfaces">Interfaces</h2> + +<p>See <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM Reference</a>.</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Window")}}</p> 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 +--- +<h2 dir="rtl" id="Basic_Example" name="Basic_Example">مثال أساسي</h2> + +<p dir="rtl">يوضح المثال الأول أساسيات تفعيل محول XSLT في المتصفح. سوف يقوم المثال على ملف XML يحتوي على معلومات (العنوان - قائمة المؤلفين - المحتوى) عن مقال. ثم يقوم بعرضه بهيئة صالحة للقراءة.</p> + +<p dir="rtl">يبين الشكل ١ مثال على شكل ملف المصدر الأساسي لـ XSLT. يحتوي ملف XML (example.xml) على معلومات حول المقال. وباستخدام أمر المعالجة <code>?xml-stylesheet?</code> يتم ربط ملف example.xml بملف XSLT عن طريق صفة href.</p> + +<p dir="rtl">تبدأ صحيفة أنماط XSLT بالمكون <code>xsl:stylesheet</code> الذي يحوي كل القوالب المستخدمة في إنشاء المُخرَج المطلوب. يحتوي المثال في الشكل ١ على قالبين، أحدهما يُطَبَّق على عقدة التَفَرُّع الرئيسية والآخر يُطَبَّق على عقدة <code>Author</code>. يقوم القالب الذي يُطَبَّق على عقدة التَفَرُّع الرئيسية بإخراج عنوان المقال، ثم يقوم بعدها باستدعاء باقي القوالب (عن طريق <code>apply-templates</code>) التي تطابق عقدة <code>Author</code> وتكون فرعية عنها.</p> + +<p dir="rtl">الشكل ١: مثال XSLT بسيط</p> + +<p dir="rtl">ملف XML (example.xml):</p> + +<pre class="brush: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></pre> + +<p style="direction: rtl;">صحيفة أنماط XSL (example.xsl):</p> + +<pre class="brush:xml"><?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></pre> + +<p style="direction: rtl;">مُخرَج المتصفح:</p> + +<blockquote> +<p dir="rtl">مقال - مقالي<br> + المؤلفون:<br> + - السيد أحمد<br> + - السيد محمد</p> +</blockquote> 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 +--- +<div>{{Non-standard_header}}{{SeeCompatTable}}{{APIRef("XSLT")}}</div> + +<p>An <strong><code>XSLTProcessor</code></strong> applies an <a href="/en-US/docs/Web/XSLT">XSLT</a> stylesheet transformation to an XML document to produce a new XML document as output. It has methods to load the XSLT stylesheet, to manipulate <code><xsl:param></code> parameter values, and to apply the transformation to documents.</p> + +<h2 id="Syntax">Syntax</h2> + +<p>The constructor has no parameters.</p> + +<pre class="syntaxbox">new XSLTProcessor()</pre> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt><code><a href="/en-US/docs/Mozilla/WebIDL_bindings#Throws">[Throws]</a> void </code>{{domxref("XSLTProcessor.importStylesheet")}}<code>(</code>{{domxref("Node")}}<code> styleSheet)</code></dt> + <dd>Imports the XSLT stylesheet. If the given node is a document node, you can pass in a full XSL Transform or a <a class="external" href="http://www.w3.org/TR/xslt#result-element-stylesheet">literal result element transform</a>; otherwise, it must be an <code><xsl:stylesheet></code> or <code><xsl:transform></code> element.</dd> + <dt><code><a href="/en-US/docs/Mozilla/WebIDL_bindings#Throws">[Throws]</a> </code>{{domxref("DocumentFragment")}} {{domxref("XSLTProcessor.transformToFragment")}}<code>(</code>{{domxref("Node")}}<code> source, </code>{{domxref("Document")}}<code> owner)</code></dt> + <dd>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.</dd> + <dt><code><a href="/en-US/docs/Mozilla/WebIDL_bindings#Throws">[Throws]</a></code> {{domxref("Document")}} {{domxref("XSLTProcessor.transformToDocument")}}<code>(</code>{{domxref("Node")}}<code> source)</code></dt> + <dd> + <p>Transforms the node source applying the stylesheet given importing using the {{domxref("XSLTProcessor.importStylesheet()")}} function.</p> + + <p>The resultant object depends on the <a class="external" href="http://www.w3.org/TR/xslt#output">output method</a> of the stylesheet:</p> + + <table class="standard-table"> + <thead> + <tr> + <th scope="col">Output method</th> + <th scope="col">Result type</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>html</code></td> + <td>{{domxref("HTMLDocument")}}</td> + </tr> + <tr> + <td><code>xml</code></td> + <td>{{domxref("XMLDocument")}}</td> + </tr> + <tr> + <td><code>text</code></td> + <td>{{domxref("XMLDocument")}} with a single root element <code><transformiix:result></code> with the text as a child</td> + </tr> + </tbody> + </table> + </dd> + <dt><code><a href="/en-US/docs/Mozilla/WebIDL_bindings#Throws">[Throws]</a> void </code>{{domxref("XSLTProcessor.setParameter")}}<code>(</code>{{jsxref("String")}}<code> namespaceURI, </code>{{jsxref("String")}}<code> localName, any value)</code></dt> + <dd>Sets a parameter in the XSLT stylesheet that was imported. (Sets the value of an <code><xsl:param></code>.) A null value for <code>namespaceURI</code> is treated the same as an empty string.</dd> + <dt><code><a href="/en-US/docs/Mozilla/WebIDL_bindings#Throws">[Throws]</a> any </code>{{domxref("XSLTProcessor.getParameter")}}<code>(</code>{{jsxref("String")}}<code> namespaceURI, </code>{{jsxref("String")}}<code> localName)</code></dt> + <dd>Gets the value of a parameter from the XSLT stylesheet. A null value for <code>namespaceURI</code> is treated the same as an empty string.</dd> + <dt><code><a href="/en-US/docs/Mozilla/WebIDL_bindings#Throws">[Throws]</a> void </code>{{domxref("XSLTProcessor.removeParameter")}}<code>(</code>{{jsxref("String")}}<code> namespaceURI, </code>{{jsxref("String")}}<code> localName)</code></dt> + <dd>Removes the parameter if it was previously set. This will make the <code>XSLTProcessor</code> use the default value for the parameter as specified in the stylesheet. A null value for <code>namespaceURI</code> is treated the same as an empty string.</dd> + <dt><code>void </code>{{domxref("XSLTProcessor.clearParameters()")}}</dt> + <dd>Removes all set parameters from the <code>XSLTProcessor</code>. The <code>XSLTProcessor</code> will then use the defaults specified in the XSLT stylesheet.</dd> + <dt><code>void </code>{{domxref("XSLTProcessor.reset()")}}</dt> + <dd>Removes all parameters and stylesheets from the <code>XSLTProcessor</code>.</dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<h3 id="Non-Web-exposed_properties">Non-Web-exposed properties</h3> + +<p>The following properties are <a href="/en-US/docs/Mozilla/WebIDL_bindings#ChromeOnly"><code>[ChromeOnly]</code></a> and not exposed to Web content:</p> + +<dl> + <dt><code><a href="/en-US/docs/Mozilla/WebIDL_bindings#ChromeOnly">[ChromeOnly]</a> attribute unsigned long </code>{{domxref("XSLTProcessor.flags")}}</dt> + <dd> + <p>Flags that tweak the behavior of the processor. Not reset by calling {{domxref("XSLTProcessor.reset()")}}. Default value: <code>0</code></p> + + <p>Possible values are:</p> + + <table class="standard-table"> + <thead> + <tr> + <th scope="col">Name</th> + <th scope="col">Value</th> + <th scope="col">Effect</th> + </tr> + </thead> + <tbody> + <tr> + <td>(None)</td> + <td><code>0</code></td> + <td>None</td> + </tr> + <tr> + <td><code>DISABLE_ALL_LOADS</code></td> + <td><code>1</code></td> + <td>Disable loading external documents (via e.g. <code><xsl:import></code> and <code>document()</code>)</td> + </tr> + </tbody> + </table> + </dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<ol> + <li><a href="/en-US/docs/XSLT/XSLT_JS_Interface_in_Gecko/Basic_Example">Basic example</a></li> + <li><a href="/en-US/docs/XSLT/XSLT_JS_Interface_in_Gecko/Advanced_Example">Advanced example</a></li> + <li><a href="/en-US/docs/XSLT/XSLT_JS_Interface_in_Gecko/JavaScript_XSLT_Bindings">Additional example</a></li> +</ol> + +<h2 id="Specifications">Specifications</h2> + +<p><em>Not part of any specification.</em> This is a proprietary interface that originated in Gecko.</p> + +<h2 id="Gecko_IDL">Gecko IDL</h2> + +<ul> + <li><code>{{ Source("dom/webidl/XSLTProcessor.webidl", "XSLTProcessor.webidl") }}</code></li> + <li><code>{{ Source("dom/xslt/nsIXSLTProcessor.idl", "nsIXSLTProcessor.idl") }}</code></li> +</ul> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.XSLTProcessor")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Using_the_Mozilla_JavaScript_interface_to_XSL_Transformations">Using the Mozilla JavaScript interface to XSL Transformations</a></li> +</ul> 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 +--- +<p dir="rtl">تحدد خاصية <strong><code>align-content</code></strong> CSS توزيع المساحة بين و حول محتوى العناصر على طول المحور العرضي لـ flexbox أو محور كتلة <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout">الشبكة</a>.</p> + +<p>The interactive example below use Grid Layout to demonstrate some of the values of this property.</p> + +<div>{{EmbedInteractiveExample("pages/css/align-content.html")}}</div> + + + +<p>This property has no effect on single line flex containers (i.e. ones with <code>flex-wrap: nowrap</code>).</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css no-line-numbers notranslate">/* 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; +</pre> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code>start</code></dt> + <dd>The items are packed flush to each other against the start edge of the alignment container in the cross axis.</dd> + <dt><code>end</code></dt> + <dd>The items are packed flush to each other against the end edge of the alignment container in the cross axis.</dd> + <dt><code>flex-start</code></dt> + <dd>The items are packed flush to each other against the edge of the alignment container depending on the flex container's cross-start side.<br> + This only applies to flex layout items. For items that are not children of a flex container, this value is treated like <code>start</code>.</dd> + <dt><code>flex-end</code></dt> + <dd>The items are packed flush to each other against the edge of the alignment container depending on the flex container's cross-end side.<br> + This only applies to flex layout items. For items that are not children of a flex container, this value is treated like <code>end</code>.</dd> + <dt><code>center</code></dt> + <dd>The items are packed flush to each other in the center of the alignment container along the cross axis.</dd> + <dt><code>normal</code></dt> + <dd>The items are packed in their default position as if no <code>align-content</code> value was set.</dd> + <dt><code>baseline<br> + first baseline</code><br> + <code>last baseline</code></dt> + <dd><img alt='the baseline is the line upon which most letters "sit" and below which descenders extend.' src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/Typography_Line_Terms.svg/410px-Typography_Line_Terms.svg.png" style="height: 110px; width: 410px;"></dd> + <dd>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.<br> + The fallback alignment for <code>first baseline</code> is <code>start</code>, the one for <code>last baseline</code> is <code>end</code>.</dd> + <dt><code>space-between</code></dt> + <dd>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.</dd> + <dt><code>space-around</code></dt> + <dd>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.</dd> + <dt><code>space-evenly</code></dt> + <dd>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.</dd> + <dt><code>stretch</code></dt> + <dd>If the combined size of the items along the cross axis is less than the size of the alignment container, any <code>auto</code>-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.</dd> + <dt><code>safe</code></dt> + <dd>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 <code>start</code>.</dd> + <dt><code>unsafe</code></dt> + <dd>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.</dd> +</dl> + +<h2 id="Formal_definition">Formal definition</h2> + +<p>{{CSSInfo}}</p> + +<h2 id="Formal_syntax">Formal syntax</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css; highlight[4] notranslate">#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; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><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> +</pre> + +<div class="hidden"> +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js notranslate">var values = document.getElementById('values'); +var display = document.getElementById('display'); +var container = document.getElementById('container'); + +values.addEventListener('change', function (evt) { + container.style.alignContent = evt.target.value; +}); + +display.addEventListener('change', function (evt) { + container.className = evt.target.value; +}); +</pre> +</div> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Examples", 260, 290)}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Box Alignment", "#propdef-align-content", "align-content")}}</td> + <td>{{Spec2("CSS3 Box Alignment")}}</td> + <td>Adds the [ first | last ]? baseline, start, end, left, right, unsafe | safe values.</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Flexbox", "#align-content-property", "align-content")}}</td> + <td>{{Spec2("CSS3 Flexbox")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<div>{{cssinfo}}</div> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<h3 id="Support_in_Flex_layout">Support in Flex layout</h3> + +<p>{{Compat("css.properties.align-content.flex_context")}}</p> + +<h3 id="Support_in_Grid_layout">Support in Grid layout</h3> + +<p>{{Compat("css.properties.align-content.grid_context")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li> + <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligning items in a flex container</a></em></li> + <li>CSS Grid Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in CSS Grid layouts</a></em></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment">CSS Box Alignment</a></li> +</ul> + +<div>{{CSSRef}}</div> 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 +--- +<div>{{CSSRef}}</div> + +<p dir="rtl">يطابق<em><strong> محدد خاصية</strong></em> CSS عناصر تستند إلى وجود أو قيمة لخاصية معينة.</p> + +<pre class="brush: css no-line-numbers">/* <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; +}</pre> + +<dl> + <dt dir="rtl"><code>[<em>attr</em>]</code></dt> + <dd dir="rtl">يمثل عناصر ذات اسم خاصية attr.</dd> + <dt dir="rtl"><code>[<em>attr</em>=<em>value</em>]</code></dt> + <dd dir="rtl">يمثل العناصر التي تحتوي على اسم خاصية attr التي قيمتها هي ذات القيمة بالضبط.</dd> + <dt dir="rtl"><code>[<em>attr</em>~=<em>value</em>]</code></dt> + <dd dir="rtl">يمثل العناصر التي تحتوي على اسم خاصية attr التي تكون قيمتها قائمة كلمات مفصولة بمسافات بيضاء ، واحدة منها هي القيمة بالضبط.</dd> + <dt dir="rtl"><code>[<em>attr</em>|=<em>value</em>]</code></dt> + <dd dir="rtl">يمثل عناصر ذات اسم خاصية attr يمكن أن تكون قيمتها ذات قيمة بالضبط أو يمكن أن تبدأ بالقيمة مباشرة متبوعة بواصلة ، - (U + 002D).</dd> + <dd dir="rtl">وغالبًا ما يتم استخدامه لمطابقة اللغة الفرعية.</dd> + <dt dir="rtl"><code>[<em>attr</em>^=<em>value</em>]</code></dt> + <dd dir="rtl">يمثل عناصر ذات اسم خاصية attr التي تكون قيمتة تماثل اول القيمة</dd> + <dd dir="rtl">(يبحث عن تماثل في بداية القيمة).</dd> + <dt dir="rtl"><code>[<em>attr</em>$=<em>value</em>]</code></dt> + <dd dir="rtl">يمثل العناصر ذا اسم الخاصية attr التي تكون قيمته تماثل آخر القيمة</dd> + <dd dir="rtl">(يبحث عن تماثل في نهاية القيمة)</dd> + <dt dir="rtl"><code>[<em>attr</em>*=<em>value</em>]</code></dt> + <dd dir="rtl">يمثل عناصر ذات اسم خاصية attr تحتوي قيمتها على تواجد واحد على الأقل للقيمة</dd> + <dd dir="rtl">داخل قيمة الخاصية.</dd> + <dt dir="rtl" id="case-insensitive"><code>[<em>attr</em> <em>operator</em> <em>value</em> i]</code></dt> + <dd dir="rtl">تؤدي إضافة حرف (i) أو (I) قبل قوس الإغلاق إلى مقارنة القيمة بحالة غير حساسة (للأحرف ضمن نطاق ASCII).</dd> +</dl> + +<h2 dir="rtl" id="أمثلة">أمثلة</h2> + +<h3 dir="rtl" id="روابط">روابط</h3> + +<h4 dir="rtl" id="CSS">CSS</h4> + +<pre class="brush: 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; +} +</pre> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: 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></pre> + +<h4 dir="rtl" id="Result">Result</h4> + +<p dir="rtl">{{EmbedLiveSample('Links')}}</p> + +<h3 dir="rtl" id="لغات">لغات</h3> + +<h4 dir="rtl" id="CSS_2">CSS</h4> + +<pre class="brush: 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; +} +</pre> + +<h4 dir="rtl" id="HTML_2">HTML</h4> + +<pre class="brush: 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> +</pre> + +<h4 dir="rtl" id="Result_2">Result</h4> + +<p dir="rtl">{{EmbedLiveSample('Languages')}}</p> + +<h2 dir="rtl" id="مواصفات">مواصفات</h2> + +<table class="standard-table"> + <thead> + <tr> + <th dir="rtl" scope="col">مواصفات</th> + <th dir="rtl" scope="col"><span style="display: none;"> </span>الحالة</th> + <th scope="col">تعليق</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#attribute-selectors', 'attribute selectors')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>يضيف المعدل ل ASCII اختيار قيمة خاصية غير حساسة لحالة الأحرف</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>التعريف الأولي</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="توافق_المتصفح">توافق المتصفح</h2> + + + +<p>{{Compat("css.selectors.attribute")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Selecting a single element: {{domxref("Document.querySelector()")}}, {{domxref("DocumentFragment.querySelector()")}}, or {{domxref("Element.querySelector()")}}</li> + <li>Selecting all matching elements: {{domxref("Document.querySelectorAll()")}}, {{domxref("DocumentFragment.querySelectorAll()")}}, or {{domxref("Element.querySelectorAll()")}}</li> + <li>The above methods are all implemented based on the {{domxref("ParentNode")}} mixin; see {{domxref("ParentNode.querySelector()")}} and {{domxref("ParentNode.querySelectorAll()")}}</li> +</ul> 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 +--- +<div>{{CSSRef}}</div> + +<p class="summary"><strong>CSS Flexible Box Layout</strong> is a module of <a href="/en-US/docs/Web/CSS">CSS</a> 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.</p> + +<h2 id="Basic_Example">Basic Example</h2> + +<p>In the following example a container has been set to <code>display: flex</code>, which means that the three child items become flex items. The value of <code>justify-content</code> has been set to <code>space-between</code> 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 <code>align-items</code> being <code>stretch</code>. The items stretch to the height of the flex container, making them each appear as tall as the tallest item.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 500)}}</p> + +<h2 id="Reference">Reference</h2> + +<h3 id="CSS_Properties">CSS Properties</h3> + +<div class="index"> +<ul> + <li>{{cssxref("flex")}}</li> + <li>{{cssxref("flex-basis")}}</li> + <li>{{cssxref("flex-direction")}}</li> + <li>{{cssxref("flex-flow")}}</li> + <li>{{cssxref("flex-grow")}}</li> + <li>{{cssxref("flex-shrink")}}</li> + <li>{{cssxref("flex-wrap")}}</li> + <li>{{cssxref("order")}}</li> +</ul> +</div> + +<h3 id="Alignment_Properties">Alignment Properties</h3> + +<p>The properties <code>align-content</code>, <code>align-self</code>, <code>align-items</code> and <code>justify-content</code> 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.</p> + +<div class="index"> +<ul> + <li>{{cssxref("justify-content")}}</li> + <li>{{cssxref("align-content")}}</li> + <li>{{cssxref("align-items")}}</li> + <li>{{cssxref("align-self")}}</li> + <li>{{cssxref("place-content")}}</li> + <li>{{cssxref("place-items")}}</li> + <li>{{cssxref("row-gap")}}</li> + <li>{{cssxref("column-gap")}}</li> + <li>{{cssxref("gap")}}</li> +</ul> +</div> + +<h3 id="Glossary_entries">Glossary entries</h3> + +<div class="index"> +<ul> + <li>{{Glossary("Flexbox", "", 1)}}</li> + <li>{{Glossary("Flex Container", "", 1)}}</li> + <li>{{Glossary("Flex Item", "", 1)}}</li> + <li>{{Glossary("Main Axis", "", 1)}}</li> + <li>{{Glossary("Cross Axis", "", 1)}}</li> + <li>{{Glossary("Flex", "", 1)}}</li> +</ul> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></dt> + <dd>An overview of the features of Flexbox</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">Relationship of Flexbox to other layout methods</a></dt> + <dd>How Flexbox relates to other layout methods, and other CSS specifications</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligning items in a flex container</a></dt> + <dd>How the Box Alignment properties work with Flexbox.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Ordering flex items</a></dt> + <dd>Explaining the different ways to change the order and direction of items, and covering the potential issues in doing so.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling Ratios of flex items along the main axis</a></dt> + <dd>Explaining the flex-grow, flex-shrink and flex-basis properties.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Mastering wrapping of flex items</a></dt> + <dd>How to create flex containers with multiple lines and control the display of the items in those lines.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox">Typical use cases of Flexbox</a></dt> + <dd>Common design patterns that are typical Flexbox use cases.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox">Backwards compatibility of Flexbox</a></dt> + <dd>Browser status of Flexbox, interoperability issues and supporting older browsers and versions of the spec</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Flexbox') }}</td> + <td>{{ Spec2('CSS3 Flexbox') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="See_also">See also</h2> + +<dl> + <dt><a href="https://github.com/philipwalton/flexbugs">Flexbugs</a></dt> + <dd>a community-curated list of Flexbox browser bugs and workarounds</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mixins">Cross-browser Flexbox mixins</a></dt> + <dd>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</dd> +</dl> 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..c30338c62b --- /dev/null +++ b/files/ar/web/css/css_flexible_box_layout/المفاهيم_الأساسية_للصندوق_المرن/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 +--- +<div dir="rtl">{{CSSRef}}</div> + +<p class="summary" dir="rtl">يشار لوحدة الصندوق المرن عادةً بالflexbox وقد تم تصميمها كنموذج تخطيط احادي البعد. وكطريقة يمكنها ان تعرض توزيع المسافات بين العناصر في واجهة وقدرات محاذاة (ترتيب) قوية. تقدم هذه المقالة الخطوط العريضة للميزات الرئيسية لفلكس بوكس (flexbox)، والتي سنكتشف تفاصيلها في بقية هذه الارشادات.</p> + +<p class="summary" dir="rtl">عندما نوصف الفلكس بوكس بأنه احادي البعد، نقوم بوصف الحقيقة ان الفلكس بوكس يتعامل مع المخطط في بعد واحد في ذات الوقت — إما كصف أو كعمود. وهذا يمكن أن يتناقض مع نموذج ثنائي الأبعاد الخاص بـ<a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">تخطيط شبكة CSS Grid</a> والذي يتحكم في الصفوف والاعمدة معاً.</p> + +<h2 dir="rtl" id="مِحوَريّ_الفلكس_بوكس">مِحوَريّ الفلكس بوكس</h2> + +<p dir="rtl">عندما نشتغل بفلكس بوكس نحتاج للتفكير في محورين — المحور الاساشي او الرئيسي ومحور التقاطع (المتقاطع).<br> + يتم تعريف المحور الرئيسي بإستخدام الخاصية {{cssxref("flex-direction")}}<br> + ومن هناك يتم تعامد المحور المتقاطع بناءًا على المحور الرئيسي.<br> + لذا يجدر فهم كيفية عملها منذ البداية.</p> + +<h3 dir="rtl" id="المحور_الرئيسي">المحور الرئيسي</h3> + +<p dir="rtl">يتم تعريف المحور الرئيسي عن طريق <code>flex-direction</code> ، والتي لديها اربع قيم ممكنة هي:</p> + +<ul dir="rtl"> + <li>الصف <code>row</code></li> + <li>الصف المعكوس <code>row-reverse</code></li> + <li>العامود <code>column</code></li> + <li>العامود المعكوس <code>column-reverse</code></li> +</ul> + +<p dir="rtl">هل تختار الصف او الصف المعكوس؟ سيشتغل المحور الاساسي في اتجاه مضمَن مع الصف.</p> + +<p><img alt="If flex-direction is set to row the main axis runs along the row in the inline direction." dir="rtl" src="https://mdn.mozillademos.org/files/15614/Basics1.png" style="display: block; height: 152px; margin: 0px auto; width: 522px;"></p> + +<p dir="rtl">اختر العامود او العامود المعكوس وسيعمل المحور الاساسي من رأس الصفحة الى قاعها في<strong> اتجاه السد</strong></p> + +<p><img alt="If flex-direction is set to column the main axis runs in the block direction." dir="rtl" src="https://mdn.mozillademos.org/files/15615/Basics2.png" style="display: block; height: 227px; margin: 0px auto; width: 709px;"></p> + +<h3 dir="rtl" id="محور_التقاطع">محور التقاطع</h3> + +<p dir="rtl">يتعامد محور التقاطع على المحور الرئيسي الذي تم تعريفة مسبقا باستخدام <code>flex-direction</code> كصف <code>row</code> او صف معكوس <code>row-reverse</code> فيشغل دور الاعمدة.</p> + +<p><img alt="If flex-direction is set to row then the cross axis runs in the block direction." dir="rtl" src="https://mdn.mozillademos.org/files/15616/Basics3.png" style="display: block; height: 125px; margin: 0px auto; width: 666px;"></p> + +<p dir="rtl">أما لو كان عامود <code>column</code> او عامود معكوس <code>column-reverse</code> فيشغل محور التقاطع دور الصف.</p> + +<p><img alt="If flex-direction is set to column then the cross axis runs in the inline direction." dir="rtl" src="https://mdn.mozillademos.org/files/15617/Basics4.png" style="display: block; height: 244px; margin: 0px auto; width: 523px;"></p> + +<p dir="rtl">من المهم فهم اي محور من الاخر عندما نبدأ في البحث عن الترتيب والاصطفاف لعانصر الفلكس، خصائص ميزات الفلكس بوكس التي ستقوم بإصطفافها وترتيب المحتوى على محور او الاخر.</p> + +<h2 dir="rtl" id="خطوط_البداية_والنهاية">خطوط البداية والنهاية</h2> + +<p dir="rtl">من النقاط المهمة للغاية أن نفهم كيف يقوم فلكس بوكس بعدم افتراض كيفية الكتابة في الوثيقة. ففي الماضي، كانت الCSS مثقولة الوزن نحو الكتابة الافقية و اسلوب كتابة اليسار الى اليمين. اما في المخططات الحديثة تشمل نطاق من اساليب الكتابة. فلهذا لم نعد نفرض ان بداية خط الكتابة سيكون في يسار اعلى الصفحة ويسري الى اليمين، بصفوف جديدة تظهر اسفل بعضها تلو الاخرى.</p> + +<p dir="rtl">يمكنك ان تقرأ اكثر عن العلاقة ما بين الفلكس بوكس وخصائص اساليب الكتابة في مقالة لاحقة. ومع ذلك، من المفروض ان يساعدك الوصف التالي بشرح السبب للماذا لا نتحدث عن تحديد يسار ويمين واعلى واسفل عندما نقوم بوصف اتجاه سير عناصر فلكس.</p> + +<p dir="rtl">اذا كان الصف هو اتجاه فلكس، <code>flex-direction: row</code> ونعمل باستخدام اللغة الانجليزية.<br> + اذن ستكون حافة البداية للمحور الاساسي على اليسار ويقابلها على الجهة الاخرى علي اليمين حافة النهاية.</p> + +<p><img alt="Working in English the start edge is on the left." dir="rtl" src="https://mdn.mozillademos.org/files/15618/Basics5.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p> + +<p dir="rtl">اما اذا كنا سنستخدم اللغة العربية، فستكون حافة البداية للمحور الاساسي على اليمين ويقابلها على الجهة الاخرى علي اليسار حافة النهاية.</p> + +<p><img alt="The start edge in a RTL language is on the right." dir="rtl" src="https://mdn.mozillademos.org/files/15619/Basics6.png" style="display: block; height: 152px; margin: 0px auto; width: 634px;"></p> + +<p dir="rtl">وفي كلا الحالتين ستكون حافة البداية للمحور المتقاطع في الاعلى من حاوية الفلكس وحافة النهاية في اسفلها. وذلك لان اللغتين يسيرون في سياق افقي للكتابة.</p> + +<p dir="rtl">بعد فترة، التفكير في البداية والنهاية بدلا من الايمن والايسر سيصبح طبيعيا اكثر. وسيكون مفيدا عن التعامل مع وسائل التخطيط الاخرى مثل مخطط الشبكة CSS Grid Layout الذي يتبع النمط نفسه.</p> + +<h2 dir="rtl" id="حاوية_فلكس">حاوية فلكس</h2> + +<p dir="rtl">An area of a document laid out using flexbox is called a <strong>flex container</strong>. To create a flex container, we set the value of the area's container's {{cssxref("display")}} property to <code>flex</code> or <code>inline-flex</code>. As soon as we do this the direct children of that container become <strong>flex items</strong>. 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.</p> + +<ul dir="rtl"> + <li>Items display in a row (the <code>flex-direction</code> property's default is <code>row</code>).</li> + <li>The items start from the start edge of the main axis.</li> + <li>The items do not stretch on the main dimension, but can shrink.</li> + <li>The items will stretch to fill the size of the cross axis.</li> + <li>The {{cssxref("flex-basis")}} property is set to <code>auto</code>.</li> + <li>The {{cssxref("flex-wrap")}} property is set to <code>nowrap</code>.</li> +</ul> + +<p dir="rtl">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.</p> + +<p dir="rtl">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.</p> + +<p dir="rtl">{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 480)}} </p> + +<h3 dir="rtl" id="Changing_flex-direction">Changing flex-direction</h3> + +<p dir="rtl">Adding the {{cssxref("flex-direction")}} property to the flex container allows us to change the direction in which our flex items display. Setting <code>flex-direction: row-reverse</code> will keep the items displaying along the row, however the start and end lines are switched.</p> + +<p dir="rtl">If we change <code>flex-direction</code> to <code>column</code> the main axis switches and our items now display in a column. Set <code>column-reverse</code> and the start and end lines are again switched.</p> + +<p dir="rtl">The live example below has <code>flex-direction</code> set to <code>row-reverse</code>. Try the other values — <code>row</code>, <code>column</code> and <code>column-reverse</code> — to see what happens to the content.</p> + +<p dir="rtl">{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}</p> + +<h2 dir="rtl" id="Multi-line_flex_containers_with_flex-wrap">Multi-line flex containers with flex-wrap</h2> + +<p dir="rtl">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.</p> + +<p dir="rtl">To cause wrapping behaviour add the property {{cssxref("flex-wrap")}} with a value of <code>wrap</code>. 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 <code>flex-wrap</code> is set to <code>wrap</code>, the items wrap. Set it to <code>nowrap</code>, 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 <code>nowrap</code> would cause an overflow if the items were not able to shrink, or could not shrink small enough to fit.</p> + +<p dir="rtl">{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}</p> + +<p dir="rtl">Find out more about wrapping flex items in the guide <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Mastering Wrapping of Flex Items</a>.</p> + +<h2 dir="rtl" id="The_flex-flow_shorthand">The flex-flow shorthand</h2> + +<p dir="rtl">You can combine the two properties <code>flex-direction</code> and <code>flex-wrap</code> into the {{cssxref("flex-flow")}} shorthand. The first value specified is <code>flex-direction</code> and the second value is <code>flex-wrap</code>.</p> + +<p dir="rtl">In the live example below try changing the first value to one of the allowable values for <code>flex-direction</code> - <code>row</code>, <code>row-reverse</code>, <code>column</code> or <code>column-reverse</code>, and also change the second to <code>wrap</code> and <code>nowrap</code>.</p> + +<p dir="rtl">{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}</p> + +<h2 dir="rtl" id="Properties_applied_to_flex_items">Properties applied to flex items</h2> + +<p dir="rtl">To have more control over flex items we can target them directly. We do this by way of three properties:</p> + +<ul dir="rtl"> + <li>{{cssxref("flex-grow")}}</li> + <li>{{cssxref("flex-shrink")}}</li> + <li>{{cssxref("flex-basis")}}</li> +</ul> + +<p dir="rtl">We will take a brief look at these properties in this overview, and you can gain a fuller understanding in the guide <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling Ratios of Flex Items on the Main Axis</a>.</p> + +<p dir="rtl">Before we can make sense of these properties we need to consider the concept of <strong>available space</strong>. 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.</p> + +<p dir="rtl">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.</p> + +<p><img alt="This flex container has available space after laying out the items." dir="rtl" src="https://mdn.mozillademos.org/files/15620/Basics7.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p> + +<p dir="rtl">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 <code>flex</code> properties that we apply to the items themselves, will do.</p> + +<h3 dir="rtl" id="The_flex-basis_property">The <code>flex-basis</code> property</h3> + +<p dir="rtl">The <code>flex-basis</code> 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 <code>auto</code> — 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 <code>flex-basis</code>.</p> + +<p dir="rtl">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 <code>display: flex</code> 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.</p> + +<h3 dir="rtl" id="The_flex-grow_property">The <code>flex-grow</code> property</h3> + +<p dir="rtl">With the <code>flex-grow</code> property set to a positive integer, flex items can grow along the main axis from their <code>flex-basis</code>. 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.</p> + +<p dir="rtl">If we gave all of our items in the example above a <code>flex-grow</code> 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.</p> + +<p dir="rtl">The flex-grow property can be used to distribute space in proportion. If we give our first item a <code>flex-grow</code> 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).</p> + +<h3 dir="rtl" id="The_flex-shrink_property">The <code>flex-shrink</code> property</h3> + +<p dir="rtl">Where the <code>flex-grow</code> property deals with adding space in the main axis, the <code>flex-shrink</code> property controls how it is taken away. If we do not have enough space in the container to lay out our items and <code>flex-shrink</code> is set to a positive integer the item can become smaller than the <code>flex-basis</code>. As with <code>flex-grow</code> different values can be assigned in order to cause one item to shrink faster than others — an item with a higher value set for <code>flex-shrink</code> will shrink faster than its siblings that have lower values.</p> + +<p dir="rtl">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 <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling Ratios of items along the main axis</a>.</p> + +<div class="note" dir="rtl"> +<p>Note that these values for <code>flex-grow</code> and <code>flex-shrink</code> are proportions. Typically if we had all of our items set to flex: <code>1 1 200px</code> and then wanted one item to grow at twice the rate, we would set that item to flex: <code>2 1 200px</code>. However you could use flex: <code>10 1 200px</code> and flex: <code>20 1 200px</code> if you wanted.</p> +</div> + +<h3 dir="rtl" id="Shorthand_values_for_the_flex_properties">Shorthand values for the flex properties</h3> + +<p dir="rtl">You will very rarely see the <code>flex-grow</code>, <code>flex-shrink</code>, and <code>flex-basis</code> properties used individually; instead they are combined into the {{cssxref("flex")}} shorthand. The <code>flex</code> shorthand allows you to set the three values in this order — <code>flex-grow</code>, <code>flex-shrink</code>, <code>flex-basis</code>.</p> + +<p dir="rtl">The live example below allows you to test out the different values of the flex shorthand; remember that the first value is <code>flex-grow</code>. Giving this a positive value means the item can grow. The second is <code>flex-shrink</code> — with a positive value the items can shrink, but only if their total values overflow the main axis. The final value is <code>flex-basis</code>; this is the value the items are using as their base value to grow and shrink from.</p> + +<p dir="rtl">{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 510)}}</p> + +<p dir="rtl">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:</p> + +<ul dir="rtl"> + <li><code>flex: initial</code></li> + <li><code>flex: auto</code></li> + <li><code>flex: none</code></li> + <li><code>flex: <positive-number></code></li> +</ul> + +<p dir="rtl">Setting <code>flex: initial</code> resets the item to the initial values of Flexbox. This is the same as <code>flex: 0 1 auto</code>. In this case the value of <code>flex-grow</code> is 0, so items will not grow larger than their <code>flex-basis</code> size. The value of <code>flex-shrink</code> is 1, so items can shrink if they need to rather than overflowing. The value of <code>flex-basis</code> is <code>auto</code>. Items will either use any size set on the item in the main dimension, or they will get their size from the content size.</p> + +<p dir="rtl">Using <code>flex: auto</code> is the same as using <code>flex: 1 1 auto</code>; everything is as with <code>flex:initial</code> but in this case the items can grow and fill the container as well as shrink if required.</p> + +<p dir="rtl">Using <code>flex: none</code> will create fully inflexible flex items. It is as if you wrote <code>flex: 0 0 auto</code>. The items cannot grow or shrink but will be laid out using flexbox with a <code>flex-basis</code> of <code>auto</code>.</p> + +<p dir="rtl">The shorthand you often see in tutorials is <code>flex: 1</code> or <code>flex: 2</code> and so on. This is as if you used <code>flex: 1 1 0</code>. The items can grow and shrink from a <code>flex-basis</code> of 0.</p> + +<p dir="rtl">Try these shorthand values in the live example below.</p> + +<p dir="rtl">{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 510)}}</p> + +<h2 dir="rtl" id="Alignment_justification_and_distribution_of_free_space_between_items">Alignment, justification and distribution of free space between items</h2> + +<p dir="rtl">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.</p> + +<h3 dir="rtl" id="align-items"><code>align-items</code></h3> + +<p dir="rtl">The {{cssxref("align-items")}} property will align the items on the cross axis.</p> + +<p dir="rtl">The initial value for this property is <code>stretch</code> 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.</p> + +<p dir="rtl">You could instead set <code>align-items</code> to <code>flex-start</code> in order to make the items line up at the start of the flex container, <code>flex-end</code> to align them to the end, or <code>center</code> 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:</p> + +<ul dir="rtl"> + <li><code>stretch</code></li> + <li><code>flex-start</code></li> + <li><code>flex-end</code></li> + <li><code>center</code></li> +</ul> + +<p dir="rtl">{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}</p> + +<h3 dir="rtl" id="justify-content"><code>justify-content</code></h3> + +<p dir="rtl">The {{cssxref("justify-content")}} property is used to align the items on the main axis, the direction in which <code>flex-direction</code> has set the flow. The initial value is <code>flex-start</code> which will line the items up at the start edge of the container, but you could also set the value to <code>flex-end</code> to line them up at the end, or <code>center</code> to line them up in the centre.</p> + +<p dir="rtl">You can also use the value <code>space-between</code> 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 <code>space-around</code>. With <code>space-around</code>, items have a half-size space on either end. Or, to cause items to have equal space around them use the value <code>space-evenly</code>. With <code>space-evenly</code>, items have a full-size space on either end.</p> + +<p dir="rtl">Try the following values of <code>justify-content</code> in the live example:</p> + +<ul dir="rtl"> + <li><code>flex-start</code></li> + <li><code>flex-end</code></li> + <li><code>center</code></li> + <li><code>space-around</code></li> + <li><code>space-between</code></li> + <li><code>space-evenly</code></li> +</ul> + +<p dir="rtl">{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}</p> + +<p dir="rtl">In the article <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligning Items in a Flex Container</a> 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.</p> + +<h2 dir="rtl" id="Next_steps">Next steps</h2> + +<p dir="rtl">After reading this article you should have an understanding of the basic features of Flexbox. In the next article we will look at <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">how this specification relates to other parts of CSS</a>.</p> 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 +--- +<p dir="rtl"><strong><span dir="LTR">CSS Grid Layout</span></strong> أو <strong>شبكة تخطيط الصفحة</strong> هو مخطط لترتيب الصفحة و تصنيف العناصر الرئيسية أو الاختلافات من حيث الحجم أو الموضع أو الطبقة</p> + +<p>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.</p> + +<h2 id="Basic_Example" name="Basic_Example">Basic example</h2> + +<p>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.</p> + +<div id="example"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} +.wrapper { + max-width: 940px; + margin: 0 auto; +} + +.wrapper > div { + border: 2px solid rgb(233,171,88); + border-radius: 5px; + background-color: rgba(233,171,88,.5); + padding: 1em; + color: #d9480f; +}</pre> +</div> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: 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></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: 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; +} +</pre> + +<p>{{ EmbedLiveSample('example', '500', '440') }}</p> +</div> + +<h2 id="Reference">Reference</h2> + +<h3 id="CSS_properties">CSS properties</h3> + +<div class="index"> +<ul> + <li>{{cssxref("grid-template-columns")}}</li> + <li>{{cssxref("grid-template-rows")}}</li> + <li>{{cssxref("grid-template-areas")}}</li> + <li>{{cssxref("grid-template")}}</li> + <li>{{cssxref("grid-auto-columns")}}</li> + <li>{{cssxref("grid-auto-rows")}}</li> + <li>{{cssxref("grid-auto-flow")}}</li> + <li>{{cssxref("grid")}}</li> + <li>{{cssxref("grid-row-start")}}</li> + <li>{{cssxref("grid-column-start")}}</li> + <li>{{cssxref("grid-row-end")}}</li> + <li>{{cssxref("grid-column-end")}}</li> + <li>{{cssxref("grid-row")}}</li> + <li>{{cssxref("grid-column")}}</li> + <li>{{cssxref("grid-area")}}</li> + <li>{{cssxref("grid-row-gap")}}</li> + <li>{{cssxref("grid-column-gap")}}</li> + <li>{{cssxref("grid-gap")}}</li> +</ul> +</div> + +<h3 id="CSS_functions">CSS functions</h3> + +<div class="index"> +<ul> + <li>{{cssxref("repeat", "repeat()")}}</li> + <li>{{cssxref("minmax", "minmax()")}}</li> + <li>{{cssxref("fit-content", "fit-content()")}}</li> +</ul> +</div> + +<h3 id="CSS_data_types">CSS data types</h3> + +<div class="index"> +<ul> + <li>{{cssxref("<flex>")}}</li> +</ul> +</div> + +<h3 id="Glossary_entries">Glossary entries</h3> + +<div class="index"> +<ul> + <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Lines">Grid Lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Tracks">Grid Tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Cell">Grid Cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Areas">Grid Area</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Column">Grid column</a></li> +</ul> +</div> + +<h2 id="Guides">Guides</h2> + +<div class="index"> +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basic concepts of Grid Layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship of Grid Layout to other layout methods</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Layout using line-based placement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in CSS Grid Layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in CSS Grid Layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">CSS Grid, Logical Values and Writing Modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and accessibility</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid and progressive enhancement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realising_common_layouts_using_CSS_Grid_">Realising common layouts using CSS Grid</a></li> +</ul> +</div> + +<h2 id="External_resources">External resources</h2> + +<ul> + <li><a href="http://labs.jensimmons.com/">Examples from Jen Simmons</a></li> + <li><a href="http://gridbyexample.com/">Grid by Example - a collection of usage examples and video tutorials</a></li> + <li><a href="https://tympanus.net/codrops/css_reference/grid/">Codrops Grid Reference</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox DevTools CSS Grid Inspector</a></li> + <li><a href="https://mozilladevelopers.github.io/playground/">CSS Grid Playground</a></li> + <li><a href="http://cssgridgarden.com">Grid Garden</a> - A game for learning CSS grid</li> +</ul> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Grid') }}</td> + <td>{{ Spec2('CSS3 Grid') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> + <li data-default-state="open"><a href="#"><strong>Guides</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Properties</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Glossary</strong></a> + <ol> + <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li> + <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li> + <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> + </ol> + </li> +</ol> +</section> 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 +--- +<p dir="rtl">صمم التنسيق الشبكي ليعمل جنبا إلى جنب مع جميع التنسيقات الأخرى مشكلا بذلك نظاما متكاملا لإنشاءها. في هذا الدليل سوف نشرح كيف يتوافق النظام الشبكي مع التقنيات الأخرى التي كنت قد استعملتها سابقا.</p> + +<h2 dir="rtl" id="نظام_الشبكة_ونظام_الأجزاء_المرنة">نظام الشبكة ونظام الأجزاء المرنة</h2> + +<p dir="rtl">إن الفرق الأساسي بين نظام التنسيق الشبكي و<a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">نظام نتسيق الأجزاء المرنة</a> يثمثل في كون أن نظام نتسيق الأجزاء المرنة قد صمم للتنسيق على بعد واحد -أي أفقيا أو عموديا. بينما صمم نظام التنسيق الشبكي لإنشاء تنسيقات على بعدين -إي أفقيا وعموديا في نفس الوقت. إن نصوص المواصفات المعيارية لكلا النظامين يلتقيان في العديد من المميزات، لذلك فإن كنت قد تعلمت استعمال نظام الأجزاء المرنة، فإن هذا التشابه المتواجد بينهما سيمكنك من ضبط استعمال نظام الشبكة.</p> + +<h3 dir="rtl" id="النسق_ذو_بعد_واحد_مقارنة_مع_النسق_ذو_بعدين">النسق ذو بعد واحد مقارنة مع النسق ذو بعدين</h3> + +<p dir="rtl">سنستعمل مثالا بسيطا لإظاهر الإختلاف المتواجد بين النسق ذو بعد واحد والنسق ذو بعدين.</p> + +<p dir="rtl">في هذا المثال الأول، سنستعمل نسق الأجزاء المرنة لتنسيق مجموعة من المربعات. حيث أتوفر على حاوية تضم خمسة أبناء من العناصر، وقد أعطيت خاصيات وقيم flex بيحث ستتمكن هذه العناصر من التمدد والتقلص انطلاقا من 200 بيكسل.</p> + +<p dir="rtl">وقمنا كذلك بإعطاء القيمة <code>wrap</code> للخاصية {{cssxref("flex-wrap")}}، مما ينتج عنه انتقال العناصر إلى سطر جديد في حالة إن كانت مساحة الحاوية غير كافية لضمان قيمة المرونة الأساسية.</p> + +<div dir="rtl" id="onedtwod"> +<div class="hidden"> +<pre class="brush: css" dir="rtl">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: flex; + flex-wrap: wrap; +} +.wrapper > div { + flex: 1 1 200px; +} +</pre> +</div> + +<p dir="rtl">{{ EmbedLiveSample('onedtwod', '500', '230') }}</p> + +<p dir="rtl">في هذه الصورة، يمكننا ملاحظة انتقال (قفز) عنصرين إلى سطر جديد. حيث يتقاسمان نفس المساحة المتوفرة وأنهما غير منتظمين في نفس العمود مع العناصر المتواجدة بالإعلى. و يرجع ذلك إلى كون الأسطر ( أو الأعمدة في حالة استعمال الأعمدة) الجديدة المكونة من انتقال عناصر مرنة جديدة تصبح حاويات (أوعية) مرنة كذلك. ويحدث هذا التوزيع على طول السطر.</p> + +<p dir="rtl">وسؤال المطروح هو كيف يمكننا تنظيم هاته العناصر في نفس العمود. وهنا تأتي الحاجة إلى طريقة للتنسيق العناصر على بعدين: تريد ضبط توزيع العناصر من خلال أسطر وأعمدة، وهنا يبدأ دور التنسيق الشبكي.</p> + +<h3 dir="rtl" id="نفس_التنسيق_باستعمال_نظام_الشبكات">نفس التنسيق باستعمال نظام الشبكات</h3> + +<p dir="rtl">في المثال الموالي، قمنا بانشاء نفس النسق باستعمال نظام الشبكة. حيث نتوفر حاليا على ثلاثة مسارات عمودية قياسها <code>1fr</code>. مع العلم أننا لسنا بحاجة إلى إضافة أية خاصية على مستوى العناصر نفسها، حيث ستتوزع هاته العناصر بشكل تلاقئ وسيتموضع كل عنصر داخل خلية من الشبكة التي أنشأنها. ويمكننا ملاحظة أن هاته العناصر موزعة (متراصة) في أسطر وأعمدة، بالإضافة إلى تواجد فجوة في نهاية السطر الثاني عند استعمالنا لخسمة عناصر.</p> + +<div class="Two_Dimensional_With_Grid" dir="rtl"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); +} +</pre> + +<p>{{ EmbedLiveSample('Two_Dimensional_With_Grid', '300', '170') }}</p> +</div> + +<p dir="rtl">من بين الأسئلة البسيطة التي يتوجب على كل مصمم طرحها عند محاولة الاختيار بين نظام الأجزاء المرنة و نظام الشبكة هي:</p> + +<ul dir="rtl"> + <li>هل أريد فقط التحكم في التنسيق في اتجاه واحد، إما على مستوى سطر أو عمود ( أفقيا أو عموديا فقط) - لدى استعمل نظام الأجزاء المرنة.</li> + <li>هل أريد أن أتحكم في التنسيق في الإتجاهين معا، أي على مستوى سطر وعمود ( أفقيا وعموديا معا) - لدى استعمل نظام الشبكة.</li> +</ul> + +<h3 dir="rtl" id="المحتوى_الخارجي_أو_النسق_الداخلي؟">المحتوى الخارجي أو النسق الداخلي؟</h3> + +<p dir="rtl">توجد طريقة أخرى لتحديد النظام المناسب الذي يجب عليك اختياره عند محاولتك الاختيار بين نظام الأجزاء المرنة و نظام الشبكة، بالإضافة إلى الطريقة التي تعرفنا عليها سابقا والمتمحورة حول الفرق بين العمل على بعد واحد أو بعدين.</p> + +<p dir="rtl">نظام الأجزاء المرنة Flexbox يعتمد على المحتوى الخارجي. من بين طرق الاستعمال لهذا النظام وهي عند توفرك على مجموعة من العناصر وتريد توزيعها على مساحة لحاوية بشكل متساوي. حيث أن حجم محتوى كل عنصر هو المحدد الأول للمساحة التي سيحتلها ( أي أن المساحة المحتلة متناسبة مع حجم محتوى العنصر). عند انتقال العناصر إلى سطر جديد فسنتظم نفسها بناء على مقاسها و المساحة المتوفرة في هذا السطر الجديد.</p> + +<p dir="rtl">يعتمد نظام الشبكة على التنسيق الداخلي. أي عندما نعمل بنظام الشبكة فإننا نقوم تعريف نسق مسبقا ونحدده ثم نقوم بوضع هذه العناصر داخل هذا النسق (أو الشبكة). ويمكن كذلك استعمال خاصيات التموضع الآلي التي تعمل على توزيع العناصر داخل الشبكة في خلايا محددة باتباع نظام الشبكة المحكمة. يمكن أيضا إنشاء مسارات مرنة تتكيف مع حجم المحتوى، هذه التقينة تجعل من حجم المسار يتغيير بالكامل. ( ملاحظة سيأخد المسار حجم العنصر الذي به محتوى أكبر).</p> + +<p dir="rtl">إن كنت تستعمل نظام Flex وشعرت بأنك تفقد شيئا من المرونة التي يفرها فهنالك احتمال كبير على أنك بحاجة لاستعمال نظام Grid. فعلى سبيل المثال إن قمت بتحديد قيمة مئوية لعرض أحد عناصر نظام Flex لكي يأخد نفس قياس العناصر المتواجدة في السطر الأعلى، في هذه الحالة فعليك استعمال نظام Grid. </p> + +<h3 dir="rtl" id="المحاذات_بين_الأجزاء">المحاذات بين الأجزاء</h3> + +<p dir="rtl">من بين الخاصيات الأكثر إثارة للكثير منا والتي تقدم بها نظام الأجزاء المرنة هي القدرة ولأول مرة على التحكم في توزيع العناصر والمحاذاة فيما بينها وبشكل واضح. حيث جعل من عملية وضع أي جزء في مركز أية صفحة سهلة للغاية. تتمدد العناصر المرنة لتأخد كل الحيز الموجود بالحاوية، مما يعني إمكانية الحصول على أعمدة متساوية الإرتفاع. حيت تعتبر هاته الأشياء المذكورة من الأمور التي كنا دائما نرغب في فعلها منذ وقت طويل، مما جعلنا نقوم بالبحث وخلق العديد من الحيل لإنشاء تأثير بصري على الأقل مشابه لذلك.</p> + +<p dir="rtl">لقد تمت إضافة خاصيات المحاذاة المتواجدة في نصوص المواصفات المعيارية لنظام الأجزاء المرنة إلى معيار جديد يسمى <a href="https://drafts.csswg.org/css-align/">المحاذاة بين الأجزاء المستوى 3</a>. مما يعني أنها سوف تستعمل في نصوص المواصفات المعيارية، من ضمنها نظام الشبكة. حيث من الممكن كذلك إدراجها في أنظمة التنسيق الأخرى.</p> + +<p dir="rtl">سوف نتطرق وبشكل واضح في دليل مقبل من هاته السلسلة إلى الكيفية التي تعمل بها خاصيات المحاذاة بين الأجزاء في نظام الشبكة. إليك مقارنة بسيطة بين نظام الأجزاء المرنة و نظام الشبكة.</p> + +<p dir="rtl">في المثال الأول والذي يستعمل نظام الأجزاء المرنة، نتوفر على حاوية (وعاء) بها ثلاثة عناصر. قمنا بتحديد ارتفاع هاته الحاوية المرنة من خلال إعطاء قيمة للخاصية {{cssxref("min-height")}} للفئة wrapper. ولكي نبدأ ترتيب العناصر داخل هاته الحاوية المرنة انطلاقا من النهاية قمنا بإعطاء القيمة <code>flex-end</code> للخاصية {{cssxref("align-items")}}. نريد كذلك إلغاء خاصية التمدد الإفتراضية للعنصر <code>box1</code> وجعله يتمدد ليحتل كل ارتفاع هاته الحاوية بالإضافة لذلك قمنا بإعطاء القيمة <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">stretch</span></font> للخاصية {{cssxref("align-self")}} بالإضافة قمنا بإعطاء هاته الخاصية القيمة <code>flex-start</code> بالنسية للعنصر <code>box2</code> لكي يقوم بوضع نفسه (يصطف) انطلاقا من نقطة بداية هاته الحاوية المرنة.</p> + +<div class="hidden" dir="rtl"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html" dir="rtl"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> +</div> +</pre> + +<pre class="brush: css" dir="rtl">.wrapper { + display: flex; + align-items: flex-end; + min-height: 200px; +} +.box1 { + align-self: stretch; +} +.box2 { + align-self: flex-start; +} +</pre> + +<p dir="rtl">{{ EmbedLiveSample('Box_alignment', '300', '230') }}</p> + +<h3 dir="rtl" id="المحاذاة_في_نظام_الشبكات"> المحاذاة في نظام الشبكات</h3> + +<p dir="rtl">في هذا المثال الثاني استعملنا نظام الشبكة لإنشاء نفس التنسيق. حيث سنستعمل خاصيات محاذاة الأجزاء كما ثم تطبيقها في التنسق الشبكي. نقوم بمحاذاة باستعمال <code>start</code> و <code>end</code> عوضا عن <code>flex-start</code> و<code>flex-end</code>. في حالة التنسيق الشبكي، يتم توزيع العناصر لتستقر في الحيز الشبكي الخاص بها في هاته الشبكة، والمتمثلة في خلية واحدة في هذا المثال، مع إمكانية تكونه من عدد كثير من الخلايا الشبكية.</p> + +<div class="hidden" dir="rtl"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html" dir="rtl"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> +</div> +</pre> + +<pre class="brush: css" dir="rtl">.wrapper { + display: grid; + grid-template-columns: repeat(3,1fr); + align-items: end; + grid-auto-rows: 200px; +} +.box1 { + align-self: stretch; +} +.box2 { + align-self: start; +} +</pre> + +<p dir="rtl">{{ EmbedLiveSample('Alignment_in_CSS_Grids', '200', '310') }}</p> + +<h3 dir="rtl" id="الوحدة_fr_و_flex-basis">الوحدة <code>fr</code> و <code>flex-basis</code></h3> + +<p dir="rtl">لقد قمنا بالتعرف على الكيفية التي تقوم بها الوحدة <code>fr</code> لتحديد نسبة من المساحة المتوفرللمسارات الشبكية لشبكة حاوية. عند المزج بين الوحدة <code>fr</code> و بين الدالة {{cssxref("minmax", "minmax()")}} فإننا نحصل على نتيجة ( سلوك) مشابهة لخاصيات <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">flex</span></font> التي يمنحها نظام تنسيق الأجزاء المرنة مع منحنا إمكاينة إنشاء نسق ذو بعدين.</p> + +<p dir="rtl">إن قمنا بالرجوع إلى المثل السابق الذي بينا فيه الفرق بين التنسيق ذو البعد الواحد والتنسيق ذو البعدين، فإننا سنلاحظ الفرق في كفية استجابة بالنسبة لكل منهما. فبالنسبة للتنسيق المرن، وفي حالة تحريك نافذة المتصفح لتوسيع أو تضييق حجمها، فإن نظام الأجزاء المرنة يقوم بعمل جيد في نتظيم عدد العناصر المكونة لكل سطر بناء على المساحة المتوفر. فإن كنا نتوفر على مساحة كبيرة فإن جميع العناصر الخمسة ستجد مكانها في سطر واحد، أما إن كنا نتوفر على حاوية جد صغير فمن الممكن أن نجد أن هاته المساحة تتسع لعنصر واحد فقط.</p> + +<p dir="rtl">وبالمقارنة، فإن النسخة المبنية باستعمال النظام الشبكي تتكون دائما من ثلاثة مسارات عمودية. حيث تقوم هاته المسارات بالتمدد والتقلص، وستظهر لنا ثلاث مسارات عمودية دائما، لأننا قمنا بتحديدها منذ البداية عند تعريفنا لهاته الشبكة.</p> + +<h4 dir="rtl" id="الملأ_الآلي_لمسارات_الشبكة">الملأ الآلي لمسارات الشبكة</h4> + +<p dir="rtl">يمكننا إنشاء تأثير مشابه لنظام الأجزاء المرنة، مع إمكانية المحافظة على تموضع المحتوى بإحكام في أسطر وأعمدة، وذلك باستعمال الدالة repeat و الخاصيتين <code>auto-fill</code> و <code>auto-fit</code> لإنشاء مجموع هاته المسارات.</p> + +<p dir="rtl">في المثال التالي، استعملت الخاصية <code>auto-fill</code> عوضا عن القيم الرقيمة داخل الدالة repeat و تحديد قيمة 200 بيكسل لمجموع هاته المسارات. أي أن هاته الشبكة سوف تعمل على إنشاء العدد الكافي من أعمدة المسارات لتتناسب مع حجم الحاوية.</p> + +<div class="hidden" dir="rtl"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html" dir="rtl"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> +</div> +</pre> + +<pre class="brush: css" dir="rtl">.wrapper { + display: grid; + grid-template-columns: repeat(auto-fill, 200px); +} +</pre> + +<p dir="rtl">{{ EmbedLiveSample('Auto-filling_grid_tracks', '500', '170') }}</p> + +<h3 dir="rtl" id="عدد_المسارات_المرنة">عدد المسارات المرنة</h3> + +<p dir="rtl">يختلف الوضع هنا بالنسبة لنظام الأجزاء المرنة. في المثال الخاص بنظام الأجزاء المرنة، تنتقل العناصر إلى السطر الموالي عندما تتجاوز 200 بيكسل. ويمكننا الوصول إلى نفس النتيجة بنظام الشبكة باستعمال <code>auto-fill</code> والدالة {{cssxref("minmax", "minmax()")}}. وفي المثال الموالي، قمت بإنشاء مسارات آلية الملأ باستعمال الدالة <code>minmax</code>. أريد من المسارات أن تأخذ عرضا لا يقل عن 200 بيكسل، وحددت الحد الأقصى في <code>1fr</code>. بمجرد أن يقوم المتصفح بحساب عدد المرات المرات الكافية لملأ الحاوية بمسارات ذات قياس 200 بيكسل - مع الأخد بعين الإعتبار قياس الفجوات المتواجدة بين مسارات الشبكة- فإنه يقوم بالتعامل مع المساحة القصوية <code>1fr</code> كوحدة لتوزيعها بين جميع العناصر المتبيقة.</p> + +<div class="hidden" dir="rtl"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html" dir="rtl"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> +</div> +</pre> + +<pre class="brush: css" dir="rtl">.wrapper { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); +} +</pre> + +<p dir="rtl">{{ EmbedLiveSample('A_flexible_number_of_tracks', '500', '170') }}</p> + +<p dir="rtl">لقد أصبحنا الآن قادرين على إنشاء شبكة مكونة من عدد مرن من المسارات المرنة كذلك، في ظل إمكانية أن تتوزع هذه العناصر وفي نفس الوقت على مستوى أسطر وأعمدة.</p> + +<h2 dir="rtl" id="Grid_and_absolutely_positioned_elements">Grid and absolutely positioned elements</h2> + +<p dir="rtl">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.</p> + +<h3 dir="rtl" id="A_grid_container_as_containing_block">A grid container as containing block</h3> + +<p dir="rtl">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 <code>position: absolute</code> 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.</p> + +<p dir="rtl">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 <code>position: relative</code> and so becomes the positioning context of this item.</p> + +<div class="hidden" dir="rtl"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html" dir="rtl"><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> +</pre> + +<pre class="brush: css" dir="rtl">.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; +} +</pre> + +<p dir="rtl">{{ EmbedLiveSample('A_grid_container_as_containing_block', '500', '330') }}</p> + +<p dir="rtl">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.</p> + +<p dir="rtl">If we remove <code>position:</code> <code>absolute</code> from the rules for <code>.box3</code> you can see how it would display without the positioning.</p> + +<h3 dir="rtl" id="A_grid_container_as_parent">A grid container as parent</h3> + +<p dir="rtl">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 <code>position:</code> <code>relative</code> from the wrapper above, positioning context is from the viewport, as shown in this image.</p> + +<p dir="rtl"><img alt="Image of grid container as parent" src="https://mdn.mozillademos.org/files/14661/2_abspos_example.png" style="height: 408px; width: 1702px;"></p> + +<p dir="rtl">Once again the item no longer participates in the grid layout in terms of sizing or when other items are auto-placed.</p> + +<h3 dir="rtl" id="With_a_grid_area_as_the_parent">With a grid area as the parent</h3> + +<p dir="rtl">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 <code>.box3</code> of the grid.</p> + +<p dir="rtl">I have given <code>.box3</code> position relative and then positioned the sub-item with the offset properties. In this case, the positioning context is the grid area.</p> + +<div class="hidden" dir="rtl"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html" dir="rtl"><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> +</pre> + +<pre class="brush: css" dir="rtl">.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; +} +</pre> + +<p dir="rtl">{{ EmbedLiveSample('With_a_grid_area_as_the_parent', '500', '420') }}</p> + +<h2 dir="rtl" id="Grid_and_display_contents">Grid and <code>display: contents</code></h2> + +<p dir="rtl">A final interaction with another layout specification that is worth noting is the interaction between CSS Grid Layout and <code>display: contents</code>. The <code>contents</code> value of the display property is a new value that is described in the <a href="https://drafts.csswg.org/css-display/#box-generation">Display specification</a> as follows:</p> + +<blockquote> +<p>“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.”</p> +</blockquote> + +<p dir="rtl">If you set an item to <code>display:</code> <code>contents</code> 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.</p> + +<div dir="rtl" id="Display_Contents_Before"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.box { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +.nested { + border: 2px solid #ffec99; + border-radius: 5px; + background-color: #fff9db; + padding: 1em; +} +</pre> +</div> + +<pre class="brush: html"><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> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: minmax(100px, auto); +} +.box1 { + grid-column-start: 1; + grid-column-end: 4; +} + +</pre> + +<p>{{ EmbedLiveSample('Display_Contents_Before', '400', '420') }}</p> +</div> + +<p dir="rtl">If I now add <code>display:</code> <code>contents</code> to the rules for <code>box1</code>, the box for that item vanishes and the sub-items now become grid items and lay themselves out using the auto-placement rules.</p> + +<div dir="rtl" id="Display_Contents_After"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.box { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +.nested { + border: 2px solid #ffec99; + border-radius: 5px; + background-color: #fff9db; + padding: 1em; +} +</pre> +</div> + +<pre class="brush: html"><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> +</pre> + +<pre class="brush: css">.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; +} +</pre> + +<p>{{ EmbedLiveSample('Display_Contents_After', '400', '330') }}</p> +</div> + +<p dir="rtl">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 <code>display:</code> <code>contents</code> in a similar way with flexbox to enable nested items to become flex items.</p> + +<p dir="rtl">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.</p> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li dir="rtl"><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> + <li dir="rtl"><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> + <li dir="rtl"><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> + <li data-default-state="open" dir="rtl"><a href="#"><strong>Guides</strong></a> + <ol dir="rtl"> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values, and writing modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> + </ol> + </li> + <li data-default-state="open" dir="rtl"><a href="#"><strong>Properties</strong></a> + <ol dir="rtl"> + <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open" dir="rtl"><a href="#"><strong>Glossary</strong></a> + <ol> + <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li> + <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li> + <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> + </ol> + </li> +</ol> +</section> 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 +--- +<div>{{CSSRef}}</div> + +<p dir="rtl">نمط الكتابة بالـ CSS هو ميزة تحدد طرق كتابة عالمية متعددة، مثل من اليسار الى اليمين (مثال: اللغات المعتمدة على السركبتات اللاتينية و الهندية)، من اليمين الى اليسار (مثال: اللغة العربية و العبرية)، متعددة الاتجاه ( تستخدم عند المزج بين اللغات التي تستخدم الاتجاه من اليمين الي اليسار و من اليسار الى اليمين معاً) و اللغات التي تاخد اتجاه افقي (مثل بعض اللغات الاسيوية).</p> + +<h2 id="Reference">Reference</h2> + +<h3 id="Properties">Properties</h3> + +<div class="index"> +<ul> + <li>{{cssxref("direction")}}</li> + <li>{{cssxref("glyph-orientation-horizontal")}}</li> + <li>{{cssxref("text-combine-upright")}}</li> + <li>{{cssxref("text-orientation")}}</li> + <li>{{cssxref("unicode-bidi")}}</li> + <li>{{cssxref("writing-mode")}}</li> +</ul> +</div> + +<h2 id="Guides">Guides</h2> + +<p><em>None.</em></p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Writing Modes')}}</td> + <td>{{Spec2('CSS3 Writing Modes')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'text.html')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS1')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop(1.0)}}</td> + <td>3</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> 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 +--- +<p class="summary" dir="rtl"><span class="seoSummary"><strong>صفحات الأنماط الانسيابية</strong> <strong>(CSS)</strong> هي لغة <a href="/ar/docs/DOM/stylesheet">أنماط</a> تستخدم لوصف طريقة عرض الوثيقة المكتوبة <a href="/ar/docs/HTML">بلغة ترميز النص الفائق</a></span> أو <a href="/ar/docs/XML">بلغة الترميز القابلة للإمتداد </a> (بالإضافة إلى نكهاتها). تصف هذه التقنيّة كيف يجب على العناصر أن تظهر على الشاشة، الورقة، الكلام، أو على الوسائط الأخرى.</p> + +<p dir="rtl">صفحات الأنماط الانسيابية هي أحد اللغات الأساسيّة <em>للويب المفتوح</em>،<em> </em>وهي لغة قياسيّة في جميع المتصفحات بناءً على <a href="http://w3.org/Style/CSS/#specs">معايير W3C</a>. طوِّرت هذه اللغة في عدة إصدارا، الأول الآن مهجور، الثاني (2.1) موصى به، و <a href="/ar/docs/CSS/CSS3" title="CSS3">الثالث</a>، هو الآن منقسم إلى عدة وحدات، وهذا الإصدار على طريقه لصبح قياسياً في جميع المتصفحات.</p> + +<section id="sect1"> +<ul class="card-grid"> + <li dir="rtl"><span>مقدمة عن صفحات الأنماط الانسيابية</span> + + <p dir="rtl">إن كنت جديداً على تطوير الويب، فاحرص أن تقرأ مقالة <a href="/ar/docs/Learn/Getting_started_with_the_web/CSS_basics">أساسيات اللغة</a> لتتعرف على ماهيَّة هذه اللغة وكيف يمكنك استخدامها.</p> + </li> + <li dir="rtl"><span>دورات عن صفحات الأنماط الانسيابية</span> + <p>يحتوي <a href="/ar/docs/Learn/CSS">قسم تعلم هذه اللغة</a> على ثروة من الدورات التي تأخذك من الصفر إلى الإحتراف، مغطيةً جميع الأساسيات.</p> + </li> + <li><span>مرجع صفحات الأنماط الانسيابية</span> + <p>يصف <a href="/ar/docs/Web/CSS/Reference">مرجع اللغة الشامل</a> لمطورين الويب المخضرمين كل خاصيّة ومفهوم في هذه اللغة.</p> + </li> +</ul> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" dir="rtl" id="دورات">دورات</h2> + +<p dir="rtl">يمتاز <a href="/ar/docs/Learn/CSS">قسم تعلم صفحات الأنماط الانسيابية</a> بوحدات متعددة تُدرِس هذه التقنيّة من الألف إلى الياء، ولا يتطلب معرفة مسبقة.</p> + +<dl> + <dt dir="rtl"><a href="/ar/docs/Learn/CSS/Introduction_to_CSS">مقدمة في صفحات الأنماط الانسيابية</a></dt> + <dd dir="rtl">تبدأ هذه الوحدة معك بأساسيات عمل هذه التقنيّة، متضمنةً معلومات عن المحددات (selectors) الخواص (properties)، كتابة التعليمات، تطبيق التنسيقات المجراة على صفحة لغة ترميز النص الفائق، كيفيّة تحديد الطول واللون وأمور أخرى، التتالي (cascade)، الوراثة (inheritance)، أساسيات نموذج الصندوق (box model)، والتنقيح (debugging).</dd> + <dt dir="rtl"><a href="/ar/docs/Learn/CSS/Styling_text">تنسيق النصوص</a></dt> + <dd dir="rtl">تحتوي هذه المقالة على شرح لأساسيات تنسيق النصوص. تتضمن المقالة أيضاً إعداد الخطوط الغامقة والمائلة، المسافات بين الحروف والسطور، الظلال، وغيرها من خواص النصوص. ننهي المقالة بشرح كيفيّة إضافة خطوط مخصصة لصفحتك، وتنسيق القوائم والروابط.</dd> + <dt dir="rtl"><a href="/ar/docs/Learn/CSS/Styling_boxes">صناديق التصميم</a></dt> + <dd dir="rtl">سنأخذ في هذه الوحدة نظرة على صناديق التصميم (styling boxes)، والتي تعد واحدة من الخطوات الأساسيّة نحو تنظيم صفحة الويب. في هذه المقالة سنلخص نموذج الصندوق (box model)، وبعدها سنأخذ نظرة حول التحكم بنماذج الصندوق عن طريق إعداد الحشو (margin)، الحواف (border) الهوامش (padding)، وإعداد لون خلفية مخصصة، والصور وغيرها من الميزات. كما تشرح المقالة ميزات زخرفيّة، مثل استخدام الظلال (shadows) والمرشحات (filters) على الصناديق.</dd> + <dt dir="rtl"><a href="/ar/docs/Learn/CSS/CSS_layout">النماذج</a></dt> + <dd dir="rtl">في هذه المرحلة سنكون قد أخذنا نظرة حول أساسيات صفحات الأنماط الانسيابية، بدءً من كيفيّة تنسيق النصوص، إلى تنسيق والتلاعب بالصناديق التي يوجد بها محتواك. الآن حان الوقت لأخذ نظرة حول كيفيّة وضع صناديقك في المكان المناسب. قد غطينا في هذه المقالة المتطلبات الضروريّة اللازمة حتّى تتمكن من الغوص في عالم النمذجة (layout)، وتتمكن من تعلم إعدادات العرض المختلفة، وطرق النمذجة التقليديّة والتي تنطوي على التعويم (float)، التعيين (positioning)، وأدوات التخطيط الجديدة مثل الصندوق المرن (flexbox).</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Tools" dir="rtl" id="مراجع">مراجع</h2> + +<ul dir="rtl"> + <li><a href="/ar/docs/Web/CSS/Reference">مرجع صفحات الأنماط الانسيابية</a>: مرجع شامل لمطورين الويب المخضرمين. يشرح هذا المرجع كل خاصيّة ومفهوم تحتويه هذه اللغة.</li> + <li>المفاهيم الأساسية في اللغة: + <ul dir="rtl"> + <li><a href="/ar/docs/CSS/Syntax">البنيّة والصيغ الكتابيّة للغة</a>.</li> + <li><a href="/ar/docs/CSS/Specificity">اﻷولويّة</a> (Specificity) و<a href="/ar/docs/CSS/inheritance">الوراثة</a>.</li> + <li><a href="/ar/docs/CSS/box_model">نموذج الصندوق</a> و<a href="/ar/docs/CSS/margin_collapsing">تداخل الهوامش</a> (margin collapse).</li> + <li><a href="/ar/docs/Web/CSS/All_About_The_Containing_Block">الكتلة الحاويّة</a> (Containing Block).</li> + <li><a href="/ar/docs/CSS/Understanding_z-index/The_stacking_context">التكديس</a> (Stacking) و<a href="/ar/docs/CSS/block_formatting_context">تنسيق كتلة السياقات</a> (block-formatting context).</li> + <li>القيم <a href="/ar/docs/CSS/initial_value">المبدئية</a> (intial)، <a href="/ar/docs/CSS/computed_value">المحسوبة</a> (computed)، <a href="/ar/docs/CSS/used_value">المُستخدمة</a> (used)، <a href="/ar/docs/CSS/actual_value">الفعليّة</a> (actual).</li> + <li><a href="/ar/docs/CSS/Shorthand_properties">الخصائص المُختزلة</a> (shorthand properties).</li> + <li><a href="/ar/docs/Web/CSS/CSS_Flexible_Box_Layout">خاصيّة الصندوق المرن</a> (flexbox).</li> + <li><a href="/ar/docs/Web/CSS/CSS_Grid_Layout">شبكة التخطيط</a> (grid layout).</li> + </ul> + </li> +</ul> + +<h2 class="Tools" dir="rtl" id="أدوات_تطوير">أدوات تطوير</h2> + +<ul dir="rtl"> + <li>يمكنك استخدام <a href="https://jigsaw.w3.org/css-validator/">خدمة التحقق من W3C</a> للتحقق مما إذا كانت شيفرتك سليمة (قياسيّة وخالية من الأخطاء). تعد هذه الأداة مهمة في عمليّة التنقيح.</li> + <li>تتيح لك مجموعة <a href="/ar/docs/Tools">أداة موزيلا للمطورين</a> بالعرض والتعديل الحي لشيفرة صفحات الأنماط الانسيابية باستخدام <a href="/ar/docs/Tools/Page_Inspector">الفاحص</a> (Inspector) و<a href="/ar/docs/Tools/Style_Editor">محرر الأنماط/التصميم</a> (Style Editor).</li> + <li>تتيح لك <a href="https://addons.mozilla.org/en-US/firefox/addon/60">إضافات مطورين الويب</a> القيام بالتتبع والتعديل الحي لشيفرتك.</li> + <li>قام مجتمع الويب بصنع <a href="/ar/docs/Web/CSS/Tools">أدوات متنوعة</a> أخرى لتتمكن من استخدامها.</li> +</ul> + +<h2 dir="rtl" id="علل">علل</h2> + +<ul> + <li>: {{bug(1323667)}}</li> +</ul> +</div> +</div> +</section> + +<h2 dir="rtl" id="انظر_أيضاً">انظر أيضاً</h2> + +<ul dir="rtl"> + <li><a href="/ar/docs/Web/Demos_of_open_web_technologies#CSS">أمثلة عن اللغة</a>: احصل على دفعة إبداعيّة من خلال استكشاف أمثلة لآخر تقنيات اللغة.</li> + <li>اللغات التي غالباً ما تستخدم مع هذه التقنيّة: <a href="/ar/docs/HTML">لغة ترميز النص الفائق</a>، <a href="/ar/docs/SVG">لغة الرسوميات المتجهيّة المتغيرة</a>، <a href="/ar/docs/XHTML">لغة ترميز النص الفائق القابلة للامتداد</a>، <a href="/ar/docs/XML">لغة الترميز القابلة للامتداد</a>.</li> + <li>تقنيات موزيلا التي تجعل استخدام اللغة واسع النطاق: <a href="/ar/docs/Mozilla/Tech/XUL">لغة واجهة المستخدم للغة الترميز القابلة للإمتداد</a> (XUL)، <a href="/ar/Firefox">فايرفوكس</a>، <a href="/ar/docs/Mozilla/Thunderbird">ثندربرد</a>، <a href="/ar/Add-ons">الإضافات</a>، و<a href="/ar/Add-ons/Themes">السمات</a>.</li> +</ul> 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 +--- +<div dir="rtl">{{CSSRef}}</div> + +<p dir="rtl"><strong><code>order</code></strong> عبارة عن خاصية <a href="/en-US/docs/Web/CSS">CSS</a> تضع الترتيب كقالب مرن او شبكة. العناصر في القالب تخزن بشكل تصاعدي القيمة و من ثم حسب ترتيب الكود المصدري.</p> + +<div>{{EmbedInteractiveExample("pages/css/order.html")}}</div> + + + +<h2 dir="rtl" id="النحو">النحو</h2> + +<pre class="brush:css no-line-numbers">/* <integer> values */ +order: 5; +order: -5; + +/* Global values */ +order: inherit; +order: initial; +order: unset;</pre> + +<div class="note"> +<p><strong>Note</strong>: <code>order</code> is only meant to affect the <em>visual order</em> of elements and not their logical or tab order. <code>order</code> must not be used on non-visual media such as <a href="/en-US/docs/Web/CSS/@media#speech">speech</a>.</p> +</div> + +<h3 dir="rtl" id="القيم">القيم</h3> + +<dl> + <dt dir="rtl">{{cssxref("<integer>")}}</dt> + <dd dir="rtl">تمثل المجموعة المرتبة ليستخدمه العنصر</dd> +</dl> + +<h3 dir="rtl" id="الصيغة_النحوية">الصيغة النحوية</h3> + +<pre class="syntaxbox" dir="rtl">{{csssyntax}}</pre> + +<h2 dir="rtl" id="مثال">مثال</h2> + +<p dir="rtl">هنا مثال اساسي ل html chunk:</p> + +<pre class="brush:html;" dir="rtl"><header>...</header> +<main> + <article>Article</article> + <nav>Nav</nav> + <aside>Aside</aside> +</main> +<footer>...</footer> +</pre> + +<p dir="rtl">كود الcss التالي ينشأ زوجي sidebar كلاسيكي الشكل محيط بمحتوى الblock.نموذج تصميم الصندوق المرن يشكل blocks متساوي الحجم بشكل عمودي و يستخدم مساحة افقية حسب الامكانية.</p> + +<pre class="brush:css;">main { display: flex; text-align:center; } +main > article { flex:1; order: 2; } +main > nav { width: 200px; order: 1; } +main > aside { width: 200px; order: 3; }</pre> + +<h3 dir="rtl" id="النتيجة">النتيجة</h3> + +<p>{{ EmbedLiveSample('Example') }}</p> + +<h2 dir="rtl" id="هواجز_الوصول">هواجز الوصول</h2> + +<p dir="rtl">استخدام خاصية ال<code>order</code> سينشأ فصل اتصال بين العرض المرئي للمحتوى و ترتيب ال DOM. هذا سيؤثر عكسيا على تجربة المستخدمين ذي الرؤية المنخفضة للتصفح مع مساعدة التقنيات المساعدة مثل قارئ الشاشة. اذا كان ترتيب ال(CSS) المرئي مهم, اذاً لن يكون لمستخدمي قارئ الشاشة وصصول لقراءة الترتيب الصحيح.</p> + +<ul> + <li><a href="https://tink.uk/flexbox-the-keyboard-navigation-disconnect/">Flexbox & the keyboard navigation disconnect — Tink</a></li> + <li><a href="http://adrianroselli.com/2015/09/source-order-matters.html">Source Order Matters | Adrian Roselli</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">MDN Understanding WCAG, Guideline 1.3 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html">Understanding Success Criterion 1.3.2 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 dir="rtl" id="مواصفات">مواصفات</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">المواصفة</th> + <th scope="col">الحالة</th> + <th scope="col">التعليق</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Flexbox', '#order-property', 'order')}}</td> + <td>{{Spec2('CSS3 Flexbox')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 dir="rtl" id="ملائمة_المتصفح">ملائمة المتصفح</h2> + + + +<p>{{Compat("css.properties.order")}}</p> + +<h2 dir="rtl" id="انظر_ايضا">انظر ايضا</h2> + +<ul> + <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li> + <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Ordering flex items</a></em></li> + <li>CSS Grid Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and accessibility</a></em></li> +</ul> 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 +--- +<div><font><font>{{CSSRef}}</font></font></div> + +<p><font><font>و </font><a href="/en-US/docs/Web/CSS"><font>CSS</font></a><font> مجموعات الممتلكات تحت أي ظرف من الظروف (إن وجدت) لعنصر رسومي معين يمكن أن تصبح </font><a href="/en-US/docs/Web/API/Event/target"><font>الهدف</font></a><font> من الأحداث المؤشر.</font></font><strong> <code>pointer-events</code></strong></p> + +<div>{{EmbedInteractiveExample("pages/css/pointer-events.html")}}</div> + + +<p class="hidden"><font><font>يتم تخزين مصدر هذا المثال التفاعلي في مستودع GitHub. </font><font>إذا كنت ترغب في المساهمة في مشروع الأمثلة التفاعلية ، فيرجى استنساخ </font></font><a href="https://github.com/mdn/interactive-examples"><font><font>https://github.com/mdn/interactive-exexs</font></font></a><font><font> وإرسال طلب سحب إلينا.</font></font></p> + +<p><font><font>عندما تكون هذه الخاصية غير محددة ، </font></font><code>visiblePainted</code><font><font>تنطبق </font><font>نفس خصائص </font><font>القيمة على محتوى SVG.</font></font></p> + +<p><font><font>بالإضافة إلى الإشارة إلى أن العنصر ليس هدفًا لأحداث المؤشر ، </font></font><code>none</code><font><font>ترشد </font><font>القيمة </font><font>حدث المؤشر إلى "استعراض" العنصر والهدف مهما كان "أسفل" هذا العنصر بدلاً من ذلك.</font></font></p> + +<h2 id="بناء_الجملة"><font><font>بناء الجملة</font></font></h2> + +<pre class="brush: css no-line-numbers"><font><font>/ * قيم الكلمات الرئيسية * /</font></font><font><font> +أحداث مؤشر: السيارات.</font></font><font><font> +أحداث المؤشر: لا شيء ؛</font></font><font><font> +أحداث المؤشر: visualPainted؛ </font><font>/ * SVG فقط * /</font></font><font><font> +أحداث المؤشر: visualFill؛ </font><font>/ * SVG فقط * /</font></font><font><font> +أحداث المؤشر: visualStroke؛ </font><font>/ * SVG فقط * /</font></font><font><font> +أحداث مؤشر: مرئية. </font><font>/ * SVG فقط * /</font></font><font><font> +أحداث المؤشر: رسمت. </font><font>/ * SVG فقط * /</font></font><font><font> +أحداث المؤشر: ملء ؛ </font><font>/ * SVG فقط * /</font></font><font><font> +أحداث مؤشر: السكتة الدماغية. </font><font>/ * SVG فقط * /</font></font><font><font> +أحداث المؤشر: جميع ؛ </font><font>/ * SVG فقط * /</font></font> +<font><font> +/ * القيم العالمية * /</font></font><font><font> +أحداث المؤشر: ترث.</font></font><font><font> +أحداث المؤشر: الأولي ؛</font></font><font><font> +أحداث المؤشر: unset؛</font></font> +</pre> + +<p><font><font>و </font></font><code>pointer-events</code><font><font>يتم تحديد الممتلكات، كلمة رئيسية واحدة اختياره من قائمة القيم أدناه.</font></font></p> + +<h3 id="القيم"><font><font>القيم</font></font></h3> + +<dl> + <dt><code>auto</code></dt> + <dd><font><font>يتصرف العنصر كما لو </font></font><code>pointer-events</code><font><font>لم يتم تحديد الخاصية. </font><font>في محتوى SVG ، يكون لهذه القيمة والقيمة </font></font><code>visiblePainted</code><font><font>نفس التأثير.</font></font></dd> + <dt><code>none</code></dt> + <dd><font><font>العنصر ليس </font></font><a href="/en-US/docs/Web/API/Event/target"><font><font>هدفًا</font></font></a><font><font> لأحداث المؤشر ؛ </font><font>ومع ذلك ، قد تستهدف أحداث المؤشر عناصره التنازلي إذا كانت تلك النزول قد عيّنت </font></font><code>pointer-events</code><font><font>بعض القيمة الأخرى. </font><font>في هذه الظروف ، ستؤدي أحداث المؤشر إلى تشغيل مستمعي الأحداث على هذا العنصر الرئيسي كما هو مناسب في طريقهم إلى / من السليل أثناء </font><font>مراحل </font><font>التقاط / </font></font><a href="/en-US/docs/Web/API/Event/bubbles"><font><font>فقاعة</font></font></a><font><font> الحدث </font><font>.</font></font></dd> +</dl> + +<h4 id="SVG_فقط"><font><font>SVG فقط</font></font></h4> + +<dl> + <dt><code>visiblePainted</code></dt> + <dd><font><font>SVG فقط. </font><font>يمكن أن يكون العنصر هو هدف حدث المؤشر فقط عند </font></font><code>visibility</code><font><font>تعيين الخاصية على </font></font><code>visible</code><font><font>سبيل المثال عندما يكون مؤشر الماوس فوق الجزء الداخلي (أي ، "تعبئة") للعنصر وتعيين </font></font><code>fill</code><font><font>الخاصية على قيمة أخرى بخلاف </font></font><code>none</code><font><font>، أو عندما مؤشر الماوس فوق المحيط (أي ، "حد") للعنصر </font></font><code>stroke</code><font><font>ويتم ضبط الخاصية على قيمة أخرى غير </font></font><code>none</code><font><font>.</font></font></dd> + <dt><code>visibleFill</code></dt> + <dd><font><font>SVG فقط. </font><font>يمكن أن يكون العنصر هو هدف حدث المؤشر فقط عندما </font></font><code>visibility</code><font><font>يتم تعيين الخاصية إلى </font></font><code>visible</code><font><font>وعندما على سبيل المثال ، يكون مؤشر الماوس فوق الجزء الداخلي (أي ، تعبئة) العنصر. </font></font><code>fill</code><font><font>لا تؤثر </font><font>قيمة </font><font>الخاصية على معالجة الحدث.</font></font></dd> + <dt><code>visibleStroke</code></dt> + <dd><font><font>SVG فقط. </font><font>يمكن أن يكون العنصر هو هدف حدث المؤشر فقط عند </font></font><code>visibility</code><font><font>تعيين الخاصية على </font></font><code>visible</code><font><font>سبيل المثال عندما يكون مؤشر الماوس فوق محيط العنصر (أي الحد). </font></font><code>stroke</code><font><font>لا تؤثر </font><font>قيمة </font><font>الخاصية على معالجة الحدث.</font></font></dd> + <dt><code>visible</code></dt> + <dd><font><font>SVG فقط. </font><font>يمكن أن يكون العنصر هو هدف حدث المؤشر عند </font></font><code>visibility</code><font><font>تعيين الخاصية على </font></font><code>visible</code><font><font>سبيل المثال ، يكون مؤشر الماوس على الجانب الداخلي (أي ، الحشو) أو المحيط (أي الحد) للعنصر. </font><font>قيم </font></font><code>fill</code><font><font>و </font></font><code>stroke</code><font><font>لا تؤثر على معالجة الحدث.</font></font></dd> + <dt><code>painted</code></dt> + <dd><font><font>SVG فقط. </font><font>يمكن أن يكون العنصر هو الهدف لحدث المؤشر فقط عندما يكون مؤشر الماوس فوق المنطقة الداخلية (على سبيل المثال ، "تعبئة") </font></font><code>fill</code><font><font>ويتم ضبط الخاصية على قيمة أخرى بخلاف </font></font><code>none</code><font><font>أو عندما يكون مؤشر الماوس فوق المحيط (أي ، "حد") للعنصر </font></font><code>stroke</code><font><font>والممتلكات يتم تعيينها على قيمة غير </font></font><code>none</code><font><font>. </font></font><code>visibility</code><font><font>لا تؤثر </font><font>قيمة </font><font>الخاصية على معالجة الحدث.</font></font></dd> + <dt><code>fill</code></dt> + <dd><font><font>SVG فقط. </font><font>يمكن أن يكون العنصر هو هدف حدث المؤشر فقط عندما يكون المؤشر فوق الجزء الداخلي (أي ، تعبئة) العنصر. </font><font>قيم </font></font><code>fill</code><font><font>و </font></font><code>visibility</code><font><font>خصائص لا تؤثر معالجة الحدث.</font></font></dd> + <dt><code>stroke</code></dt> + <dd><font><font>SVG فقط. </font><font>يمكن أن يكون العنصر هو هدف حدث المؤشر فقط عندما يكون المؤشر فوق محيط العنصر (أي الحد). </font><font>قيم </font></font><code>stroke</code><font><font>و </font></font><code>visibility</code><font><font>خصائص لا تؤثر معالجة الحدث.</font></font></dd> + <dt><code>all</code></dt> + <dd><font><font>SVG فقط. </font><font>يمكن أن يكون العنصر هو هدف حدث المؤشر فقط عندما يكون المؤشر فوق الجزء الداخلي (أي ، التعبئة) أو المحيط (أي الحد) للعنصر. </font><font>قيم </font></font><code>fill</code><font><font>، </font></font><code>stroke</code><font><font>و </font></font><code>visibility</code><font><font>خصائص لا تؤثر معالجة الحدث.</font></font></dd> +</dl> + +<h3 id="بناء_الجملة_الرسمي"><font><font>بناء الجملة الرسمي</font></font></h3> + +<pre class="syntaxbox"><font><font>{{csssyntax}}</font></font></pre> + +<h2 id="أمثلة"><font><font>أمثلة</font></font></h2> + +<h3 id="مثال_أساسي"><font><font>مثال أساسي</font></font></h3> + +<p><font><font>يعطل هذا المثال أحداث المؤشر (النقر والسحب والتحويم وما إلى ذلك) على جميع الصور.</font></font></p> + +<pre class="brush:css"><font><font>img</font></font><font><font> + أحداث المؤشر: لا شيء ؛</font></font><font><font> +}</font></font></pre> + +<h3 id="تعطيل_الروابط"><font><font>تعطيل الروابط</font></font></h3> + +<p><font><font>يعطل هذا المثال أحداث المؤشر على الرابط إلى http://example.com.</font></font></p> + +<pre class="brush:html"><font><font><UL></font></font><font><font> + <li> <a href="https://developer.mozilla.org"> MDN </a> </li></font></font><font><font> + <li> <a href="http://example.com"> example.com </a> </li></font></font><font><font> +</ UL></font></font></pre> + +<pre class="brush:css"><font><font>a [href = "http://example.com"] {</font></font><font><font> + أحداث المؤشر: لا شيء ؛</font></font><font><font> +}</font></font></pre> + +<div>{{EmbedLiveSample("Disabling_links", "500", "100")}}</div> + +<h2 id="ملاحظات"><font><font>ملاحظات</font></font></h2> + +<p><font><font>لاحظ أن منع عنصر من كونها هدفا للأحداث المؤشر باستخدام </font></font><code>pointer-events</code><font><font>لا </font></font><em><font><font>لا</font></font></em><font><font> يعني بالضرورة أن المستمعين الحدث المؤشر على هذا العنصر </font></font><em><font><font>لا يمكن</font></font></em><font><font> أو </font></font><em><font><font>لا</font></font></em><font><font> يمكن تشغيلها. </font><font>إذا كان أحد أطفال العنصر قد </font></font><code>pointer-events</code><font><font>حدد صراحة </font></font><em><font><font>للسماح</font></font></em><font><font> لهذا الطفل بأن يكون هدفًا لأحداث المؤشر ، فإن أي أحداث تستهدف هذا الطفل تمر عبر الوالد أثناء انتقال الحدث على طول سلسلة الوالدين ، وتحفيز مستمعي الحدث على الوالد كما هو مناسب. . </font><font>بالطبع لن يتم القبض على أي نشاط مؤشر في نقطة على الشاشة يغطيه الوالد ولكن ليس من قِبل الطفل من قِبل الطفل أو الوالد (سوف يمر "الوالد" ويستهدف كل ما هو تحتها).</font></font></p> + +<p><code>pointer-events: none</code><font><font>ستظل </font><font>العناصر التي تحتوي </font><font>على التركيز من خلال التنقل المتسلسل للوحة المفاتيح باستخدام </font></font><kbd>Tab</kbd><font><font>المفتاح.</font></font></p> + +<p><font><font>نود أن نوفر تحكمًا محببًا دقيقًا (أكثر من مجرد </font></font><code>auto</code><font><font>و </font></font><code>none</code><font><font>) في HTML لأي أجزاء من العنصر ستؤدي إلى "التقاط" أحداث المؤشر ومتى. </font><font>لمساعدتنا في تحديد الكيفية التي </font></font><code>pointer-events</code><font><font>ينبغي بها تمديد HTML ، إذا كان لديك أي أشياء معينة ترغب في القيام بها مع هذه الخاصية ، يرجى إضافتها إلى قسم حالات الاستخدام في </font></font><a class="link-https" href="https://wiki.mozilla.org/SVG:pointer-events"><font><font>صفحة الويكي هذه</font></font></a><font><font> (لا تقلق حول ابقائها مرتبة).</font></font></p> + +<h2 id="مواصفات"><font><font>مواصفات</font></font></h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col"><font><font>تخصيص</font></font></th> + <th scope="col"><font><font>الحالة</font></font></th> + <th scope="col"><font><font>تعليق</font></font></th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('SVG2', 'interact.html#PointerEventsProperty', 'pointer-events')}}</td> + <td><font><font>{{Spec2 ( 'SVG2')}}</font></font></td> + <td></td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'interact.html#PointerEventsProperty', 'pointer-events')}}</td> + <td><font><font>{{Spec2 ( 'SVG1.1')}}</font></font></td> + <td><font><font>التعريف الأولي</font></font></td> + </tr> + </tbody> +</table> + +<p><font><font>{{cssinfo}}</font></font></p> + +<p><font><font>امتداده إلى عناصر HTML ، على الرغم من وجوده في المسودات المبكرة من CSS Basic User Interface Module المستوى 3 ، فقد تم دفعه إلى </font></font><a class="external" href="http://wiki.csswg.org/spec/css4-ui#pointer-events"><font><font>المستوى 4</font></font></a><font><font> .</font></font></p> + +<h2 id="Browser_compatibility" name="Browser_compatibility"><font><font>التوافق المتصفح</font></font></h2> + +<div class="hidden"><font><font>يتم إنشاء جدول التوافق في هذه الصفحة من البيانات المنظمة. </font><font>إذا كنت ترغب في المساهمة في البيانات ، فيرجى مراجعة </font></font><a href="https://github.com/mdn/browser-compat-data"><font><font>https://github.com/mdn/browser-compat-data</font></font></a><font><font> وإرسال طلب سحب إلينا.</font></font></div> + +<p>{{Compat("css.properties.pointer-events")}}</p> + +<h2 id="أنظر_أيضا"><font><font>أنظر أيضا</font></font></h2> + +<ul> + <li><font><font>سمة SVG {{SVGAttr ("pointer-events")}}</font></font></li> + <li><font><font>سمة SVG {{SVGAttr ("visibility")}}</font></font></li> + <li><font><font>توسيع </font><a class="external" href="http://webkit.org/specs/PointerEventsProperty.html"><font>WebKit Specs PointerEventsProperty</font></a><font> للاستخدام في محتوى HTML (X)</font></font></li> +</ul> 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 +--- +<div>{{CSSRef}}</div> + +<p>Use this <strong>CSS reference</strong> to browse an <a href="#Keyword_index">alphabetical index</a> of all the standard <a href="/en-US/docs/Web/CSS">CSS</a> properties, <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classes</a>, <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elements</a>, <a href="/en-US/docs/Web/CSS/CSS_Types">data types</a>, and <a href="/en-US/docs/Web/CSS/At-rule">at-rules</a>. You can also browse a list of all the CSS <a href="#Selectors">selectors organized by type</a> and a list of <a href="#Concepts">key CSS concepts</a>. Also included is a brief <a href="#DOM-CSS_CSSOM">DOM-CSS / CSSOM reference</a>.</p> + +<h2 id="Basic_rule_syntax">Basic rule syntax</h2> + +<h3 id="Style_rule_syntax">Style rule syntax</h3> + +<pre class="syntaxbox"><var>style-rule</var> <strong>::=</strong> + <var>selectors-list</var> <strong>{</strong> + <var>properties-list</var> + <strong>}</strong> +</pre> + +<p>... where :</p> + +<pre class="syntaxbox"><var>selectors-list</var> <strong>::=</strong> + <var>selector[</var><strong>:</strong><var>pseudo-class] [</var><strong>::</strong><var>pseudo-element] + [</var><strong>,</strong><var> selectors-list]</var> + +<var>properties-list</var> <strong>::=</strong> + <var>[property</var> <strong>:</strong> <var>value] [</var><strong>;</strong> <var>properties-list]</var> +</pre> + +<p>See <a href="#Selectors"><em>selector</em></a>, <a href="#Pseudo-classes"><em>pseudo-class</em></a>, <em><a href="#Pseudo-elements">pseudo-element</a></em> lists below. The syntax for each specified <em>value</em> depends on the data type defined for each specified <em>property</em>.</p> + +<h4 id="Style_rule_examples">Style rule examples</h4> + +<pre class="brush: css">strong { + color: red; +} + +div.menu-bar li:hover > ul { + display: block; +} +</pre> + +<p>For a beginner-level introduction to the syntax of CSS selectors, please see <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors">this tutorial</a>. Be aware that any <a href="/en-US/docs/Web/CSS/syntax">CSS syntax</a> error in a rule definition invalidates the entire rule. Invalid rules are ignored by the browser. Note that CSS rule definitions are entirely (ASCII) <a href="https://www.w3.org/TR/css-syntax-3/#intro">text-based</a>, whereas DOM-CSS / CSSOM (the rule management system) is <a href="https://www.w3.org/TR/cssom/#introduction">object-based</a>.</p> + +<h3 id="At-rule_syntax">At-rule syntax</h3> + +<p>As the structure of at-rules varies widely, please see <a href="/en-US/docs/Web/CSS/At-rule">At-rule</a> to find the syntax of the specific one you want.</p> + +<h2 id="Keyword_index">Keyword index</h2> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> The property names in this index do <strong>not</strong> include the <a href="/en-US/docs/Web/CSS/CSS_Properties_Reference">JavaScript names</a> where they differ from the CSS standard names.</p> +</div> + +<div>{{CSS_Ref}}</div> + +<h2 id="Selectors">Selectors</h2> + +<p>The following are the various <a href="/en-US/docs/Web/CSS/CSS_Selectors">selectors</a>, which allow styles to be conditional based on various features of elements within the DOM.</p> + +<h3 id="Simple_selectors">Simple selectors</h3> + +<p><strong>Simple selectors</strong> are fundamental selectors; these are the most basic selectors that are frequently combined to create other, more complex selectors.</p> + +<ul> + <li><a href="/en-US/docs/Web/CSS/Type_selectors">Type selector</a> <code>elementname</code></li> + <li><a href="/en-US/docs/Web/CSS/Class_selectors">Class selector</a> <code>.classname</code></li> + <li><a href="/en-US/docs/Web/CSS/ID_selectors">ID selector</a> <code>#idname</code></li> + <li><a href="/en-US/docs/Web/CSS/Universal_selectors">Universal selector</a> <code>*</code>, <code>ns|*</code>, <code>*|*</code>, <code>|*</code></li> + <li><a href="/en-US/docs/Web/CSS/Attribute_selectors">Attribute selectors</a> <code>[attr=value]</code></li> +</ul> + +<h3 id="Combinators">Combinators</h3> + +<p>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."</p> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/Adjacent_sibling_combinator">Adjacent sibling combinator</a> <code>A + B</code></dt> + <dd>Specifies that the elements selected by both <code>A</code> and <code>B</code> have the same parent and that the element selected by <code>B</code> immediately follows the element selected by <code>A</code> horizontally.</dd> + <dt><a href="/en-US/docs/Web/CSS/General_sibling_combinator">General sibling combinator</a> <code>A ~ B</code></dt> + <dd>Specifies that the elements selected by both <code>A</code> and <code>B</code> share the same parent and that the element selected by <code>A</code> comes before—but not necessarilyl immediately before—the element selected by <code>B</code>.</dd> + <dt><a href="/en-US/docs/Web/CSS/Child_combinator">Child combinator</a> <code>A > B</code></dt> + <dd>Specifies that the element selected by <code>B</code> is the direct child of the element selected by <code>A</code>.</dd> + <dt><a href="/en-US/docs/Web/CSS/Descendant_combinator">Descendant combinator</a> <code>A B</code></dt> + <dd>Specifies that the element selected by <code>B</code> is a descendant of the element selected by A, but is not necessarily a direct child.</dd> + <dt><a href="/en-US/docs/Web/CSS/Column_combinator">Column combinator</a> <code>A || B</code> {{Experimental_Inline}}</dt> + <dd>Specifies that the element selected by <code>B</code> is located within the table column specified by <code>A</code>. Elements which span multiple columns are considered to be a member of all of those columns.</dd> +</dl> + +<h3 id="Pseudo-classes"><a href="/en-US/docs/Web/CSS/Pseudo-classes">Pseudo-classes</a></h3> + +<div class="index"> +<ul> + <li class="hidden">{{Page("/en-US/docs/Web/CSS/Pseudo-classes", "index")}}</li> +</ul> +</div> + +<h3 id="Pseudo-elements"><a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudo-elements</a></h3> + +<div class="index"> +<ul> + <li class="hidden">{{Page("/en-US/docs/Web/CSS/Pseudo-elements", "index")}}</li> +</ul> +</div> + +<div class="blockIndicator note"> +<p><strong>See also:</strong> A complete <a href="https://www.w3.org/TR/selectors/#selectors">list of selectors</a> in the Selectors Level 3 specification.</p> +</div> + +<h2 id="Concepts">Concepts</h2> + +<h3 id="Syntax_and_semantics">Syntax and semantics</h3> + +<ul> + <li><a href="/en-US/docs/Web/CSS/Syntax">CSS syntax</a></li> + <li><a href="/en-US/docs/Web/CSS/At-rule">At-rules</a></li> + <li><a href="/en-US/docs/Web/CSS/Cascade">Cascade</a></li> + <li><a href="/en-US/docs/Web/CSS/Comments">Comments</a></li> + <li><a href="/en-US/docs/Glossary/Descriptor_(CSS)">Descriptor</a></li> + <li><a href="/en-US/docs/Web/CSS/inheritance">Inheritance</a></li> + <li><a href="/en-US/docs/Web/CSS/Shorthand_properties">Shorthand properties</a></li> + <li><a href="/en-US/docs/Web/CSS/Specificity">Specificity</a></li> + <li><a href="/en-US/docs/Web/CSS/Value_definition_syntax">Value definition syntax</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Values_and_Units">CSS unit and value types</a></li> +</ul> + +<h3 id="Values">Values</h3> + +<ul> + <li><a href="/en-US/docs/Web/CSS/actual_value">Actual value</a></li> + <li><a href="/en-US/docs/Web/CSS/computed_value">Computed value</a></li> + <li><a href="/en-US/docs/Web/CSS/initial_value">Initial value</a></li> + <li><a href="/en-US/docs/Web/CSS/resolved_value">Resolved value</a></li> + <li><a href="/en-US/docs/Web/CSS/specified_value">Specified value</a></li> + <li><a href="/en-US/docs/Web/CSS/used_value">Used value</a></li> +</ul> + +<h3 id="Layout">Layout</h3> + +<ul> + <li><a href="/en-US/docs/Web/Guide/CSS/Block_formatting_context">Block formatting context</a></li> + <li><a href="/en-US/docs/Web/CSS/box_model">Box model</a></li> + <li><a href="/en-US/docs/Web/CSS/All_About_The_Containing_Block">Containing block</a></li> + <li><a href="/en-US/docs/Web/CSS/Layout_mode">Layout mode</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Margin collapsing</a></li> + <li><a href="/en-US/docs/Web/CSS/Replaced_element">Replaced elements</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">Stacking context</a></li> + <li><a href="/en-US/docs/Web/Guide/CSS/Visual_formatting_model">Visual formatting model</a></li> +</ul> + +<h2 id="DOM-CSS_CSSOM">DOM-CSS / CSSOM</h2> + +<h3 id="Major_object_types">Major object types</h3> + +<ul> + <li>{{DOMxRef("DocumentOrShadowRoot.styleSheets")}}</li> + <li><code>{{DOMxRef("StyleSheetList", "styleSheets", "", 1)}}[i].{{DOMxRef("CSSRuleList", "cssRules", "", 1)}}</code></li> + <li><code>cssRules[i].{{DOMxRef("CSSRule.cssText", "cssText", "", 1)}}</code> <span style="white-space: nowrap;">(selector & style)</span></li> + <li><code>cssRules[i].{{DOMxRef("CSSStyleRule.selectorText", "selectorText", "", 1)}}</code></li> + <li>{{DOMxRef("HTMLElement.style")}}</li> + <li><code>HTMLElement.style.{{DOMxRef("CSSStyleDeclaration.cssText", "cssText", "", 1)}}</code> (just style)</li> + <li>{{DOMxRef("Element.className")}}</li> + <li>{{DOMxRef("Element.classList")}}</li> +</ul> + +<h3 id="Important_methods">Important methods</h3> + +<ul> + <li>{{DOMxRef("CSSStyleSheet.insertRule()")}}</li> + <li>{{DOMxRef("CSSStyleSheet.deleteRule()")}}</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/Mozilla_Extensions">Mozilla CSS extensions</a> (prefixed with <code style="white-space: nowrap;">-moz-</code>)</li> + <li><a href="/en-US/docs/Web/CSS/WebKit_Extensions">WebKit CSS extensions</a> (mostly prefixed with <code style="white-space: nowrap;">-webkit-</code>)</li> + <li><a href="/en-US/docs/Web/CSS/Microsoft_Extensions">Microsoft CSS extensions</a> (prefixed with <code style="white-space: nowrap;">-ms-</code>)</li> +</ul> diff --git a/files/ar/web/css/التحول/index.html b/files/ar/web/css/التحول/index.html new file mode 100644 index 0000000000..93ef2bb84e --- /dev/null +++ b/files/ar/web/css/التحول/index.html @@ -0,0 +1,136 @@ +--- +title: التحول (transform) +slug: Web/CSS/التحول +tags: + - التحول + - التحول في صفحات الطرز المتراصة + - خواص صفحات الطرز المتراصة + - صفحات الطرز المتراصة + - مرجع +translation_of: Web/CSS/transform +--- +<div>{{CSSRef}}</div> + +<p>تسمح لك خاصية التحويل <strong><code>transform</code></strong> في CSS بإدارة وتغيير إحداثيات وأبعاد العناصر وما إلى ذلك كما سنتعرف في هذه الوثيقة.</p> + +<p>ويتم ذلك عن طريق تعديل الإحداثيات <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Visual_formatting_model">لنموذج التنسيق المرئي للـ CSS.</a></p> + +<p> </p> + +<div>{{EmbedInteractiveExample("pages/css/transform.html")}}</div> + +<p class="hidden">يتم تخزين المصدر لهذا المثال التفاعلي في مستودع GitHub. إذا كنت ترغب في المساهمة في مشروع الأمثلة التفاعلية ، فيرجى استنساخ <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a>وإرسال طلب سحب.</p> + +<p>إذا كانت الخاصية لها قيمة مختلفة عن <code>none</code> ، فسيتم إنشاء سياق تجميع. في هذه الحالة ، سيكون الكائن بمثابة كتلة تحتوي على <code>position: fixed</code> العناصر التي تحتوي عليها.</p> + +<h2 id="بناء_الجملة">بناء الجملة</h2> + +<pre class="brush: css no-line-numbers">/* قيم رئيسية */ +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; +</pre> + +<p>التحويل يمكن أن يحدد بقيمة واحدة أو أكثر من وضيفة.</p> + +<h3 id="القيم">القيم</h3> + +<dl> + <dt id="<transform-function>">{{cssxref("<transform-function>")}}</dt> + <dd>يمكنك استعمال وظيفة واحد أو أكثر من <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function">وظائف تحويل CSS </a>ليتم تطبيقها. يتم تطبيق التحويلات المركبة بشكل فعال بالترتيب من اليسار إلى اليمين.</dd> + <dt id="none"><code>none</code>يحدد بعدم تحديد أي تحويل.</dt> +</dl> + +<h3 id="البنية">البنية</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="أمثلة">أمثلة</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div>عنصر التحويل</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">div { + border: solid red; + transform: translate(30px, 20px) rotate(20deg); + width: 140px; + height: 60px; +}</pre> + +<h3 id="النتيجة">النتيجة</h3> + +<p>{{EmbedLiveSample("Examples", "400", "160")}}</p> + +<p>Please see <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transforms">Using CSS transforms</a> and {{cssxref("<transform-function>")}} for more examples.</p> + +<h2 id="الميزات">الميزات</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">الميزة</th> + <th scope="col">الحالة</th> + <th scope="col">التعليق</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS Transforms 2', '#transform-functions', 'transform')}}</td> + <td>{{Spec2('CSS Transforms 2')}}</td> + <td>Adds 3D transform functions.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transforms', '#transform-property', 'transform')}}</td> + <td>{{Spec2('CSS3 Transforms')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="توافق_المتصفح">توافق المتصفح</h2> + +<div class="hidden">يتم إنشاء جدول التوافق في هذه الصفحة من البيانات المنظمة. إذا كنت ترغب في المساهمة في البيانات ، فيرجى مراجعة <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data </a>وإرسال طلب سحب.</div> + +<p>{{Compat("css.properties.transform")}}</p> + +<h2 id="قد_يفيدك">قد يفيدك</h2> + +<ul> + <li><a href="/en-US/docs/CSS/Using_CSS_transforms">استعمال CSS transforms</a></li> + <li>{{cssxref("<transform-function>")}} نوع البيانات</li> + <li> إظافة التحول إلى<a href="https://louisremi.github.io/jquery.transform.js/"> jQuery</a></li> +</ul> diff --git a/files/ar/web/css/التعليقات/index.html b/files/ar/web/css/التعليقات/index.html new file mode 100644 index 0000000000..4fbf59d3f9 --- /dev/null +++ b/files/ar/web/css/التعليقات/index.html @@ -0,0 +1,64 @@ +--- +title: التعليقات +slug: Web/CSS/التعليقات +tags: + - CSS + - تعليقات + - مرجع + - ملاحظات +translation_of: Web/CSS/Comments +--- +<div>{{CSSRef}}</div> + +<p>تعليقات CSS تستخدم من أجل إضافة جمل توضيحية وتنبيهات في الكود أو حتى لمنع المتصفح من تطبيق بعض الأكواد المكتوبة في ورقة الأنماط (ملف CSS)، هذه التعليقات لا تؤثر على تصميم الملفات نهائيًا.</p> + +<h2 id="طريقة_الكتابة">طريقة الكتابة</h2> + +<p>يمكن كتابة التعليقات في أي مكان داخل ورقة الأنماط، سواء كانت بسطر واحد أو بعدة أسطر.</p> + +<pre class="syntaxbox">/* تعليق */</pre> + +<h2 id="أمثلة">أمثلة</h2> + +<pre class="brush:css">/* تعليق بسطر واحد */ + +/* +تعليق +يمكن +كتابته +بأكثر +من +سطر +*/ + +/* التعليق أدناه جعل الخواص المذكروة للعنصر + Span + دون تأثير */ +/* +span { + color: blue; + font-size: 1.5em; +} +*/ +</pre> + +<h2 id="تنبيهات">تنبيهات</h2> + +<p>الرمز /* */ يستخدم في كلا الحالتين سطر واحد أو متعدد الأسطر، لا يوجد أي طريقة أخرى من أجل كتابة تعليقات داخل ورقة الأنماط، عندما تستخدم عنصر {{htmlelement("style")}} فيمكنك استخدام <code><!-- --></code> من أجل إخفاء أكواد CSS عن المتصفحات القديمة، رغم أن ذلك غير مستحسن، معظم المبرمجين يستخدمون صيغة /* */.</p> + +<p>لا يمكن كتابة التعليقات بشكل متداخل، بمعنى أن التعليقات ستبدأ عند كتابة /* وستغلق عند أول علامة */ تقابلها.</p> + +<h2 id="الخصائص">الخصائص</h2> + +<ul> + <li><a href="http://www.w3.org/TR/CSS21/syndata.html#comments">CSS 2.1 Syntax and basic data types #comments</a></li> +</ul> + +<h2 id="اقرأ_أيضًا">اقرأ أيضًا</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/Reference">مرجع CSS</a></li> + <li>{{CSS_key_concepts}}</li> +</ul> + +<p> </p> diff --git a/files/ar/web/css/العناصر_التي_يمكن_تحريكها_باستخدام_css_transitions/index.html b/files/ar/web/css/العناصر_التي_يمكن_تحريكها_باستخدام_css_transitions/index.html new file mode 100644 index 0000000000..d9a0da44f2 --- /dev/null +++ b/files/ar/web/css/العناصر_التي_يمكن_تحريكها_باستخدام_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 +--- +<p>{{CSSRef}}</p> + +<p>يمكن تحريك بعض عناصر CSS بشكل ناعم وسلس عندما تتغير قيم وخصائص العناصر، سواء باستخدام <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a> أو <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS Transitions</a>.</p> + +<p>هذه قائمة بالعناصر التي يمكن استخدام خاصية Transitions عليها:</p> + +<p>{{CSSAnimatedProperties}}</p> 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 +--- +<p dir="rtl">يتم إرسال أحداث DOM Events لإبلاغ الكود أن أشياء مثيرة قد حدثت. يتم تمثيل كل حدث ب Object يعتمد على واجهة {{domxref ("Event")}} ، وقد يحتوي على حقول و / أو دوال مخصصة إضافية للحصول على معلومات إضافية حول ما حدث. يمكن أن تمثل الأحداث كل شيء بدءًا من تفاعلات المستخدم الأساسية إلى الإشعارات التلقائية للأشياء التي تحدث في نموذج العرض.</p> + +<p dir="rtl">تقدم هذه المقالة قائمة بالأحداث التي يمكن إرسالها؛ بعضها أحداث قياسية محددة في المواصفات الرسمية ، والبعض الآخر أحداث تستخدم داخليًا بواسطة متصفحات محددة، على سبيل المثال، الأحداث الخاصة بـ Mozilla مدرجة بحيث يمكن للإضافات add-ons استخدامها للتفاعل مع المستعرض.</p> + +<h2 dir="rtl" id="الأقسام_الأكثر_شيوعا">الأقسام الأكثر شيوعا</h2> + +<table class="standard-table"> + <caption> + <h3 id="أحداث_المصادر">أحداث المصادر</h3> + </caption> + <thead> + <tr> + <th scope="col">اسم الحدث</th> + <th scope="col">يُطلق عندما</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{Event("error")}}</td> + <td dir="rtl">فشل تحميل مصدر.</td> + </tr> + <tr> + <td>{{Event("abort")}}</td> + <td dir="rtl">تم إلغاء تحميل مصدر.</td> + </tr> + <tr> + <td>{{Event("load")}}</td> + <td dir="rtl">انتهى تحميل المصدر والمصادر التابعة له.</td> + </tr> + <tr> + <td>{{Event("beforeunload")}}</td> + <td> + <p dir="rtl">النافذة والمستند والمصادر الخاصة بهم على وشك ان يتم تحميلهم.</p> + </td> + </tr> + <tr> + <td>{{Event("unload")}}</td> + <td dir="rtl"> يتم إلغاء تحميل المستند أو المصدر التابع له.</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption> + <h3 id="أحداث_الشبكة">أحداث الشبكة</h3> + </caption> + <thead> + <tr> + <th scope="col">اسم الحدث</th> + <th scope="col">يُطلق عندما</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{Event("online")}}</td> + <td dir="rtl">حصل المتصفح على الوصول الى الشبكة.</td> + </tr> + <tr> + <td>{{Event("offline")}}</td> + <td dir="rtl">فقد المتصفح الوصل الى الشبكة.</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption> + <h3 id="أحداث_التركيز">أحداث التركيز</h3> + </caption> + <thead> + <tr> + <th scope="col">اسم الحدث</th> + <th scope="col">يُطلق عندما</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{Event("focus")}}</td> + <td dir="rtl">تلقى عنصر ما التركيز (بدون فقاعة).</td> + </tr> + <tr> + <td>{{Event("blur")}}</td> + <td dir="rtl">فقد عنصر ما التركيز (بدون فقاعة).</td> + </tr> + <tr> + <td>{{Event("focusin")}}</td> + <td dir="rtl">عنصر ما على وشك تقلي التركيز (بفقاعة).</td> + </tr> + <tr> + <td>{{Event("focusout")}}</td> + <td dir="rtl">فقد عنصر ما التركيز (بفقاعة).</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption> + <h3 id="WebSocket_أحداث">WebSocket أحداث</h3> + </caption> + <thead> + <tr> + <th scope="col">اسم الحدث</th> + <th scope="col">يُطلق عندما</th> + </tr> + </thead> + <tbody> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/open_websocket">open</a></code></td> + <td dir="rtl">تم إنشاء اتصال WebSocket.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/message_websocket">message</a></code></td> + <td dir="rtl">يتم استلام رسالة من خلال WebSocket.</td> + </tr> + <tr> + <td>{{Event("error")}}</td> + <td dir="rtl">تم إغلاق اتصال WebSocket مع ضرر (تعذر إرسال بعض البيانات على سبيل المثال).</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/close_websocket">close</a></code></td> + <td dir="rtl">تم إغلاق اتصال WebSocket.</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption> + <h3 id="أحداث_سجل_الجلسة">أحداث سجل الجلسة</h3> + </caption> + <thead> + <tr> + <th scope="col">اسم الحدث</th> + <th scope="col">يُطلق عندما</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{Event("pagehide")}}</td> + <td dir="rtl">يتم قطع إدخال سجل الجلسة من.</td> + </tr> + <tr> + <td>{{Event("pageshow")}}</td> + <td dir="rtl">يتم قطع إدخال محفوظات الجلسة إلى.</td> + </tr> + <tr> + <td>{{Event("popstate")}}</td> + <td dir="rtl">يتم نقل إدخال محفوظات الجلسة إلى (في حالات معينة).</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption> + <h3 id="CSS_Animation_أحداث_الحركة">CSS Animation أحداث الحركة</h3> + </caption> + <thead> + <tr> + <th scope="col">اسم الحدث</th> + <th scope="col">يُطلق عندما</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{Event("animationstart")}}</td> + <td dir="rtl">بدأ <a href="/en-US/docs/CSS/CSS_animations">CSS animation</a> .</td> + </tr> + <tr> + <td>{{Event("animationcancel")}}</td> + <td dir="rtl">تم إيقاف <a href="/en-US/docs/CSS/CSS_animations">CSS animation</a> .</td> + </tr> + <tr> + <td>{{Event("animationend")}}</td> + <td dir="rtl">اكتمل <a href="/en-US/docs/CSS/CSS_animations">CSS animation</a> .</td> + </tr> + <tr> + <td>{{Event("animationiteration")}}</td> + <td dir="rtl"> تم تكرار<a href="/en-US/docs/CSS/CSS_animations">CSS animation</a> .</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption> + <h3 dir="rtl" id="أحداث_CSS_انتقالية">أحداث CSS انتقالية </h3> + </caption> + <thead> + <tr> + <th scope="col">اسم الحدث</th> + <th scope="col">يُطلق عندما</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{Event("transitionstart")}}</td> + <td dir="rtl"><a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS transition</a> بدأ بالفعل (يتم إطلاقه بعد أي تأخير)</td> + </tr> + <tr> + <td>{{Event("transitioncancel")}}</td> + <td dir="rtl"><a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS transition</a> تم إلغائه.</td> + </tr> + <tr> + <td>{{Event("transitionend")}}</td> + <td dir="rtl"><a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS transition</a> اكتمل.</td> + </tr> + <tr> + <td>{{Event("transitionrun")}}</td> + <td dir="rtl"><a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS transition</a> بدأ تشغيله (تم إطلاقه قبل بدء أي تأخير).</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption> + <h3 id="أحداث_النموذج">أحداث النموذج</h3> + </caption> + <thead> + <tr> + <th scope="col">اسم الحدث</th> + <th scope="col">يُطلق عندما</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{Event("reset")}}</td> + <td dir="rtl">تم الضغط على زر "إعادة الضبط"</td> + </tr> + <tr> + <td>{{Event("submit")}}</td> + <td dir="rtl">تم الضغط على زر "تسليم"</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption> + <h3 id="أحداث_الطباعة">أحداث الطباعة</h3> + </caption> + <thead> + <tr> + <th scope="col">اسم الحدث</th> + <th scope="col">يُطلق عندما</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{Event("beforeprint")}}</td> + <td dir="rtl">تم فتح صندوق الطباعة.</td> + </tr> + <tr> + <td>{{Event("afterprint")}}</td> + <td dir="rtl">تم إغلاق صندوق الطباعة.</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption> + <h3 dir="rtl" id="أحداث_تكوين_النص">أحداث تكوين النص</h3> + </caption> + <thead> + <tr> + <th scope="col">اسم الحدث</th> + <th scope="col">يُطلق عندما</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{Event("compositionstart")}}</td> + <td dir="rtl">يتم تحضير مقطع النص (مشابه لkeydown لإدخال لوحة المفاتيح ، ولكنها تعمل مع إدخالات أخرى مثل التعرف على الكلام).</td> + </tr> + <tr> + <td>{{Event("compositionupdate")}}</td> + <td dir="rtl">تم إضافة حرف إلى مقطع من النص الذي يتم تكوينه.</td> + </tr> + <tr> + <td>{{Event("compositionend")}}</td> + <td dir="rtl">تم الانتهاء من تكوين مقطع من النص أو إلغاؤه.</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption> + <h3 id="أحداث_العرض">أحداث العرض</h3> + </caption> + <thead> + <tr> + <th scope="col">اسم الحدث</th> + <th scope="col">يُطلق عندما</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{Event("fullscreenchange")}}</td> + <td dir="rtl">تم تبديل عنصر إلى وضع ملء الشاشة أو منه.</td> + </tr> + <tr> + <td>{{Event("fullscreenerror")}}</td> + <td dir="rtl">كان من المستحيل التبديل إلى وضع ملء الشاشة لأسباب فنية أو بسبب رفض الإذن.</td> + </tr> + <tr> + <td>{{Event("resize")}}</td> + <td dir="rtl">تم تغيير حجم عرض المستند.</td> + </tr> + <tr> + <td>{{Event("scroll")}}</td> + <td dir="rtl">تم تمرير عرض المستند أو تمرير عنصر.</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption> + <h3 id="أحداث_الحافظة">أحداث الحافظة</h3> + </caption> + <thead> + <tr> + <th scope="col">اسم الحدث</th> + <th scope="col">يُطلق عندما</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{Event("cut")}}</td> + <td dir="rtl">تم قص التحديد ونسخه إلى الحافظة.</td> + </tr> + <tr> + <td>{{Event("copy")}}</td> + <td dir="rtl">تم نسخ التحديد إلى الحافظة.</td> + </tr> + <tr> + <td>{{Event("paste")}}</td> + <td dir="rtl">تم لصق العنصر من الحافظة.</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption> + <h3 id="أحداث_لوحة_المفاتيح">أحداث لوحة المفاتيح</h3> + </caption> + <tbody> + <tr> + <th scope="col">اسم الحدث</th> + <th scope="col">يُطلق عندما</th> + </tr> + <tr> + <td>{{Event("keydown")}}</td> + <td dir="rtl">تم الضغط على أي مفتاح.</td> + </tr> + <tr> + <td>{{Event("keypress")}}</td> + <td dir="rtl">أي مفتاح (ما عدا <kbd>Shift</kbd>, <kbd>Fn</kbd>, أو <kbd>CapsLock</kbd>) في حالة الضغط عليه. (يُطلق بالتزامن.)</td> + </tr> + <tr> + <td>{{Event("keyup")}}</td> + <td>تم تحرير الضغط من على أي مفتاح</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption> + <h3 id="أحداث_الماوس">أحداث الماوس</h3> + </caption> + <thead> + <tr> + <th scope="col">اسم الحدث</th> + <th scope="col">يُطلق عندما</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{Event("auxclick")}}</td> + <td dir="rtl">تم الضغط على زر جهاز التأشير (أي زر غير أساسي) وتحريره على عنصر.</td> + </tr> + <tr> + <td>{{Event("click")}}</td> + <td dir="rtl">تم الضغط على زر جهاز التأشير (أي زر ، وسيصبح قريباً زر أساسي فقط) وتحريره على عنصر.</td> + </tr> + <tr> + <td>{{Event("contextmenu")}}</td> + <td dir="rtl">يتم الضغط على الزر الأيمن للماوس (قبل عرض قائمة السياق).</td> + </tr> + <tr> + <td>{{Event("dblclick")}}</td> + <td dir="rtl">يتم الضغط على زر جهاز تأشير مرتين على عنصر.</td> + </tr> + <tr> + <td>{{Event("mousedown")}}</td> + <td dir="rtl">يتم الضغط على زر جهاز التأشير على عنصر.</td> + </tr> + <tr> + <td>{{Event("mouseenter")}}</td> + <td dir="rtl">يتم نقل جهاز تأشير على العنصر المرفق به المستمع.</td> + </tr> + <tr> + <td>{{Event("mouseleave")}}</td> + <td dir="rtl">يتم نقل جهاز تأشير بعيدًا عن العنصر المرفق به المستمع.</td> + </tr> + <tr> + <td>{{Event("mousemove")}}</td> + <td dir="rtl">يتم نقل جهاز تأشير فوق عنصر. (يتم تشغيله باستمرار أثناء تحريك الماوس.)</td> + </tr> + <tr> + <td>{{Event("mouseover")}}</td> + <td dir="rtl">يتم نقل جهاز التأشير إلى العنصر الذي يحتوي على المستمع مرفقًا أو على أحد توابعه.</td> + </tr> + <tr> + <td>{{Event("mouseout")}}</td> + <td dir="rtl">يتم نقل جهاز تأشير بعيدا عن العنصر الذي يحتوي على المستمع مرفقًا أو بعيدًا عن أحد توابعه.</td> + </tr> + <tr> + <td>{{Event("mouseup")}}</td> + <td dir="rtl">تم تحرير زر جهاز التأشير فوق عنصر.</td> + </tr> + <tr> + <td>{{Event("pointerlockchange")}}</td> + <td dir="rtl">تم قفل المؤشر أو تحريره.</td> + </tr> + <tr> + <td>{{Event("pointerlockerror")}}</td> + <td dir="rtl">كان من المستحيل تأمين المؤشر لأسباب فنية أو بسبب رفض الإذن.</td> + </tr> + <tr> + <td>{{Event("select")}}</td> + <td dir="rtl">يتم تحديد بعض النص.</td> + </tr> + <tr> + <td>{{Event("wheel")}}</td> + <td dir="rtl">يتم تدوير الزر العجلة لجهاز التأشير في أي اتجاه.</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption> + <h3 id="أحداث_السحب_و_الإفلات">أحداث السحب و الإفلات</h3> + </caption> + <thead> + <tr> + <th scope="col">اسم الحدث</th> + <th scope="col">يُطلق عندما</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{Event("drag")}}</td> + <td dir="rtl">يتم سحب عنصر أو نص محدد. (يتم إطلاقه باستمرار كل 350 مللي ثانية)</td> + </tr> + <tr> + <td>{{Event("dragend")}}</td> + <td dir="rtl">يتم إنهاء عملية السحب (عن طريق تحرير زر الماوس أو الضغط على مفتاح escape).</td> + </tr> + <tr> + <td>{{Event("dragenter")}}</td> + <td dir="rtl">يدخل العنصر المسحوب أو تحديد النص في هدف إسقاط صالح.</td> + </tr> + <tr> + <td>{{Event("dragstart")}}</td> + <td dir="rtl">يبدأ المستخدم في سحب عنصر أو تحديد نص.</td> + </tr> + <tr> + <td>{{Event("dragleave")}}</td> + <td dir="rtl">العنصر المسحوب أو تحديد النص يترك هدف إفلات صالح.</td> + </tr> + <tr> + <td>{{Event("dragover")}}</td> + <td dir="rtl">يتم سحب عنصر أو تحديد نص فوق هدف إفلات صالح. (يتم إطلاقه باستمرار كل 350 مللي ثانية)</td> + </tr> + <tr> + <td>{{Event("drop")}}</td> + <td dir="rtl">يتم إسقاط عنصر على هدف إسقاط صالح.</td> + </tr> + </tbody> +</table> + +<div style="overflow: auto;"> +<table class="standard-table"> + <caption> + <h3 id="أحداث_الوسائط">أحداث الوسائط</h3> + </caption> + <thead> + <tr> + <th scope="col">اسم الحدث</th> + <th scope="col">يُطلق عندما</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{Event("audioprocess")}}</td> + <td dir="rtl">المخزن المؤقت للإدخال لـ {{DOMxRef ("ScriptProcessorNode")}} جاهز للمعالجة.</td> + </tr> + <tr> + <td>{{Event("canplay")}}</td> + <td dir="rtl">يمكن للمتصفح تشغيل الوسائط ، ولكن التقدير يشير أنه لم يتم تحميل بيانات كافية لتشغيل الوسائط حتى نهايتها دون الحاجة إلى التوقف لمزيد من التخزين المؤقت للمحتوى.</td> + </tr> + <tr> + <td>{{Event("canplaythrough")}}</td> + <td dir="rtl">يُقَدِّر المتصفح أنه يمكنه تشغيل الوسائط حتى نهايتها دون التوقف لتخزين المحتوى مؤقتًا.</td> + </tr> + <tr> + <td>{{Event("complete")}}</td> + <td dir="rtl">يتم إنهاء عرض {{DOMxRef ("OfflineAudioContext")}}}.</td> + </tr> + <tr> + <td>{{Event("durationchange")}}</td> + <td dir="rtl">تم تحديث خاصية المدة duration.</td> + </tr> + <tr> + <td>{{Event("emptied")}}</td> + <td dir="rtl">أصبحت الوسائط فارغة؛ على سبيل المثال، يتم إرسال هذا الحدث إذا تم تحميل الوسائط بالفعل (أو تحميلها جزئيًا) ، ويتم استدعاء load () method لإعادة تحميلها.</td> + </tr> + <tr> + <td>{{Event("ended")}}</td> + <td dir="rtl">توقف التشغيل لأنه تم الوصول إلى نهاية الوسائط.</td> + </tr> + <tr> + <td>{{Event("loadeddata")}}</td> + <td dir="rtl">تم الانتهاء من تحميل الإطار الأول للوسائط.</td> + </tr> + <tr> + <td>{{Event("loadedmetadata")}}</td> + <td dir="rtl">تم تحميل البيانات الوصفية metadata.</td> + </tr> + <tr> + <td>{{Event("pause")}}</td> + <td dir="rtl">تم إيقاف التشغيل مؤقتا.</td> + </tr> + <tr> + <td>{{Event("play")}}</td> + <td dir="rtl">بدأ التشغيل.</td> + </tr> + <tr> + <td>{{Event("playing")}}</td> + <td dir="rtl">التشغيل جاهز للبدء بعد التوقف المؤقت أو التأخير بسبب نقص البيانات.</td> + </tr> + <tr> + <td>{{Event("ratechange")}}</td> + <td dir="rtl">لقد تغير معدل التشغيل.</td> + </tr> + <tr> + <td>{{Event("seeked")}}</td> + <td dir="rtl">اكتملت عملية البحث.</td> + </tr> + <tr> + <td>{{Event("seeking")}}</td> + <td dir="rtl">بدأت عملية البحث.</td> + </tr> + <tr> + <td>{{Event("stalled")}}</td> + <td dir="rtl">يحاول وكيل المستخدم جلب بيانات الوسائط، ولكن البيانات بشكل غير متوقع لا تستجيب.</td> + </tr> + <tr> + <td>{{Event("suspend")}}</td> + <td dir="rtl">تم تعليق تحميل بيانات الوسائط.</td> + </tr> + <tr> + <td>{{Event("timeupdate")}}</td> + <td dir="rtl">تم تحديث الوقت المشار إليه بواسطة خاصية currentTime.</td> + </tr> + <tr> + <td>{{Event("volumechange")}}</td> + <td dir="rtl">تم تغيير مستوى الصوت.</td> + </tr> + <tr> + <td>{{Event("waiting")}}</td> + <td dir="rtl">توقف التشغيل بسبب نقص مؤقت في البيانات.</td> + </tr> + </tbody> +</table> +</div> + +<table class="standard-table"> + <caption> + <h3 id="أحداث_التقدم">أحداث التقدم</h3> + </caption> + <thead> + <tr> + <th scope="col">اسم الحدث</th> + <th scope="col">...يُطلق عندما</th> + </tr> + </thead> + <tbody> + <tr> + <td><code><a href="/en-US/docs/Web/API/XMLHttpRequest/abort_event">abort</a></code></td> + <td dir="rtl">تم إنهاء التقدم (ليس بسبب خطأ).</td> + </tr> + <tr> + <td>{{Event("error")}}</td> + <td dir="rtl">فشل التقدم.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/API/XMLHttpRequest/load_event">load</a></code></td> + <td>تم التقدم بنجاح.</td> + </tr> + <tr> + <td>{{Event("loadend")}}</td> + <td dir="rtl"> توقف التقدم (بعد أن تم إرسال <code>"error"</code>, <code>"abort"</code>, أو <code>"load"</code> ).</td> + </tr> + <tr> + <td>{{Event("loadstart")}}</td> + <td dir="rtl">بدأ التقدم.</td> + </tr> + <tr> + <td>{{Event("progress")}}</td> + <td dir="rtl">جاري التقدم.</td> + </tr> + <tr> + <td>{{Event("timeout")}}</td> + <td dir="rtl">تم إنهاء التقدم بسبب انتهاء الوقت المحدد مسبقا.</td> + </tr> + </tbody> +</table> + +<h3 id="أحداث_التخزين">أحداث التخزين</h3> + +<p>{{Event("change")}} (see {{anch("Non-standard events")}})<br> + {{Event("storage")}}</p> + +<h3 id="أحداث_الترقية">أحداث الترقية</h3> + +<p>{{Event("checking")}}<br> + {{Event("downloading")}}<br> + {{Event("error")}}<br> + {{Event("noupdate")}}<br> + {{Event("obsolete")}}<br> + {{Event("updateready")}}</p> + +<h3 id="أحداث_اغيير_القيمة">أحداث اغيير القيمة</h3> + +<p>{{Event("broadcast")}}<br> + {{Event("CheckboxStateChange")}}<br> + {{Event("hashchange")}}<br> + {{Event("input")}}<br> + {{Event("RadioStateChange")}}<br> + {{Event("readystatechange")}}<br> + {{Event("ValueChange")}}</p> + +<h3 id="أحداث_غير_مصنفة">أحداث غير مصنفة</h3> + +<p>{{Event("invalid")}}<br> + <code><a href="/en-US/docs/Web/API/DedicatedWorkerGlobalScope/message_event">message</a></code><br> + <code><a href="/en-US/docs/Web/API/EventSource/message_event">message</a></code><br> + <code><a href="/en-US/docs/Web/API/EventSource/open_event">open</a></code><br> + <code><a href="/en-US/docs/Web/API/Element/show_event">show</a></code></p> + +<h2 id="أحداث_أقل_شيوعا_وغير_قياسية">أحداث أقل شيوعا وغير قياسية</h2> + +<h3 id="Abortable_Fetch_events">Abortable Fetch events</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">اسم الحدث</th> + <th scope="col">يُطلق عندما</th> + </tr> + </thead> + <tbody> + <tr> + <td><code><a href="/en-US/docs/Web/API/AbortSignal/abort_event">abort</a></code></td> + <td dir="rtl">تم إحباط طلب DOM ، مثل استخدام {{DOMxRef("AbortController.abort()")}}.</td> + </tr> + </tbody> +</table> + +<h3 id="WebVR_events">WebVR events</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">اسم الحدث</th> + <th scope="col">يُطلق عندما</th> + </tr> + <tr> + <td>{{Event("vrdisplayactivate")}}</td> + <td dir="rtl">عندما يكون من الممكن عرض شاشة VR ، على سبيل المثال إذا تم نقل HMD لإخراجها من وضع الاستعداد، أو إيقاظها من خلال تشغيلها.</td> + </tr> + <tr> + <td>{{Event("vrdisplayblur")}}</td> + <td dir="rtl">عند إيقاف العرض إلى {{DOMxRef ("VRDisplay")}} مؤقتًا لسبب ما من قبل المتصفح أو نظام التشغيل أو جهاز VR - على سبيل المثال ، أثناء تفاعل المستخدم مع قائمة النظام أو المتصفح ، لمنع تجربة التتبع أو الفقد.</td> + </tr> + <tr> + <td>{{Event("vrdisplayconnect")}}</td> + <td dir="rtl">عند توصيل {{DOMxRef ("VRDisplay")}} متوافق بالكمبيوتر.</td> + </tr> + <tr> + <td>{{Event("vrdisplaydeactivate")}}</td> + <td dir="rtl">عندما يتعذر عرض {{DOMxRef ("VRDisplay")}} إلى ، على سبيل المثال إذا انتقل HMD إلى وضع الاستعداد أو وضع السكون بسبب فترة من عدم النشاط.</td> + </tr> + <tr> + <td>{{Event("vrdisplaydisconnect")}}</td> + <td dir="rtl">عندما يتم فصل {{DOMxRef ("VRDisplay")}} المتوافق مع الكمبيوتر.</td> + </tr> + <tr> + <td>{{Event("vrdisplayfocus")}}</td> + <td dir="rtl">عند استئناف العرض التقديمي على {{DOMxRef ("VRDisplay")}} بعد أن تم تشويشه.</td> + </tr> + <tr> + <td>{{Event("vrdisplaypresentchange")}}</td> + <td dir="rtl">تغيير حالة العرض {{DOMxRef ("VRDisplay")}} - مثلا تنتقل من العرض إلى عدم العرض أو العكس.</td> + </tr> + </thead> +</table> + +<h3 id="SVG_أحداث">SVG أحداث</h3> + +<p>{{Event("SVGAbort")}}<br> + {{Event("SVGError")}}<br> + {{Event("SVGLoad")}}<br> + {{Event("SVGResize")}}<br> + {{Event("SVGScroll")}}<br> + {{Event("SVGUnload")}}<br> + {{Event("SVGZoom")}}</p> + +<h3 id="أحداث_قاعدة_البيانات">أحداث قاعدة البيانات</h3> + +<p><code><a href="/en-US/docs/Web/Reference/Events/abort_indexedDB">abort</a></code><br> + <code><a href="/en-US/docs/Web/Reference/Events/blocked_indexedDB">blocked</a></code><br> + <code><a href="/en-US/docs/Web/Reference/Events/complete_indexedDB">complete</a></code><br> + {{Event("error")}}<br> + <code><a href="/en-US/docs/Web/Reference/Events/success_indexedDB">success</a></code><br> + <code><a href="/en-US/docs/Web/Reference/Events/upgradeneeded_indexedDB">upgradeneeded</a></code><br> + <code><a href="/en-US/docs/Web/Reference/Events/versionchange_indexedDB">versionchange</a></code></p> + +<h3 id="أحداث_السكريبت">أحداث السكريبت</h3> + +<p>{{Event("afterscriptexecute")}}<br> + {{Event("beforescriptexecute")}}</p> + +<h3 id="أحداث_القائمة">أحداث القائمة</h3> + +<p>{{Event("DOMMenuItemActive")}}<br> + {{Event("DOMMenuItemInactive")}}</p> + +<h3 id="أحداث_النافذة">أحداث النافذة</h3> + +<p><code><a href="/en-US/docs/Mozilla/Tech/XUL/Events/close_event">close</a></code></p> + +<h3 id="أحداث_منبثقة">أحداث منبثقة</h3> + +<p>{{Event("popuphidden")}}<br> + {{Event("popuphiding")}}<br> + {{Event("popupshowing")}}<br> + {{Event("popupshown")}}</p> + +<h3 id="أحداث_تبويب">أحداث تبويب</h3> + +<p>{{Event("visibilitychange")}}</p> + +<ul> +</ul> + +<h3 id="أحداث_البطارية">أحداث البطارية</h3> + +<p>{{Event("chargingchange")}}<br> + {{Event("chargingtimechange")}}<br> + {{Event("dischargingtimechange")}}<br> + {{Event("levelchange")}}</p> + +<h3 id="أحداث_الاستدعاء">أحداث الاستدعاء</h3> + +<p>{{Event("alerting")}}<br> + {{Event("busy")}}<br> + {{Event("callschanged")}}<br> + {{Event("cfstatechange")}}<br> + {{Event("connected")}}<br> + {{Event("connecting")}}<br> + {{Event("dialing")}}<br> + {{Event("disconnected")}}<br> + {{Event("disconnecting")}}<br> + {{Event("error_(Telephony)","error")}}<br> + {{Event("held")}}, {{Event("holding")}}<br> + {{Event("incoming")}}<br> + {{Event("resuming")}}<br> + {{Event("statechange")}}<br> + {{Event("voicechange")}}</p> + +<h3 id="أحداث_مستشعر"> أحداث مستشعر</h3> + +<p>{{Event("compassneedscalibration")}}<br> + {{Event("devicemotion")}}<br> + {{Event("deviceorientation")}}<br> + {{Event("orientationchange")}}</p> + +<h3 id="أحداث_بطاقة_ذكية">أحداث بطاقة ذكية</h3> + +<p>{{Event("icccardlockerror")}}<br> + {{Event("iccinfochange")}}<br> + {{Event("smartcard-insert")}}<br> + {{Event("smartcard-remove")}}<br> + {{Event("stkcommand")}}<br> + {{Event("stksessionend")}}<br> + {{Event("cardstatechange")}}</p> + +<h3 id="SMS_و_USSD_أحداث">SMS و USSD أحداث</h3> + +<p>{{Event("delivered")}}<br> + {{Event("received")}}<br> + {{Event("sent")}}<br> + {{Event("ussdreceived")}}</p> + +<h3 id="أحداث_إطار_المتصفح">أحداث إطار المتصفح</h3> + +<p>{{Event("mozbrowserclose")}}<br> + {{Event("mozbrowsercontextmenu")}}<br> + {{Event("mozbrowsererror")}}<br> + {{Event("mozbrowsericonchange")}}<br> + {{Event("mozbrowserlocationchange")}}<br> + {{Event("mozbrowserloadend")}}<br> + {{Event("mozbrowserloadstart")}}<br> + {{Event("mozbrowseropenwindow")}}<br> + {{Event("mozbrowsersecuritychange")}}<br> + {{Event("mozbrowsershowmodalprompt")}}<br> + {{Event("mozbrowsertitlechange")}}</p> + +<h3 id="DOM_أحداث_معالجة">DOM أحداث معالجة</h3> + +<p><code><a href="/en-US/docs/DOM/Mutation_events">DOMAttributeNameChanged</a></code><br> + <code><a href="/en-US/docs/DOM/Mutation_events">DOMAttrModified</a></code><br> + <code><a href="/en-US/docs/DOM/Mutation_events">DOMCharacterDataModified</a></code><br> + {{Event("DOMContentLoaded")}}<br> + <code><a href="/en-US/docs/DOM/Mutation_events">DOMElementNameChanged</a></code><br> + <code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeInserted</a></code><br> + <code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeInsertedIntoDocument</a></code><br> + <code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeRemoved</a></code><br> + <code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeRemovedFromDocument</a></code><br> + <code><a href="/en-US/docs/DOM/Mutation_events">DOMSubtreeModified</a></code></p> + +<h3 id="أحداث_اللمس">أحداث اللمس</h3> + +<p>{{Event("touchcancel")}}<br> + {{Event("touchend")}}<br> + {{Event("touchmove")}}<br> + {{Event("touchstart")}}</p> + +<h3 id="أحداث_الإشارة">أحداث الإشارة</h3> + +<p>{{Event("pointerover")}}<br> + {{Event("pointerenter")}}<br> + {{Event("pointerdown")}}<br> + {{Event("pointermove")}}<br> + {{Event("pointerup")}}<br> + {{Event("pointercancel")}}<br> + {{Event("pointerout")}}<br> + {{Event("pointerleave")}}<br> + {{Event("gotpointercapture")}}<br> + {{Event("lostpointercapture")}}</p> + +<h2 id="أحداث_قياسية">أحداث قياسية</h2> + +<p dir="rtl">يتم تعريف هذه الأحداث في مواصفات الويب الرسمية ويجب أن تكون شائعة عبر المتصفحات. يتم سرد كل حدث جنبًا إلى جنب مع الواجهة التي تمثل ال Object المرسل إلى مستلمي الحدث (حتى تتمكن من العثور على معلومات حول البيانات التي يتم توفيرها مع كل حدث) بالإضافة إلى ارتباط بالمواصفات أو المواصفات التي تحدد الحدث.</p> + +<div style="overflow: auto;"> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">اسم الحدث</th> + <th scope="col">نوع الحدث</th> + <th scope="col">تخصيص</th> + <th dir="rtl" scope="col">يُطلق عندما...</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{Event("abort")}}</td> + <td>{{DOMxRef("UIEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-abort" style="white-space: nowrap;">DOM L3</a></td> + <td dir="rtl">تم إلغاء تحميل المصدر.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/abort_(ProgressEvent)">abort</a></code></td> + <td>{{DOMxRef("ProgressEvent")}}</td> + <td><a href="http://www.w3.org/TR/progress-events/">Progress</a> and <a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-abort">XMLHttpRequest</a></td> + <td dir="rtl">تم إنهاء التقدم (ليس بسبب خطأ).</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/abort_indexedDB">abort</a></code></td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.w3.org/TR/IndexedDB/#database-interface">IndexedDB</a></td> + <td dir="rtl">تم إلغاء الإجراء.</td> + </tr> + <tr> + <td>{{Event("afterprint")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.w3.org/TR/html5/webappapis.html#printing">HTML5</a></td> + <td dir="rtl">بدأ المستند المرتبط في الطباعة أو تم إغلاق معاينة الطباعة.</td> + </tr> + <tr> + <td>{{Event("animationcancel")}}</td> + <td>{{DOMxRef("AnimationEvent")}} {{Experimental_Inline}}</td> + <td><a href="http://www.w3.org/TR/css3-animations/#animation-events" style="white-space: nowrap;">CSS Animations</a></td> + <td dir="rtl">تم إلغاء <a href="/en-US/docs/CSS/CSS_animations">CSS animation</a> .</td> + </tr> + <tr> + <td>{{Event("animationend")}}</td> + <td>{{DOMxRef("AnimationEvent")}} {{Experimental_Inline}}</td> + <td><a href="http://www.w3.org/TR/css3-animations/#animation-events" style="white-space: nowrap;">CSS Animations</a></td> + <td dir="rtl">تم إكمال <a href="/en-US/docs/CSS/CSS_animations">CSS animation</a> .</td> + </tr> + <tr> + <td>{{Event("animationiteration")}}</td> + <td>{{DOMxRef("AnimationEvent")}} {{Experimental_Inline}}</td> + <td><a href="http://www.w3.org/TR/css3-animations/#animation-events" style="white-space: nowrap;">CSS Animations</a></td> + <td dir="rtl"> تم تكرار <a href="/en-US/docs/CSS/CSS_animations">CSS animation</a>.</td> + </tr> + <tr> + <td>{{Event("animationstart")}}</td> + <td>{{DOMxRef("AnimationEvent")}} {{Experimental_Inline}}</td> + <td><a href="http://www.w3.org/TR/css3-animations/#animation-events" style="white-space: nowrap;">CSS Animations</a></td> + <td dir="rtl">بدأ <a href="/en-US/docs/CSS/CSS_animations">CSS animation</a>.</td> + </tr> + <tr> + <td>{{Event("appinstalled")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="/en-US/docs/Web/Manifest" style="white-space: nowrap;">Web App Manifest</a></td> + <td dir="rtl">تم تثبيت تطبيق ويب بنجاح <a href="/en-US/Apps/Progressive">progressive web app</a>.</td> + </tr> + <tr> + <td>{{Event("audioprocess")}}</td> + <td>{{DOMxRef("AudioProcessingEvent")}} {{Deprecated_Inline}}</td> + <td>{{SpecName('Web Audio API', '#AudioProcessingEvent', 'audioprocess')}}</td> + <td dir="rtl">مخزن الإدخال المؤقت لـ {{DOMxRef ("ScriptProcessorNode")}} جاهز للمعالجة.</td> + </tr> + <tr> + <td>{{Event("audioend")}} {{Experimental_Inline}}</td> + <td>{{DOMxRef("Event")}}</td> + <td>{{SpecName('Web Speech API')}}</td> + <td dir="rtl">انتهى وكيل المستخدم من التقاط الصوت للتعرف على الكلام.</td> + </tr> + <tr> + <td>{{Event("audiostart")}} {{Experimental_Inline}}</td> + <td>{{DOMxRef("Event")}}</td> + <td>{{SpecName('Web Speech API')}}</td> + <td dir="rtl">بدأ وكيل المستخدم في التقاط الصوت للتعرف على الكلام.</td> + </tr> + <tr> + <td>{{Event("beforeprint")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.w3.org/TR/html5/webappapis.html#printing">HTML5</a></td> + <td dir="rtl">المستند المرتبط على وشك الطباعة أو المعاينة للطباعة.</td> + </tr> + <tr> + <td>{{Event("beforeunload")}}</td> + <td>{{DOMxRef("BeforeUnloadEvent")}}</td> + <td><a href="http://www.w3.org/TR/html5/browsers.html#unloading-documents">HTML5</a></td> + <td dir="rtl">النافذة والمستند ومصدره على وشك التفريغ.</td> + </tr> + <tr> + <td>{{Event("beginEvent")}}</td> + <td>{{DOMxRef("TimeEvent")}}</td> + <td><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> + <td dir="rtl">يبدأ عنصر الرسوم المتحركة SMIL.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/blocked_indexedDB">blocked</a></code></td> + <td></td> + <td><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td> + <td dir="rtl">يؤدي الاتصال المفتوح بقاعدة بيانات إلى حظر معاملة versionchange في نفس قاعدة البيانات.</td> + </tr> + <tr> + <td>{{Event("blur")}}</td> + <td>{{DOMxRef("FocusEvent")}} {{Experimental_Inline}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-blur" style="white-space: nowrap;">DOM L3</a></td> + <td dir="rtl">العنصر فقد التركيز (لافقاعة).</td> + </tr> + <tr> + <td>{{Event("boundary")}} {{Experimental_Inline}}</td> + <td>{{DOMxRef("SpeechSynthesisEvent")}}</td> + <td>{{SpecName('Web Speech API')}}</td> + <td dir="rtl">يصل الكلام المنطوق الكلمة أو الجملة إلى حد</td> + </tr> + <tr> + <td>{{Event("canplay")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-canplay" style="white-space: nowrap;">HTML5 media</a></td> + <td dir="rtl">يمكن لوكيل المستخدم تشغيل الوسائط ، لكنه قام بالتقدير أنه لم يتم تحميل بيانات كافية لتشغيل الوسائط حتى نهايتها دون الحاجة إلى التوقف لمزيد من التخزين المؤقت للمحتوى.</td> + </tr> + <tr> + <td>{{Event("canplaythrough")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-canplaythrough" style="white-space: nowrap;">HTML5 media</a></td> + <td dir="rtl">يمكن لوكيل المستخدم تشغيل الوسائط حتى نهايتها دون الحاجة إلى التوقف لمزيد من التخزين المؤقت للمحتوى.</td> + </tr> + <tr> + <td>{{Event("change")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM L2</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#event-input-change">HTML5</a></td> + <td dir="rtl">يتم تشغيل حدث التغيير لعناصر {{HTMLElement ("input")}} و {{HTMLElement ("select")}}} و {{HTMLElement ("textarea")}} عندما يتم الالتزام بتغيير قيمة العنصر بواسطة المستخدم.</td> + </tr> + <tr> + <td>{{Event("chargingchange")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html" style="white-space: nowrap;">Battery status</a></td> + <td dir="rtl">تبدأ البطارية أو تتوقف عن الشحن.</td> + </tr> + <tr> + <td>{{Event("chargingtimechange")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html" style="white-space: nowrap;">Battery status</a></td> + <td dir="rtl">تم تحديث السمة ChargingTime.</td> + </tr> + <tr> + <td>{{Event("click")}}</td> + <td>{{DOMxRef("MouseEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-click" style="white-space: nowrap;">DOM L3</a></td> + <td dir="rtl">تم الضغط على زر جهاز تأشير وتحريره على عنصر.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/close_websocket">close</a></code></td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td> + <td dir="rtl">تم إغلاق اتصال WebSocket.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/complete_indexedDB">complete</a></code></td> + <td></td> + <td><a href="http://www.w3.org/TR/IndexedDB/#transaction">IndexedDB</a></td> + <td dir="rtl">تمت المعاملة بنجاح.</td> + </tr> + <tr> + <td>{{Event("complete")}}</td> + <td>{{DOMxRef("OfflineAudioCompletionEvent")}} {{Deprecated_Inline}}</td> + <td>{{SpecName('Web Audio API', '#OfflineAudioCompletionEvent-section', 'OfflineAudioCompletionEvent')}}</td> + <td dir="rtl">يتم إنهاء عرض {{DOMxRef ("OfflineAudioContext")}}}.</td> + </tr> + <tr> + <td>{{Event("compositionend")}}</td> + <td>{{DOMxRef("CompositionEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-compositionend" style="white-space: nowrap;">DOM L3</a></td> + <td dir="rtl">تم الانتهاء من تكوين مقطع من النص أو إلغاؤه.</td> + </tr> + <tr> + <td>{{Event("compositionstart")}}</td> + <td>{{DOMxRef("CompositionEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-compositionstart" style="white-space: nowrap;">DOM L3</a></td> + <td dir="rtl">يتم إعداد تركيبة النص (مشابه لمفتاح الإدخال لإدخال لوحة المفاتيح ، ولكنها تعمل مع إدخالات أخرى مثل التعرف على الكلام).</td> + </tr> + <tr> + <td>{{Event("compositionupdate")}}</td> + <td>{{DOMxRef("CompositionEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-compositionupdate" style="white-space: nowrap;">DOM L3</a></td> + <td dir="rtl">تتم إضافة حرف إلى مقطع من النص الذي يتم تكوينه.</td> + </tr> + <tr> + <td>{{Event("contextmenu")}}</td> + <td>{{DOMxRef("MouseEvent")}}</td> + <td><a href="https://html.spec.whatwg.org/multipage/forms.html#context-menus">HTML5</a></td> + <td dir="rtl">يتم الضغط على الزر الأيمن للماوس (قبل عرض قائمة السياق).</td> + </tr> + <tr> + <td>{{Event("copy")}}</td> + <td>{{DOMxRef("ClipboardEvent")}} {{Experimental_Inline}}</td> + <td><a href="http://www.w3.org/TR/clipboard-apis/#copy-event">Clipboard</a></td> + <td dir="rtl">تمت إضافة النص المحدد إلى الحافظة.</td> + </tr> + <tr> + <td>{{Event("cut")}}</td> + <td>{{DOMxRef("ClipboardEvent")}} {{Experimental_Inline}}</td> + <td><a href="http://www.w3.org/TR/clipboard-apis/#cut-event">Clipboard</a></td> + <td dir="rtl">تمت إزالة تحديد النص من المستند وإضافته إلى الحافظة.</td> + </tr> + <tr> + <td>{{Event("dblclick")}}</td> + <td>{{DOMxRef("MouseEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-dblclick" style="white-space: nowrap;">DOM L3</a></td> + <td dir="rtl">يتم الضغط فوق زر جهاز تأشير مرتين على عنصر.</td> + </tr> + <tr> + <td>{{Event("devicechange")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td>{{SpecName("Media Capture")}}</td> + <td dir="rtl">يتم توصيل جهاز وسائط مثل الكاميرا أو الميكروفون أو مكبر الصوت أو إزالته من النظام.</td> + </tr> + <tr> + <td>{{Event("devicemotion")}}</td> + <td>{{DOMxRef("DeviceMotionEvent")}} {{Experimental_Inline}}</td> + <td><a class="external" href="http://dev.w3.org/geo/api/spec-source-orientation.html" lang="en" title="The 'Device Orientation Events' specification">Device Orientation Events</a></td> + <td dir="rtl">تتوفر بيانات حديثة من مستشعر الحركة.</td> + </tr> + <tr> + <td>{{Event("deviceorientation")}}</td> + <td>{{DOMxRef("DeviceOrientationEvent")}} {{Experimental_Inline}}</td> + <td><a class="external" href="http://dev.w3.org/geo/api/spec-source-orientation.html" lang="en" title="The 'Device Orientation Events' specification">Device Orientation Events</a></td> + <td dir="rtl">تتوفر بيانات حديثة من مستشعر الاتجاه.</td> + </tr> + <tr> + <td>{{Event("dischargingtimechange")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html">Battery status</a></td> + <td dir="rtl">تم تحديث الخاصية dischargingTime.</td> + </tr> + <tr> + <td><code>DOMActivate</code> {{Deprecated_Inline}}</td> + <td>{{DOMxRef("UIEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMActivate" style="white-space: nowrap;">DOM L3</a></td> + <td dir="rtl">يتم تنشيط زر أو رابط أو عنصر تغيير الحالة (استخدم {{Event ("click")}} بدلاً من ذلك).</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMAttributeNameChanged</a></code> {{Deprecated_Inline}}</td> + <td>{{DOMxRef("MutationNameEvent")}}</td> + <td><a href="http://www.w3.org/TR/2011/WD-DOM-Level-3-Events-20110531/#event-type-DOMAttributeNameChanged" style="white-space: nowrap;">DOM L3</a> Removed</td> + <td dir="rtl">تغير اسم الخاصية (استخدم <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> بدلاً من ذلك).</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMAttrModified</a></code> {{Deprecated_Inline}}</td> + <td>{{DOMxRef("MutationEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMAttrModified" style="white-space: nowrap;">DOM L3</a></td> + <td dir="rtl">تم تعديل قيمة الخاصية (استخدم <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> بدلا من ذلك).</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMCharacterDataModified</a></code> {{Deprecated_Inline}}</td> + <td>{{DOMxRef("MutationEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMCharacterDataModified" style="white-space: nowrap;">DOM L3</a></td> + <td dir="rtl">تم تغيير نص أو <a href="/en-US/docs/DOM/CharacterData">CharacterData</a> آخر (استخدم <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> بدلاً من ذلك).</td> + </tr> + <tr> + <td>{{Event("DOMContentLoaded")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-end.html#the-end">HTML5</a></td> + <td dir="rtl">انتهى تحميل المستند (ولكن ليس مصادره التابعة).</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMElementNameChanged</a></code> {{Deprecated_Inline}}</td> + <td>{{DOMxRef("MutationNameEvent")}}</td> + <td><a href="http://www.w3.org/TR/2011/WD-DOM-Level-3-Events-20110531/#event-type-DOMElementNameChanged" style="white-space: nowrap;">DOM L3</a> Removed</td> + <td> + <p dir="rtl">تم تغيير اسم العنصر (استخدم <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> بدلاً من ذلك).</p> + </td> + </tr> + <tr> + <td><code>DOMFocusIn</code> {{Deprecated_Inline}}</td> + <td>{{DOMxRef("FocusEvent")}} {{Experimental_Inline}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMFocusIn" style="white-space: nowrap;">DOM L3</a></td> + <td dir="rtl">تلقى عنصر التركيز (استخدم {{Event ("focus")}} أو {{Event ("focusin")}} بدلاً من ذلك).</td> + </tr> + <tr> + <td><code>DOMFocusOut</code> {{Deprecated_Inline}}</td> + <td>{{DOMxRef("FocusEvent")}} {{Experimental_Inline}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMFocusOut" style="white-space: nowrap;">DOM L3</a></td> + <td dir="rtl">فقد العنصر التركيز (استخدم {{Event ("blur")}} أو {{Event ("focusout")}} بدلاً من ذلك).</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeInserted</a></code> {{Deprecated_Inline}}</td> + <td>{{DOMxRef("MutationEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeInserted" style="white-space: nowrap;">DOM L3</a></td> + <td dir="rtl">تمت إضافة العقدة "node" كتابع لعقدة أخرى (استخدم <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> بدلاً من ذلك).</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeInsertedIntoDocument</a></code> {{Deprecated_Inline}}</td> + <td>{{DOMxRef("MutationEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeInsertedIntoDocument" style="white-space: nowrap;">DOM L3</a></td> + <td> + <p dir="rtl">تم إدراج عقدة "node" في المستند (استخدم <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> بدلاً من ذلك).</p> + </td> + </tr> + <tr> + <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeRemoved</a></code> {{Deprecated_Inline}}</td> + <td>{{DOMxRef("MutationEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeRemoved" style="white-space: nowrap;">DOM L3</a></td> + <td dir="rtl">تمت إزالة العقدة "node" من العقدة الأصلية (استخدم <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> بدلاً من ذلك).</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeRemovedFromDocument</a></code> {{Deprecated_Inline}}</td> + <td>{{DOMxRef("MutationEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeRemovedFromDocument" style="white-space: nowrap;">DOM L3</a></td> + <td dir="rtl">تمت إزالة عقدة "node" من المستند (استخدم <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> بدلاً من ذلك).</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMSubtreeModified</a></code> {{Deprecated_Inline}}</td> + <td>{{DOMxRef("MutationEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMSubtreeModified" style="white-space: nowrap;">DOM L3</a></td> + <td dir="rtl">حدث تغيير في المستند (استخدم <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> بدلاً من ذلك).</td> + </tr> + <tr> + <td>{{Event("drag")}}</td> + <td>{{DOMxRef("DragEvent")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-drag">HTML5</a></td> + <td dir="rtl">يتم سحب عنصر أو نص محدد (كل 350 مللي ثانية).</td> + </tr> + <tr> + <td>{{Event("dragend")}}</td> + <td>{{DOMxRef("DragEvent")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragend">HTML5</a></td> + <td dir="rtl">يتم إنهاء عملية السحب (عن طريق تحرير زر الماوس أو الضغط على مفتاح escape).</td> + </tr> + <tr> + <td>{{Event("dragenter")}}</td> + <td>{{DOMxRef("DragEvent")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragenter">HTML5</a></td> + <td dir="rtl">يدخل العنصر المسحوب أو تحديد النص في هدف إسقاط صالح.</td> + </tr> + <tr> + <td>{{Event("dragleave")}}</td> + <td>{{DOMxRef("DragEvent")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragleave">HTML5</a></td> + <td dir="rtl">العنصر المسحوب أو تحديد النص يترك هدف إفلات صالح.</td> + </tr> + <tr> + <td>{{Event("dragover")}}</td> + <td>{{DOMxRef("DragEvent")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragover">HTML5</a></td> + <td dir="rtl">يتم سحب عنصر أو نص محدد فوق هدف إسقاط صالح (يتم تشغيله كل 350 مللي ثانية).</td> + </tr> + <tr> + <td>{{Event("dragstart")}}</td> + <td>{{DOMxRef("DragEvent")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragstart">HTML5</a></td> + <td dir="rtl">يبدأ المستخدم في سحب عنصر أو تحديد نص.</td> + </tr> + <tr> + <td>{{Event("drop")}}</td> + <td>{{DOMxRef("DragEvent")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-drop">HTML5</a></td> + <td dir="rtl">يتم إسقاط عنصر على هدف إسقاط صالح.</td> + </tr> + <tr> + <td>{{Event("durationchange")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-durationchange">HTML5 media</a></td> + <td dir="rtl">تم تحديث خاصية duration.</td> + </tr> + <tr> + <td>{{Event("emptied")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-emptied">HTML5 media</a></td> + <td> + <p>أصبحت وسائل الإعلام فارغة. على سبيل المثال ، يتم تشغيل هذا الحدث إذا تم تحميل الوسائط بالفعل (أو تم تحميلها جزئيًا) ، وتم استدعاء <a href="/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" rel="internal"><code>load()</code></a> method لإعادة تحميلها.</p> + </td> + </tr> + <tr> + <td>{{Event("end_(SpeechRecognition)","end")}} {{Experimental_Inline}}</td> + <td>{{DOMxRef("Event")}}</td> + <td>{{SpecName('Web Speech API')}}</td> + <td dir="rtl">تم قطع خدمة التعرف على الكلام.</td> + </tr> + <tr> + <td>{{Event("end_(SpeechSynthesis)","end")}} {{Experimental_Inline}}</td> + <td>{{DOMxRef("SpeechSynthesisEvent")}}</td> + <td>{{SpecName("Web Speech API")}}</td> + <td dir="rtl">تم الانتهاء من نطق الكلام.</td> + </tr> + <tr> + <td>{{Event("ended")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-ended">HTML5 media</a></td> + <td dir="rtl">توقف التشغيل بسبب الوصول إلى نهاية الوسائط.</td> + </tr> + <tr> + <td>{{Event("ended_(Web_Audio)", "ended")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td>{{SpecName("Web Audio API")}}</td> + <td dir="rtl">توقف التشغيل بسبب الوصول إلى نهاية الوسائط.</td> + </tr> + <tr> + <td>{{Event("endEvent")}}</td> + <td>{{DOMxRef("TimeEvent")}}</td> + <td><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> + <td dir="rtl">ينتهي عنصر الحركة <a href="/en-US/docs/SVG/SVG_animation_with_SMIL">SMIL</a>.</td> + </tr> + <tr> + <td>{{Event("error")}}</td> + <td>{{DOMxRef("UIEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-error" style="white-space: nowrap;">DOM L3</a></td> + <td dir="rtl">فشل تحميل مصدر.</td> + </tr> + <tr> + <td>{{Event("error")}}</td> + <td>{{DOMxRef("ProgressEvent")}}</td> + <td><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> and </span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-error">XMLHttpRequest</a></td> + <td>فشل التقدم.</td> + </tr> + <tr> + <td>{{Event("error")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td> + <td dir="rtl">تم إغلاق اتصال WebSocket مع التحيز (تعذر إرسال بعض البيانات على سبيل المثال).</td> + </tr> + <tr> + <td>{{Event("error")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://dev.w3.org/html5/eventsource/">Server Sent Events</a></td> + <td dir="rtl">فشل اتصال مصدر الحدث.</td> + </tr> + <tr> + <td>{{Event("error")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td> + <td dir="rtl">تسبب الطلب بخطأ وفشل.</td> + </tr> + <tr> + <td>{{Event("error_(SpeechRecognitionError)","error")}} {{Experimental_Inline}}</td> + <td>{{DOMxRef("Event")}}</td> + <td>{{SpecName('Web Speech API')}}</td> + <td dir="rtl">يحدث خطأ في التعرف على الكلام.</td> + </tr> + <tr> + <td>{{Event("error_(SpeechSynthesisError)","error")}}</td> + <td>{{DOMxRef("SpeechSynthesisErrorEvent")}}</td> + <td>{{SpecName('Web Speech API')}}</td> + <td dir="rtl">حدث خطأ يمنع نطق الكلام بنجاح.</td> + </tr> + <tr> + <td>{{Event("focus")}}</td> + <td>{{DOMxRef("FocusEvent")}} {{Experimental_Inline}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focus" style="white-space: nowrap;">DOM L3</a></td> + <td dir="rtl">تلقى عنصر ما التركيز (لا فقاعة).</td> + </tr> + <tr> + <td>{{Event("focusin")}}</td> + <td>{{DOMxRef("FocusEvent")}} {{Experimental_Inline}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusIn" style="white-space: nowrap;">DOM L3</a></td> + <td dir="rtl">عنصر ما على وشك تلقي التركيز (فقاعات).</td> + </tr> + <tr> + <td>{{Event("focusout")}}</td> + <td>{{DOMxRef("FocusEvent")}} {{Experimental_Inline}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusout" style="white-space: nowrap;">DOM L3</a></td> + <td dir="rtl">عنصر ما على وشك فقدان التركيز (الفقاعات).</td> + </tr> + <tr> + <td>{{Event("fullscreenchange")}}{{gecko_minversion_inline("9")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api">Full Screen</a></td> + <td dir="rtl">تم تبديل عنصر إلى وضع ملء الشاشة أو منه.</td> + </tr> + <tr> + <td>{{Event("fullscreenerror")}}{{gecko_minversion_inline("9")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api">Full Screen</a></td> + <td dir="rtl">كان من المستحيل التبديل إلى وضع ملء الشاشة لأسباب فنية أو بسبب رفض الإذن.</td> + </tr> + <tr> + <td>{{Event("gamepadconnected")}}</td> + <td>{{DOMxRef("GamepadEvent")}} {{Experimental_Inline}}</td> + <td><a href="http://www.w3.org/TR/gamepad/#the-gamepadconnected-event">Gamepad</a></td> + <td dir="rtl">تم توصيل لوحة ألعاب.</td> + </tr> + <tr> + <td>{{Event("gamepaddisconnected")}}</td> + <td>{{DOMxRef("GamepadEvent")}} {{Experimental_Inline}}</td> + <td><a href="http://www.w3.org/TR/gamepad/#the-gamepaddisconnected-event">Gamepad</a></td> + <td dir="rtl">تم قطع اتصال لوحة الألعاب.</td> + </tr> + <tr> + <td>{{Event("gotpointercapture")}}</td> + <td>{{DOMxRef("PointerEvent")}}</td> + <td><a href="http://www.w3.org/TR/pointerevents/#the-gotpointercapture-event">Pointer Events</a></td> + <td dir="rtl">يتلقى العنصر التقاط مؤشر.</td> + </tr> + <tr> + <td>{{Event("hashchange")}}</td> + <td>{{DOMxRef("HashChangeEvent")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-hashchange">HTML5</a></td> + <td dir="rtl">تم تغيير جزء المعرف من عنوان URL (جزء عنوان URL الذي بعد #).</td> + </tr> + <tr> + <td>{{Event("lostpointercapture")}}</td> + <td>{{DOMxRef("PointerEvent")}}</td> + <td><a href="http://www.w3.org/TR/pointerevents/#the-lostpointercapture-event">Pointer Events</a></td> + <td dir="rtl">فقد العنصر التقاط مؤشر.</td> + </tr> + <tr> + <td>{{Event("input")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.w3.org/TR/html5/forms.html#common-event-behaviors">HTML5</a></td> + <td dir="rtl">يتم تعديل قيمة عنصر ما أو تعديل محتوى عنصر ذو خاصية <a href="/en-US/docs/DOM/Element.contentEditable">contenteditable</a>.</td> + </tr> + <tr> + <td>{{Event("invalid")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#constraint-validation">HTML5</a></td> + <td dir="rtl">تم التحقق من عنصر قابل للإرسال ولا يستوفي قيوده.</td> + </tr> + <tr> + <td>{{Event("keydown")}}</td> + <td>{{DOMxRef("KeyboardEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keydown" style="white-space: nowrap;">DOM L3</a></td> + <td dir="rtl">تم الضغط على مفتاح.</td> + </tr> + <tr> + <td>{{Event("keypress")}} {{Deprecated_Inline}}</td> + <td>{{DOMxRef("KeyboardEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keypress" style="white-space: nowrap;">DOM L3</a></td> + <td dir="rtl">يتم الضغط على مفتاح، وينتج هذا المفتاح عادة قيمة حرفية (استخدم حدث input بدلاً من ذلك).</td> + </tr> + <tr> + <td>{{Event("keyup")}}</td> + <td>{{DOMxRef("KeyboardEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keyup" style="white-space: nowrap;">DOM L3</a></td> + <td dir="rtl">تم تحرير مفتاح.</td> + </tr> + <tr> + <td>{{Event("languagechange")}} {{Experimental_Inline}}</td> + <td>{{DOMxRef("Event")}}</td> + <td>{{ SpecName('HTML5.1', '#dom-navigator-languages', 'NavigatorLanguage.languages') }}</td> + <td dir="rtl">تغيرت اللغات المفضلة للمستخدم.</td> + </tr> + <tr> + <td>{{Event("levelchange")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html">Battery status</a></td> + <td dir="rtl">تم تحديث خاصية المستوى level.</td> + </tr> + <tr> + <td>{{Event("load")}}</td> + <td>{{DOMxRef("UIEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-load" style="white-space: nowrap;">DOM L3</a></td> + <td dir="rtl">انتهى تحميل المصدر والمصادر التابعة له.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/load_(ProgressEvent)">load</a></code></td> + <td>{{DOMxRef("ProgressEvent")}}</td> + <td><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> <span>and </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-load">XMLHttpRequest</a></td> + <td dir="rtl">كان التقدم ناجح.</td> + </tr> + <tr> + <td>{{Event("loadeddata")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-loadeddata">HTML5 media</a></td> + <td dir="rtl">تم الانتهاء من تحميل الإطار الأول للوسائط.</td> + </tr> + <tr> + <td>{{Event("loadedmetadata")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-loadedmetadata">HTML5 media</a></td> + <td dir="rtl">تم تحميل البيانات الوصفية.</td> + </tr> + <tr> + <td>{{Event("loadend")}}</td> + <td>{{DOMxRef("ProgressEvent")}}</td> + <td><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> <span>and </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-loadend">XMLHttpRequest</a></td> + <td> + <p>توقف التقدم (بعد إرسال "error" أو "abort" أو "load").</p> + </td> + </tr> + <tr> + <td>{{Event("loadstart")}}</td> + <td>{{DOMxRef("ProgressEvent")}}</td> + <td><a href="http://www.w3.org/TR/progress-events/">Progress </a><span>and </span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-loadstart">XMLHttpRequest</a></td> + <td dir="rtl">بدأ التقدم.</td> + </tr> + <tr> + <td>{{Event("mark")}} {{Experimental_Inline}}</td> + <td>{{DOMxRef("SpeechSynthesisEvent")}}</td> + <td>{{SpecName('Web Speech API')}}</td> + <td dir="rtl">يصل الكلام المنطوق إلى علامة "SSML "mark مسماة.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/message_websocket">message</a></code></td> + <td>{{DOMxRef("MessageEvent")}}</td> + <td><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td> + <td dir="rtl">يتم استلام رسالة من خلال WebSocket.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/message_webworker">message</a></code></td> + <td>{{DOMxRef("MessageEvent")}}</td> + <td><a href="http://www.w3.org/TR/workers/#communicating-with-a-dedicated-worker">Web Workers</a></td> + <td dir="rtl">يتم تلقي رسالة من Web Worker.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/message_webmessaging">message</a></code></td> + <td>{{DOMxRef("MessageEvent")}}</td> + <td><a href="http://www.w3.org/TR/webmessaging/">Web Messaging</a></td> + <td> + <p>يتم تلقي رسالة من إطار تابع (i) أو من نافذة أصل.</p> + </td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/message_serversentevents">message</a></code></td> + <td>{{DOMxRef("MessageEvent")}}</td> + <td><a href="http://dev.w3.org/html5/eventsource/">Server Sent Events</a></td> + <td dir="rtl">يتم تلقي رسالة من خلال مصدر الحدث.</td> + </tr> + <tr> + <td>{{Event("messageerror")}}</td> + <td>{{DOMxRef("MessageEvent")}}</td> + <td>{{DOMxRef("MessagePort")}}, <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>, <a href="/en-US/docs/Web/API/Broadcast_Channel_API">Broadcast Channel</a>, {{DOMxRef("Window")}}</td> + <td dir="rtl">يظهر خطأ في الرسالة عندما يتم تلقي رسالة بواسطة Object.</td> + </tr> + <tr> + <td>{{Event("message_(ServiceWorker)","message")}} {{Experimental_Inline}}</td> + <td>{{DOMxRef("ServiceWorkerMessageEvent")}} or {{DOMxRef("ExtendableMessageEvent")}}, depending on context.</td> + <td><a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a></td> + <td dir="rtl">يتم تلقي رسالة من عامل خدمة ، أو تلقي رسالة في عامل خدمة من سياق آخر.</td> + </tr> + <tr> + <td>{{Event("mousedown")}}</td> + <td>{{DOMxRef("MouseEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mousedown" style="white-space: nowrap;">DOM L3</a></td> + <td dir="rtl">يتم الضغط على زر جهاز التأشير (عادة الماوس/الفأرة) على عنصر.</td> + </tr> + <tr> + <td>{{Event("mouseenter")}}</td> + <td>{{DOMxRef("MouseEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseenter" style="white-space: nowrap;">DOM L3</a></td> + <td dir="rtl">يتم نقل جهاز التأشير إلى العنصر المُرفق به المستمع.</td> + </tr> + <tr> + <td>{{Event("mouseleave")}}</td> + <td>{{DOMxRef("MouseEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseleave" style="white-space: nowrap;">DOM L3</a></td> + <td dir="rtl">يتم نقل جهاز التأشير بعيدا عن العنصر المرفق به المستمع.</td> + </tr> + <tr> + <td>{{Event("mousemove")}}</td> + <td>{{DOMxRef("MouseEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mousemove" style="white-space: nowrap;">DOM L3</a></td> + <td dir="rtl">يتم نقل جهاز التأشير فوق عنصر.</td> + </tr> + <tr> + <td>{{Event("mouseout")}}</td> + <td>{{DOMxRef("MouseEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseout" style="white-space: nowrap;">DOM L3</a></td> + <td dir="rtl">يتم تحريك جهاز التأشير بعيدا عن العنصر الذي يحتوي على المستمع مرفقا به أو بعيدا عن أحد تابعيه.</td> + </tr> + <tr> + <td>{{Event("mouseover")}}</td> + <td>{{DOMxRef("MouseEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseover" style="white-space: nowrap;">DOM L3</a></td> + <td dir="rtl">يتم نقل جهاز التأشير إلى العنصر الذي يحتوي على المستمع مرفقا به أو على أحد تابعيه.</td> + </tr> + <tr> + <td>{{Event("mouseup")}}</td> + <td>{{DOMxRef("MouseEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseup" style="white-space: nowrap;">DOM L3</a></td> + <td dir="rtl">يتم تحرير زر جهاز التأشير فوق عنصر.</td> + </tr> + <tr> + <td>{{Event("nomatch")}} {{Experimental_Inline}}</td> + <td>{{DOMxRef("SpeechRecognitionEvent")}}</td> + <td>{{SpecName('Web Speech API')}}</td> + <td dir="rtl">تقوم خدمة التعرف على الكلام بإرجاع نتيجة نهائية مع عدم التعرف بشكل ملحوظ.</td> + </tr> + <tr> + <td>{{Event("notificationclick")}}</td> + <td>{{DOMxRef("NotificationEvent")}} {{Experimental_Inline}}</td> + <td>{{SpecName('Web Notifications','#dom-serviceworkerglobalscope-onnotificationclick','onnotificationclick')}}</td> + <td dir="rtl"> إشعار النظام الذي تم إنتاجه بواسطة عندما تم الضغط على {{DOMxRef ("ServiceWorkerRegistration.showNotification ()")}}.</td> + </tr> + <tr> + <td>{{Event("offline")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#event-offline">HTML5 offline</a></td> + <td dir="rtl">فقد المتصفح الوصول إلى الشبكة.</td> + </tr> + <tr> + <td>{{Event("online")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#event-online">HTML5 offline</a></td> + <td dir="rtl">لقد تمكن المتصفح من الوصول إلى الشبكة (ولكن قد يتعذر الوصول إلى مواقع ويب معينة).</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/open_websocket">open</a></code></td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td> + <td dir="rtl">تم إنشاء اتصال WebSocket.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/open_serversentevents">open</a></code></td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://dev.w3.org/html5/eventsource/">Server Sent Events</a></td> + <td dir="rtl">تم إنشاء اتصال مصدر حدث.</td> + </tr> + <tr> + <td>{{Event("orientationchange")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.w3.org/TR/screen-orientation/">Screen Orientation</a></td> + <td dir="rtl">تم تغيير اتجاه الجهاز (عمودي / أفقي).</td> + </tr> + <tr> + <td>{{Event("pagehide")}}</td> + <td>{{DOMxRef("PageTransitionEvent")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-pagehide">HTML5</a></td> + <td dir="rtl">يتم قطع إدخال سجل الجلسة من.</td> + </tr> + <tr> + <td>{{Event("pageshow")}}</td> + <td>{{DOMxRef("PageTransitionEvent")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-pageshow">HTML5</a></td> + <td dir="rtl">يتم قطع إدخال محفوظات الجلسة إلى.</td> + </tr> + <tr> + <td>{{Event("paste")}}</td> + <td>{{DOMxRef("ClipboardEvent")}} {{Experimental_Inline}}</td> + <td><a href="http://www.w3.org/TR/clipboard-apis/#paste-event">Clipboard</a></td> + <td dir="rtl">تم نقل البيانات من حافظة النظام إلى المستند.</td> + </tr> + <tr> + <td>{{Event("pause")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-pause">HTML5 media</a></td> + <td dir="rtl">تم إيقاف التشغيل مؤقتًا.</td> + </tr> + <tr> + <td>{{Event("pause_(SpeechSynthesis)", "pause")}} {{Experimental_Inline}}</td> + <td>{{DOMxRef("SpeechSynthesisEvent")}}</td> + <td>{{SpecName('Web Speech API')}}</td> + <td dir="rtl">الكلام متوقف مؤقتا جزئيا.</td> + </tr> + <tr> + <td>{{Event("pointercancel")}}</td> + <td>{{DOMxRef("PointerEvent")}}</td> + <td><a href="http://www.w3.org/TR/pointerevents/#the-pointercancel-event">Pointer Events</a></td> + <td dir="rtl">من غير المحتمل أن ينتج عن المؤشر أي أحداث أخرى.</td> + </tr> + <tr> + <td>{{Event("pointerdown")}}</td> + <td>{{DOMxRef("PointerEvent")}}</td> + <td><a href="http://www.w3.org/TR/pointerevents/#the-pointerdown-event">Pointer Events</a></td> + <td dir="rtl">يدخل المؤشر في حالة الأزرار النشطة.</td> + </tr> + <tr> + <td>{{Event("pointerenter")}}</td> + <td>{{DOMxRef("PointerEvent")}}</td> + <td><a href="http://www.w3.org/TR/pointerevents/#the-pointerenter-event">Pointer Events</a></td> + <td dir="rtl">يتم نقل جهاز التأشير داخل حدود اختبار الهدف.</td> + </tr> + <tr> + <td>{{Event("pointerleave")}}</td> + <td>{{DOMxRef("PointerEvent")}}</td> + <td><a href="http://www.w3.org/TR/pointerevents/#the-pointerleave-event">Pointer Events</a></td> + <td dir="rtl">يتم نقل جهاز التأشير خارج حدود اختبار الهدف.</td> + </tr> + <tr> + <td>{{Event("pointerlockchange")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.w3.org/TR/pointerlock/#pointerlockchange-and-pointerlockerror-events">Pointer Lock</a></td> + <td dir="rtl">تم قفل المؤشر أو تحريره.</td> + </tr> + <tr> + <td>{{Event("pointerlockerror")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.w3.org/TR/pointerlock/#pointerlockchange-and-pointerlockerror-events">Pointer Lock</a></td> + <td dir="rtl">كان من المستحيل قفل المؤشر لأسباب فنية أو بسبب رفض الإذن.</td> + </tr> + <tr> + <td>{{Event("pointermove")}}</td> + <td>{{DOMxRef("PointerEvent")}}</td> + <td><a href="http://www.w3.org/TR/pointerevents/#the-pointermove-event">Pointer Events</a></td> + <td dir="rtl">قام المؤشر بتغيير الإحداثيات.</td> + </tr> + <tr> + <td>{{Event("pointerout")}}</td> + <td>{{DOMxRef("PointerEvent")}}</td> + <td><a href="http://www.w3.org/TR/pointerevents/#the-pointerout-event">Pointer Events</a></td> + <td> + <p dir="rtl">انتقل جهاز التأشير خارج حدود اختبار الهدف أو يترك نطاق الهدف الذي يمكن التقاطه.</p> + </td> + </tr> + <tr> + <td></td> + <td></td> + <td><a href="http://www.w3.org/TR/pointerevents/#the-pointerover-event">Pointer Events</a></td> + <td dir="rtl">يتم نقل جهاز التأشير إلى حدود اختبار الهدف.</td> + </tr> + <tr> + <td>{{Event("pointerup")}}</td> + <td>{{DOMxRef("PointerEvent")}}</td> + <td><a href="http://www.w3.org/TR/pointerevents/#the-pointerup-event">Pointer Events</a></td> + <td dir="rtl">يترك المؤشر حالة الأزرار النشطة.</td> + </tr> + <tr> + <td>{{Event("play")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-play">HTML5 media</a></td> + <td dir="rtl">بدأ التشغيل.</td> + </tr> + <tr> + <td>{{Event("playing")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-playing">HTML5 media</a></td> + <td dir="rtl">التشغيل جاهز للبدء بعد توقفه أو تأجيله بسبب نقص البيانات.</td> + </tr> + <tr> + <td>{{Event("popstate")}}</td> + <td>{{DOMxRef("PopStateEvent")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-popstate">HTML5</a></td> + <td dir="rtl">يتم نقل إدخال محفوظات الجلسة إلى (في حالات معينة).</td> + </tr> + <tr> + <td>{{Event("progress")}}</td> + <td>{{DOMxRef("ProgressEvent")}}</td> + <td><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> <span>and </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-progress">XMLHttpRequest</a></td> + <td dir="rtl">جاري العمل.</td> + </tr> + <tr> + <td>{{Event("push")}}</td> + <td>{{DOMxRef("PushEvent")}} {{Experimental_Inline}}</td> + <td>{{SpecName("Push API")}}</td> + <td dir="rtl">تلقى <a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker</a> رسالة.</td> + </tr> + <tr> + <td>{{Event("pushsubscriptionchange")}}</td> + <td>{{DOMxRef("PushEvent")}} {{Experimental_Inline}}</td> + <td>{{SpecName("Push API")}}</td> + <td dir="rtl">انتهت صلاحية <a href="/en-US/docs/Web/API/PushSubscription">PushSubscription</a> .</td> + </tr> + <tr> + <td>{{Event("ratechange")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-ratechange">HTML5 media</a></td> + <td dir="rtl">تغير معدل التشغيل.</td> + </tr> + <tr> + <td>{{Event("readystatechange")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><span>HTML5 <span>and </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-readystatechange">XMLHttpRequest</a></td> + <td dir="rtl">تم تغيير خاصية readyState للمستند.</td> + </tr> + <tr> + <td>{{Event("repeatEvent")}}</td> + <td>{{DOMxRef("TimeEvent")}}</td> + <td><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> + <td dir="rtl">يتم تكرار عنصر الرسوم المتحركة SMIL animation .</td> + </tr> + <tr> + <td>{{Event("reset")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM L2</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#form-submission-0#resetting-a-form">HTML5</a></td> + <td dir="rtl">يتم إعادة تعيين النموذج.</td> + </tr> + <tr> + <td>{{Event("resize")}}</td> + <td>{{DOMxRef("UIEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-resize" style="white-space: nowrap;">DOM L3</a></td> + <td dir="rtl">تم تغيير حجم عرض المستند.</td> + </tr> + <tr> + <td>{{Event("resourcetimingbufferfull")}}</td> + <td>{{DOMxRef("Performance")}}</td> + <td><a href="https://w3c.github.io/resource-timing/#dom-performance-onresourcetimingbufferfull">Resource Timing</a></td> + <td dir="rtl">المخزن المؤقت لتوقيت مصدر المتصفح ممتلئ.</td> + </tr> + <tr> + <td>{{Event("result")}} {{Experimental_Inline}}</td> + <td>{{DOMxRef("SpeechRecognitionEvent")}} {{Experimental_Inline}}</td> + <td>{{SpecName('Web Speech API')}}</td> + <td dir="rtl">تُعيد خدمة التعرف على الكلام نتيجة - تم التعرف بشكل إيجابي على كلمة أو عبارة وتم إعادة توصيلها إلى التطبيق.</td> + </tr> + <tr> + <td>{{Event("resume")}} {{Experimental_Inline}}</td> + <td>{{DOMxRef("SpeechSynthesisEvent")}} {{Experimental_Inline}}</td> + <td>{{SpecName('Web Speech API')}}</td> + <td dir="rtl">يتم استئناف الكلام المتوقف مؤقتا.</td> + </tr> + <tr> + <td>{{Event("scroll")}}</td> + <td>{{DOMxRef("UIEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-scroll" style="white-space: nowrap;">DOM L3</a></td> + <td dir="rtl">تم تمرير عرض المستند أو عنصر.</td> + </tr> + <tr> + <td>{{Event("seeked")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-seeked">HTML5 media</a></td> + <td dir="rtl">اكتملت عملية البحث.</td> + </tr> + <tr> + <td>{{Event("seeking")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-seeking">HTML5 media</a></td> + <td dir="rtl">بدأت عملية البحث.</td> + </tr> + <tr> + <td>{{Event("select")}}</td> + <td>{{DOMxRef("UIEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-select" style="white-space: nowrap;">DOM L3</a></td> + <td dir="rtl">يتم تحديد بعض النص.</td> + </tr> + <tr> + <td>{{Event("selectstart")}} {{Experimental_Inline}}</td> + <td>{{DOMxRef("Event")}}</td> + <td>{{ SpecName('Selection API')}}</td> + <td dir="rtl">بدأ الاختيار للتو.</td> + </tr> + <tr> + <td>{{Event("selectionchange")}} {{Experimental_Inline}}</td> + <td>{{DOMxRef("Event")}}</td> + <td>{{ SpecName('Selection API')}}</td> + <td dir="rtl">تم تغيير التحديد في المستند.</td> + </tr> + <tr> + <td>{{Event("show")}}</td> + <td>{{DOMxRef("MouseEvent")}}</td> + <td><a href="http://www.w3.org/TR/html5/interactive-elements.html#context-menus">HTML5</a></td> + <td> + <p dir="rtl">تم إطلاق حدث <code>contextmenu</code> (أو تم عمل فقاعة) على عنصر له خاصية <a href="/en-US/docs/DOM/element.contextmenu">contextmenu</a>.</p> + </td> + </tr> + <tr> + <td>{{Event("slotchange")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td>{{ SpecName('DOM WHATWG')}}</td> + <td dir="rtl">تم تغيير محتويات "Node" العقدة {{DOMxRef ("HTMLSlotElement")}} ({{htmlelement ("slot")}}).</td> + </tr> + <tr> + <td>{{Event("soundend")}} {{Experimental_Inline}}</td> + <td>{{DOMxRef("Event")}}</td> + <td>{{SpecName('Web Speech API')}}</td> + <td dir="rtl">توقف اكتشاف أي صوت - سواء كان يمكن التعرف عليه أم لا.</td> + </tr> + <tr> + <td>{{Event("soundstart")}} {{Experimental_Inline}}</td> + <td>{{DOMxRef("Event")}}</td> + <td>{{SpecName('Web Speech API')}}</td> + <td dir="rtl">تم اكتشاف أي صوت - سواء كان يمكن التعرف عليه أم لا .</td> + </tr> + <tr> + <td>{{Event("speechend")}} {{Experimental_Inline}}</td> + <td>{{DOMxRef("Event")}}</td> + <td>{{SpecName('Web Speech API')}}</td> + <td dir="rtl">توقف التعرف على الكلام الذي يتم التعرف عليه بواسطة خدمة التعرف على الكلام.</td> + </tr> + <tr> + <td>{{Event("speechstart")}} {{Experimental_Inline}}</td> + <td>{{DOMxRef("Event")}}</td> + <td>{{SpecName('Web Speech API')}}</td> + <td dir="rtl">الصوت الذي تتعرف عليه خدمة التعرف على الكلام عند التقاط الكلام.</td> + </tr> + <tr> + <td>{{Event("stalled")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-stalled">HTML5 media</a></td> + <td dir="rtl">يحاول وكيل المستخدم جلب بيانات الوسائط ، ولكن البيانات لا تأتي بشكل غير متوقع.</td> + </tr> + <tr> + <td>{{Event("start_(SpeechRecognition)","start")}} {{Experimental_Inline}}</td> + <td>{{DOMxRef("Event")}}</td> + <td>{{SpecName('Web Speech API')}}</td> + <td dir="rtl">بدأت خدمة التعرف على الكلام في الاستماع إلى الصوت الوارد بقصد التعرف على القواعد النحوية المرتبطة ب<code>SpeechRecognition</code>.</td> + </tr> + <tr> + <td>{{Event("start_(SpeechSynthesis)","start")}}</td> + <td>{{DOMxRef("SpeechSynthesisEvent")}}</td> + <td>{{SpecName('Web Speech API')}}</td> + <td dir="rtl">بدأ نطق الكلام.</td> + </tr> + <tr> + <td>{{Event("storage")}}</td> + <td>{{DOMxRef("StorageEvent")}}</td> + <td><a href="http://www.w3.org/TR/webstorage/#the-storage-event">Web Storage</a></td> + <td dir="rtl">تم تغيير مكان التخزين (<a href="/en-US/docs/DOM/Storage#localStorage">localStorage</a> or <a href="/en-US/docs/DOM/Storage#sessionStorage">sessionStorage</a>) .</td> + </tr> + <tr> + <td>{{Event("submit")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM L2</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#form-submission-algorithm">HTML5</a></td> + <td dir="rtl">تم تسليم نموذج.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/success_indexedDB">success</a></code></td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td> + <td dir="rtl">تم إكمال الطلب بنجاح.</td> + </tr> + <tr> + <td>{{Event("suspend")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-suspend">HTML5 media</a></td> + <td dir="rtl">تم إيقاف تحميل بيانات الوسائط.</td> + </tr> + <tr> + <td>{{Event("SVGAbort")}}</td> + <td>{{DOMxRef("SVGEvent")}}</td> + <td><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> + <td dir="rtl">تم إيقاف تحميل الصفحة قبل تحميل <a href="/en-US/docs/SVG">SVG</a> .</td> + </tr> + <tr> + <td>{{Event("SVGError")}}</td> + <td>{{DOMxRef("SVGEvent")}}</td> + <td><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> + <td dir="rtl">حدث خطأ قبل تحميل <a href="/en-US/docs/SVG">SVG</a>.</td> + </tr> + <tr> + <td>{{Event("SVGLoad")}}</td> + <td>{{DOMxRef("SVGEvent")}}</td> + <td><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> + <td dir="rtl">تم تحميل مستند <a href="/en-US/docs/SVG">SVG</a> وتحليله .</td> + </tr> + <tr> + <td>{{Event("SVGResize")}}</td> + <td>{{DOMxRef("SVGEvent")}}</td> + <td><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> + <td dir="rtl">يتم تغيير حجم مستند <a href="/en-US/docs/SVG">SVG</a>.</td> + </tr> + <tr> + <td>{{Event("SVGScroll")}}</td> + <td>{{DOMxRef("SVGEvent")}}</td> + <td><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> + <td dir="rtl">يتم تمرير وتصفح مستند <a href="/en-US/docs/SVG">SVG</a>.</td> + </tr> + <tr> + <td>{{Event("SVGUnload")}}</td> + <td>{{DOMxRef("SVGEvent")}}</td> + <td><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> + <td dir="rtl">تمت إزالة مستند <a href="/en-US/docs/SVG">SVG</a> من نافذة أو إطار.</td> + </tr> + <tr> + <td>{{Event("SVGZoom")}}</td> + <td>{{DOMxRef("SVGZoomEvent")}}</td> + <td><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> + <td dir="rtl">يتم تكبير مستند <a href="/en-US/docs/SVG">SVG</a>.</td> + </tr> + <tr> + <td>{{Event("timeout")}}</td> + <td>{{DOMxRef("ProgressEvent")}}</td> + <td><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-timeout">XMLHttpRequest</a></td> + <td></td> + </tr> + <tr> + <td>{{Event("timeupdate")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-timeupdate">HTML5 media</a></td> + <td dir="rtl">تم تحديث الوقت المشار إليه بواسطة خاصية currentTime.</td> + </tr> + <tr> + <td>{{Event("touchcancel")}}</td> + <td>{{DOMxRef("TouchEvent")}}</td> + <td><a href="http://www.w3.org/TR/touch-events/">Touch Events</a></td> + <td dir="rtl">تم تعطيل نقطة اتصال بطريقة خاصة بالتنفيذ (الكثير من نقاط الاتصال ، على سبيل المثال).</td> + </tr> + <tr> + <td>{{Event("touchend")}}</td> + <td>{{DOMxRef("TouchEvent")}}</td> + <td><a href="http://www.w3.org/TR/touch-events/#the-touchend-event">Touch Events</a></td> + <td dir="rtl">تتم إزالة نقطة اتصال من سطح مساحة اللمس.</td> + </tr> + <tr> + <td>{{Event("touchmove")}}</td> + <td>{{DOMxRef("TouchEvent")}}</td> + <td><a href="http://www.w3.org/TR/touch-events/#the-touchmove-event">Touch Events</a></td> + <td dir="rtl">يتم تحريك نقطة اتصال على طول سطح اللمس.</td> + </tr> + <tr> + <td>{{Event("touchstart")}}</td> + <td>{{DOMxRef("TouchEvent")}}</td> + <td><a href="http://www.w3.org/TR/touch-events/#the-touchstart---------event">Touch Events</a></td> + <td dir="rtl">يتم وضع نقطة اتصال على سطح اللمس.</td> + </tr> + <tr> + <td>{{Event("transitionend")}}</td> + <td>{{DOMxRef("TransitionEvent")}} {{Experimental_Inline}}</td> + <td><a href="http://www.w3.org/TR/css3-transitions/#transition-events">CSS Transitions</a></td> + <td dir="rtl">تم إكمال <a href="/en-US/docs/CSS/CSS_transitions">CSS transition</a> .</td> + </tr> + <tr> + <td>{{Event("unload")}}</td> + <td>{{DOMxRef("UIEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-unload" style="white-space: nowrap;">DOM L3</a></td> + <td dir="rtl">يتم إلغاء تحميل المستند أو المصدر التابع.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/upgradeneeded_indexedDB">upgradeneeded</a></code></td> + <td></td> + <td><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td> + <td dir="rtl">جرت محاولة لفتح قاعدة بيانات برقم إصدار أعلى من نسختها الحالية. تم إنشاء معاملة تغيير الإصدار <code>versionchange</code> ..</td> + </tr> + <tr> + <td>{{Event("userproximity")}}</td> + <td>{{DOMxRef("UserProximityEvent")}} {{Experimental_Inline}}</td> + <td>{{SpecName("Proximity Events")}}</td> + <td dir="rtl">تتوفر بيانات حديثة من مستشعر القرب (يشير إلى ما إذا كان ال Object <code>near</code> بالقرب من الجهاز أم لا).</td> + </tr> + <tr> + <td>{{Event("voiceschanged")}} {{Experimental_Inline}}</td> + <td>{{DOMxRef("Event")}}</td> + <td>{{SpecName('Web Speech API')}}</td> + <td dir="rtl">قائمة الأوبجكتس {{DOMxRef ("SpeechSynthesisVoice")}} التي سيتم إرجاعها بواسطة method {{DOMxRef ("SpeechSynthesis.getVoices ()")}} قد تغيرت (عندما يكون {{Event ("voiceschanged")}} الحدث قد تم إطلاقه.)</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/versionchange_indexedDB">versionchange</a></code></td> + <td></td> + <td><a href="http://www.w3.org/TR/IndexedDB/#database-interface">IndexedDB</a></td> + <td dir="rtl">اكتملت معاملة versionchange.</td> + </tr> + <tr> + <td>{{Event("visibilitychange")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.w3.org/TR/page-visibility/#sec-visibilitychange-event">Page visibility</a></td> + <td dir="rtl">أصبح محتوى علامة التبويب مرئيًا أو تم إخفاؤه.</td> + </tr> + <tr> + <td>{{Event("volumechange")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-volumechange">HTML5 media</a></td> + <td dir="rtl">تم تغيير الصوت.</td> + </tr> + <tr> + <td>{{Event("waiting")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-waiting">HTML5 media</a></td> + <td dir="rtl">توقف التشغيل بسبب نقص مؤقت في البيانات.</td> + </tr> + <tr> + <td>{{Event("wheel")}}</td> + <td>{{DOMxRef("WheelEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-wheel" style="white-space: nowrap;">DOM L3</a></td> + <td dir="rtl">يتم تدوير زر عجلة جهاز التأشير في أي اتجاه.</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="أحداث_غير_قياسية">أحداث غير قياسية</h2> + +<div style="overflow: auto;"> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">اسم الحدث</th> + <th scope="col">نوع الحدث</th> + <th scope="col">تخصيص</th> + <th dir="rtl" scope="col">يُُطلق عندما...</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{Event("afterscriptexecute")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><em>Mozilla Specific</em></td> + <td dir="rtl">تم تنفيذ نص.</td> + </tr> + <tr> + <td>{{Event("beforescriptexecute")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><em>Mozilla Specific</em></td> + <td dir="rtl">النص على وشك التنفيذ.</td> + </tr> + <tr> + <td>{{Event("beforeinstallprompt")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><em>Chrome specific</em></td> + <td dir="rtl">تتم مطالبة من قبل المستخدم بحفظ موقع ويب على شاشة رئيسية على الهاتف الجوال.</td> + </tr> + <tr> + <td>{{Event("cardstatechange")}}</td> + <td></td> + <td><em>Firefox OS specific</em></td> + <td dir="rtl">تقوم الخاصية {{DOMxRef("MozMobileConnection.cardState")}} بتغيير قيمة.</td> + </tr> + <tr> + <td>{{Event("change")}}</td> + <td>{{DOMxRef("DeviceStorageChangeEvent")}}</td> + <td><em>Firefox OS specific</em></td> + <td dir="rtl">يتم إطلاق هذا الحدث في كل مرة يتم فيها إنشاء ملف أو تعديله أو حذفه في منطقة تخزين معينة.</td> + </tr> + <tr> + <td>{{Event("connectionInfoUpdate")}}</td> + <td></td> + <td><em>Firefox OS specific</em></td> + <td dir="rtl">تم تحديث المعلومات حول قوة الإشارة وسرعة الارتباط.</td> + </tr> + <tr> + <td>{{Event("cfstatechange")}}</td> + <td></td> + <td><em>Firefox OS specific</em></td> + <td dir="rtl">تتغير حالة إعادة توجيه الاتصال.</td> + </tr> + <tr> + <td>{{Event("datachange")}}</td> + <td></td> + <td><em>Firefox OS specific</em></td> + <td dir="rtl">يقوم ال Object {{DOMxRef("MozMobileConnection.data")}} بتغيير قيمة.</td> + </tr> + <tr> + <td>{{Event("dataerror")}}</td> + <td></td> + <td><em>Firefox OS specific</em></td> + <td dir="rtl">يتلقى ال Object {{DOMxRef("MozMobileConnection.data")}} خطأ من <abbr title="Radio Interface Layer">RIL</abbr>.</td> + </tr> + <tr> + <td>{{Event("DOMMouseScroll")}} {{Deprecated_Inline}}</td> + <td></td> + <td><em>Mozilla specific</em></td> + <td dir="rtl">يتم تدوير زر عجلة جهاز التأشير (<code>detail</code> الخاصية هي عدد من الأسطر). (استخدم بدلا {{Event("wheel")}})</td> + </tr> + <tr> + <td><code>dragdrop</code> {{Deprecated_Inline}}</td> + <td><code>DragEvent</code></td> + <td><em>Mozilla specific</em></td> + <td dir="rtl">تم إسقاط عنصر (استخدم بدلا {{Event("drop")}}).</td> + </tr> + <tr> + <td><code>dragexit</code> {{Deprecated_Inline}}</td> + <td><code>DragEvent</code></td> + <td><em>Mozilla specific</em></td> + <td dir="rtl">جاري إنهاء عملية السحب (استخدم بدلا {{Event("dragend")}}).</td> + </tr> + <tr> + <td><code>draggesture</code> {{Deprecated_Inline}}</td> + <td><code>DragEvent</code></td> + <td><em>Mozilla specific</em></td> + <td dir="rtl">يبدأ المستخدم في سحب عنصر أو تحديد نص (استخدم بدل {{Event("dragstart")}}).</td> + </tr> + <tr> + <td>{{Event("icccardlockerror")}}</td> + <td></td> + <td><em>Firefox OS specific</em></td> + <td dir="rtl">فشلت احدى ال methods هذه {{DOMxRef("MozMobileConnection.unlockCardLock()")}} أو {{DOMxRef("MozMobileConnection.setCardLock()")}} .</td> + </tr> + <tr> + <td>{{Event("iccinfochange")}}</td> + <td></td> + <td><em>Firefox OS specific</em></td> + <td dir="rtl">تغير ال Object {{DOMxRef("MozMobileConnection.iccInfo")}} .</td> + </tr> + <tr> + <td>{{Event("localized")}}</td> + <td></td> + <td><em><a href="https://github.com/fabi1cazenave/webL10n">Mozilla Specific</a></em></td> + <td dir="rtl">تم تحديد موقع الصفحة باستخدام الخصائص <code>data-l10n-*</code> .</td> + </tr> + <tr> + <td>{{Event("mousewheel")}} {{Deprecated_Inline}}</td> + <td></td> + <td><a href="http://msdn.microsoft.com/en-us/library/ie/ms536951%28v=vs.85%29.aspx"><em>IE invented</em></a></td> + <td dir="rtl">يتم تدوير زر عجلة جهاز التأشير.</td> + </tr> + <tr> + <td>{{Event("MozAudioAvailable")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><em>Mozilla specific</em></td> + <td dir="rtl">المخزن المؤقت الصوتي ممتلئ وتتوفر العينات الخام المقابلة.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/MozBeforeResize"><code>MozBeforeResize</code></a> {{Obsolete_Inline}}</td> + <td></td> + <td><em>Mozilla specific</em></td> + <td dir="rtl">نافذة على وشك أن يتم تغييرحجمها.</td> + </tr> + <tr> + <td>{{Event("mozbrowseractivitydone")}}</td> + <td></td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td dir="rtl">يتم إرساله عند اكتمال بعض الأنشطة (الوصف الكامل سيتم تحديده لاحقًا TBD).</td> + </tr> + <tr> + <td>{{Event("mozbrowserasyncscroll")}}</td> + <td></td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td dir="rtl">يتم إرساله عند تغير موضع التمرير داخل متصفح {{HTMLElement("iframe")}}.</td> + </tr> + <tr> + <td>{{Event("mozbrowseraudioplaybackchange")}}</td> + <td></td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td dir="rtl">يتم إرساله عند بدء تشغيل الصوت أو إيقاف تشغيله داخل محتوى المتصفح{{HTMLElement("iframe")}}.</td> + </tr> + <tr> + <td>{{Event("mozbrowsercaretstatechanged")}}</td> + <td></td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td dir="rtl">يتم إرساله عندما يتغير النص المحدد داخل المتصفح{{HTMLElement("iframe")}} .</td> + </tr> + <tr> + <td>{{Event("mozbrowserclose")}}</td> + <td></td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td dir="rtl">يتم إرساله عند استدعاء ()window.close داخل المستعرض {{HTMLElement("iframe")}}.</td> + </tr> + <tr> + <td>{{Event("mozbrowsercontextmenu")}}</td> + <td></td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td dir="rtl">يتم إرساله عندما يحاول متصفح {{HTMLElement ("iframe")}} فتح قائمة سياق.</td> + </tr> + <tr> + <td>{{Event("mozbrowserdocumentfirstpaint")}}</td> + <td></td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td dir="rtl">يتم إرساله عند ظهور لون طلاء جديد على أي مستند في المستعرض {{HTMLElement("iframe")}}.</td> + </tr> + <tr> + <td>{{Event("mozbrowsererror")}}</td> + <td></td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td dir="rtl">يتم إرساله عند حدوث خطأ أثناء محاولة تحميل محتوى داخل متصفح {{HTMLElement("iframe")}}.</td> + </tr> + <tr> + <td>{{Event("mozbrowserfindchange")}}</td> + <td></td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td dir="rtl">يتم إرساله عند إجراء عملية بحث على محتوى المتصفح {{HTMLElement ("iframe")}} (انظر <a href="/en-US/docs/Web/API/HTMLIFrameElement#Search_methods">HTMLIFrameElement search methods</a>.)</td> + </tr> + <tr> + <td>{{Event("mozbrowserfirstpaint")}}</td> + <td></td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td dir="rtl">يتم إرساله عندما قوم بتلوين {{HTMLElement ("iframe")}} المحتوى لأول مرة (لا يتضمن هذا الطلاء الأولي من<code><em>about:blank</em></code>.)</td> + </tr> + <tr> + <td>{{Event("mozbrowsericonchange")}}</td> + <td></td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td dir="rtl">يتم إرساله عند تغيير الرمز المفضل للمتصفح {{HTMLElement ("iframe")}}.</td> + </tr> + <tr> + <td>{{Event("mozbrowserlocationchange")}}</td> + <td></td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td dir="rtl">يتم إرساله عندما يتغير موقع متصفح {{HTMLElement ("iframe")}}.</td> + </tr> + <tr> + <td>{{Event("mozbrowserloadend")}}</td> + <td></td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td dir="rtl">يتم إرساله عندما ينتهي المتصفح {{HTMLElement ("iframe")}} من تحميل جميع أصوله.</td> + </tr> + <tr> + <td>{{Event("mozbrowserloadstart")}}</td> + <td></td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td dir="rtl">يتم إرساله عندما يبدأ المتصفح {{HTMLElement ("iframe")}} في تحميل صفحة جديدة.</td> + </tr> + <tr> + <td>{{Event("mozbrowsermanifestchange")}}</td> + <td></td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td dir="rtl">يتم إرساله عندما يتغير مسار بيان التطبيق ، في حالة المتصفح {{HTMLElement ("iframe")}} مع تضمين تطبيق ويب مفتوح فيه.</td> + </tr> + <tr> + <td>{{Event("mozbrowsermetachange")}}</td> + <td></td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td dir="rtl">يتم إرساله عند إضافة عنصر {{htmlelement ("meta")}} إلى محتوى المتصفح {{HTMLElement ("iframe")}} أو إزالته منه أو تغييره.</td> + </tr> + <tr> + <td>{{Event("mozbrowseropensearch")}}</td> + <td></td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td dir="rtl">يتم إرساله عند العثور على رابط لمحرك بحث.</td> + </tr> + <tr> + <td>{{Event("mozbrowseropentab")}}</td> + <td></td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td dir="rtl">يتم إرساله عند فتح علامة تبويب جديدة داخل متصفح {{HTMLElement ("iframe")}} نتيجة قيام المستخدم بإصدار أمر لفتح هدف ارتباط في علامة تبويب جديدة (على سبيل المثال <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + click.)</td> + </tr> + <tr> + <td>{{Event("mozbrowseropenwindow")}}</td> + <td></td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td dir="rtl">يتم إرساله عند استدعاء {{DOMxRef ("window.open ()")}} داخل iframe للمتصفح.</td> + </tr> + <tr> + <td>{{Event("mozbrowserresize")}}</td> + <td></td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td dir="rtl">يتم إرساله عند تغيير حجم نافذة المتصفح {{HTMLElement ("iframe")}}.</td> + </tr> + <tr> + <td>{{Event("mozbrowserscroll")}}</td> + <td></td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td dir="rtl">يتم إرساله عند تمرير محتوى المتصفح {{HTMLElement ("iframe")}}.</td> + </tr> + <tr> + <td>{{Event("mozbrowserscrollareachanged")}}</td> + <td></td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td dir="rtl">يتم إرساله عندما تتغير منطقة التمرير المتاحة في المتصفح {{HTMLElement ("iframe")}}. يمكن أن يحدث هذا عند تغيير الحجم وعندما يتغير حجم الصفحة (أثناء التحميل على سبيل المثال.)</td> + </tr> + <tr> + <td>{{Event("mozbrowserscrollviewchange")}}</td> + <td></td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td dir="rtl">يتم إرساله عند بدء أو إيقاف التمرير غير المتزامن (أي APCZ).</td> + </tr> + <tr> + <td>{{Event("mozbrowsersecuritychange")}}</td> + <td></td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td dir="rtl">يتم إرساله عندما تتغير حالة SSL داخل متصفح {{HTMLElement ("iframe")}}.</td> + </tr> + <tr> + <td>{{Event("mozbrowserselectionstatechanged")}} {{deprecated_inline}}</td> + <td></td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td dir="rtl">يتم إرساله عندما يتغير النص المحدد داخل المتصفح {{HTMLElement ("iframe")}}. لاحظ أنه تم تجاهل هذا ، وتستخدم عمليات التنفيذ الأحدث {{Event ("mozbrowsercaretstatechanged")}} بدلاً من ذلك.</td> + </tr> + <tr> + <td>{{Event("mozbrowsershowmodalprompt")}}</td> + <td></td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td dir="rtl"> + <p>Sent when {{DOMxRef("window.alert","alert()")}}, {{DOMxRef("window.confirm","confirm()")}} or {{DOMxRef("window.prompt","prompt()")}} are called within a browser {{HTMLElement("iframe")}}</p> + </td> + </tr> + <tr> + <td>{{Event("mozbrowsertitlechange")}}</td> + <td></td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td dir="rtl">يتم إرساله عندما يتغير عنوان <code>document.title</code> داخل متصفح iframe.</td> + </tr> + <tr> + <td>{{Event("mozbrowserusernameandpasswordrequired")}}</td> + <td></td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td dir="rtl">يتم إرساله عند طلب مصادقة HTTP.</td> + </tr> + <tr> + <td>{{Event("mozbrowservisibilitychange")}}</td> + <td></td> + <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td dir="rtl">يتم إرساله عندما تتغير حالة الرؤية لمتصفح iframe الحالي {{HTMLElement("iframe")}} , على سبيل المثال بسبب استدعاء {{DOMxRef("HTMLIFrameElement.setVisible","setVisible()")}}.</td> + </tr> + <tr> + <td>{{Event("MozGamepadButtonDown")}}</td> + <td></td> + <td><em>To be specified</em></td> + <td dir="rtl">يتم الضغط على زر لوحة الألعاب لأسفل.</td> + </tr> + <tr> + <td>{{Event("MozGamepadButtonUp")}}</td> + <td></td> + <td><em>To be specified</em></td> + <td dir="rtl">يتم تحرير زر لوحة الألعاب.</td> + </tr> + <tr> + <td>{{Event("MozMousePixelScroll")}} {{Deprecated_Inline}}</td> + <td></td> + <td><em>Mozilla specific</em></td> + <td dir="rtl">يتم تدوير زر عجلة جهاز التأشير (خاصية التفاصيل هي عدد من البكسل). (استخدم العجلة بدلاً من ذلك)</td> + </tr> + <tr> + <td>{{Event("MozOrientation")}} {{Deprecated_Inline}}</td> + <td></td> + <td><em>Mozilla specific</em></td> + <td dir="rtl">البيانات الحديثة متاحة من مستشعر التوجه (انظر توجيه الجهاز).</td> + </tr> + <tr> + <td>{{Event("MozScrolledAreaChanged")}}</td> + <td>{{DOMxRef("UIEvent")}}</td> + <td><em>Mozilla specific</em></td> + <td dir="rtl">تم تمرير عرض المستند أو تغيير حجمه.</td> + </tr> + <tr> + <td>{{Event("moztimechange")}}</td> + <td></td> + <td><em>Mozilla specific</em></td> + <td dir="rtl">تم تغيير وقت الجهاز.</td> + </tr> + <tr> + <td><a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchDown</a> {{Deprecated_Inline}}</td> + <td></td> + <td><em>Mozilla specific</em></td> + <td dir="rtl">يتم وضع نقطة اتصال على سطح اللمس (استخدم <code>touchstart</code> بدلاً من ذلك).</td> + </tr> + <tr> + <td><a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchMove</a> {{Deprecated_Inline}}</td> + <td></td> + <td><em>Mozilla specific</em></td> + <td dir="rtl">يتم تحريك نقطة اتصال على طول سطح اللمس (استخدم <code>touchmove</code> بدلاً من ذلك).</td> + </tr> + <tr> + <td><a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchUp</a> {{Deprecated_Inline}}</td> + <td></td> + <td><em>Mozilla specific</em></td> + <td dir="rtl">تتم إزالة نقطة اتصال من سطح اللمس (استخدم <code>touchend</code> بدلاً من ذلك).</td> + </tr> + <tr> + <td>{{Event("alerting")}}</td> + <td>{{DOMxRef("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td dir="rtl">يتم تنبيه المراسل (رنين هاتفه/ها).</td> + </tr> + <tr> + <td>{{Event("busy")}}</td> + <td>{{DOMxRef("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td dir="rtl">خط المراسل مشغول.</td> + </tr> + <tr> + <td>{{Event("callschanged")}}</td> + <td>{{DOMxRef("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td dir="rtl">تمت إضافة مكالمة أو إزالتها من قائمة المكالمات الحالية.</td> + </tr> + <tr> + <td><a href="/en-US/docs/DOM/onconnected">onconnected</a> {{Event("connected")}}</td> + <td>{{DOMxRef("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td dir="rtl">تم توصيل مكالمة.</td> + </tr> + <tr> + <td>{{Event("connecting")}}</td> + <td>{{DOMxRef("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td dir="rtl">مكالمة على وشك الاتصال.</td> + </tr> + <tr> + <td>{{Event("delivered")}}</td> + <td>{{DOMxRef("SMSEvent")}}</td> + <td><em>To be specified</em></td> + <td dir="rtl">تم تسليم رسالة SMS بنجاح.</td> + </tr> + <tr> + <td>{{Event("dialing")}}</td> + <td>{{DOMxRef("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td dir="rtl">تم طلب رقم المراسل.</td> + </tr> + <tr> + <td>{{Event("disabled")}}</td> + <td></td> + <td><em>Firefox OS specific</em></td> + <td dir="rtl">تم تعطيل WiFi على الجهاز.</td> + </tr> + <tr> + <td>{{Event("disconnected")}}</td> + <td>{{DOMxRef("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td dir="rtl">تم قطع اتصال المكالمة.</td> + </tr> + <tr> + <td>{{Event("disconnecting")}}</td> + <td>{{DOMxRef("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td dir="rtl">مكالمة على وشك قطع الاتصال.</td> + </tr> + <tr> + <td>{{Event("enabled")}}</td> + <td></td> + <td><em>Firefox OS specific</em></td> + <td dir="rtl">تم تمكين WiFi على الجهاز.</td> + </tr> + <tr> + <td>{{Event("error_(Telephony)","error")}}</td> + <td>{{DOMxRef("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td dir="rtl">حدث خطأ.</td> + </tr> + <tr> + <td>{{Event("held")}}</td> + <td>{{DOMxRef("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td dir="rtl">تم تعليق المكالمة.</td> + </tr> + <tr> + <td>{{Event("holding")}}</td> + <td>{{DOMxRef("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td dir="rtl">مكالمة على وشك أن تعقد.</td> + </tr> + <tr> + <td>{{Event("incoming")}}</td> + <td>{{DOMxRef("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td dir="rtl">يتم تلقي مكالمة.</td> + </tr> + <tr> + <td>{{Event("received")}}</td> + <td>{{DOMxRef("SMSEvent")}}</td> + <td><em>To be specified</em></td> + <td dir="rtl">تم استلام رسالة نصية قصيرة.</td> + </tr> + <tr> + <td>{{Event("resuming")}}</td> + <td>{{DOMxRef("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td dir="rtl">مكالمة على وشك الاستئناف.</td> + </tr> + <tr> + <td>{{Event("sent")}}</td> + <td>{{DOMxRef("SMSEvent")}}</td> + <td><em>To be specified</em></td> + <td dir="rtl">تم إرسال رسالة نصية قصيرة.</td> + </tr> + <tr> + <td>{{Event("statechange")}}</td> + <td>{{DOMxRef("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td dir="rtl">تغيرت حالة المكالمة.</td> + </tr> + <tr> + <td>{{Event("statuschange")}}</td> + <td></td> + <td><em>Firefox OS specific</em></td> + <td dir="rtl">تغيرت حالة اتصال Wifi.</td> + </tr> + <tr> + <td>{{Event("overflow")}}</td> + <td>{{DOMxRef("UIEvent")}}</td> + <td><em>Mozilla specific</em></td> + <td dir="rtl">تم تجاوز عنصر ما من خلال محتواه أو تم عرضه لأول مرة في هذه الحالة (يعمل فقط مع العناصر التي تم تصميمها باستخدام <code>overflow</code> != <code>visible</code>).</td> + </tr> + <tr> + <td>{{Event("smartcard-insert")}}</td> + <td></td> + <td><em>Mozilla specific</em></td> + <td dir="rtl">تم إدخال البطاقة الذكية <a href="/en-US/docs/JavaScript_crypto">smartcard</a> </td> + </tr> + <tr> + <td>{{Event("smartcard-remove")}}</td> + <td></td> + <td><em>Mozilla specific</em></td> + <td dir="rtl">تمت إزالة البطاقة الذكية <a href="/en-US/docs/JavaScript_crypto">smartcard</a> .</td> + </tr> + <tr> + <td>{{Event("stkcommand")}}</td> + <td></td> + <td><em>Firefox OS specific</em></td> + <td dir="rtl">يتم إصدار الأمر STK Proactive من <abbr title="Integrated Circuit Card">ICC</abbr>.</td> + </tr> + <tr> + <td>{{Event("stksessionend")}}</td> + <td></td> + <td><em>Firefox OS specific</em></td> + <td dir="rtl">تم إنهاء جلسة STK بحلول <abbr title="Integrated Circuit Card">ICC</abbr>.</td> + </tr> + <tr> + <td>{{Event("touchenter")}}</td> + <td>{{DOMxRef("TouchEvent")}}</td> + <td><a href="http://www.w3.org/TR/touch-events/#the-touchstart---------event">Touch Events</a> Removed</td> + <td></td> + </tr> + <tr> + <td>{{Event("touchleave")}}</td> + <td>{{DOMxRef("TouchEvent")}}</td> + <td><a href="http://www.w3.org/TR/touch-events/#the-touchstart---------event">Touch Events</a> Removed</td> + <td></td> + </tr> + <tr> + <td>{{Event("underflow")}}</td> + <td>{{DOMxRef("UIEvent")}}</td> + <td><em>Mozilla specific</em></td> + <td dir="rtl">لم يعد العنصر يغمر من خلال محتواه (يعمل فقط مع العناصر التي تم تصميمها باستخدام <code>overflow</code> != <code>visible</code>).</td> + </tr> + <tr> + <td><code>uploadprogress</code> {{Deprecated_Inline}}</td> + <td>{{DOMxRef("ProgressEvent")}}</td> + <td><em>Mozilla Specific</em></td> + <td dir="rtl">التحميل قيد التقدم (انظر {{Event("progress")}}).</td> + </tr> + <tr> + <td> + <p>{{Event("ussdreceived")}}</p> + </td> + <td></td> + <td><em>Firefox OS specific</em></td> + <td dir="rtl">تم استلام رسالة USSD جديدة</td> + </tr> + <tr> + <td>{{Event("voicechange")}}</td> + <td></td> + <td><em>Firefox OS specific</em></td> + <td dir="rtl">يقوم ال Object {{DOMxRef("MozMobileConnection.voice")}} بتغيير القيم.</td> + </tr> + <tr> + <td>{{Event("msContentZoom")}}</td> + <td></td> + <td><em>Microsoft specific</em></td> + <td></td> + </tr> + <tr> + <td>{{Event("MSManipulationStateChanged")}}</td> + <td></td> + <td><em>Microsoft specific</em></td> + <td></td> + </tr> + <tr> + <td>{{Event("MSPointerHover")}} {{Deprecated_Inline}}</td> + <td></td> + <td><em>Microsoft specific</em></td> + <td></td> + </tr> + </tbody> +</table> +</div> + +<h2 id="أحداث_خاصة_بموزيللا">أحداث خاصة بموزيللا</h2> + +<div class="blockIndicator note" dir="rtl"> +<p>ملاحظة: لا يتم عرض هذه الأحداث مطلقًا لمحتوى الويب ولا يمكن استخدامها إلا في سياق محتوى XUL chrome.</p> +</div> + +<h3 id="XUL_أحداث">XUL أحداث</h3> + +<div style="overflow: auto;"> +<table class="standard-table"> + <thead> + <tr> + <th>اسم الحدث</th> + <th> + <p>نوع الحدث</p> + </th> + <th>تخصيص</th> + <th>يُطلق عندما...</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{Event("broadcast")}}</td> + <td></td> + <td><a href="/en-US/docs/XUL/Tutorial/Broadcasters_and_Observers#Broadcast_event">XUL</a></td> + <td>لاحظ أحد ال <code>observer</code> تغييرا في خصائص المذيع المراقب..</td> + </tr> + <tr> + <td>{{Event("CheckboxStateChange")}}</td> + <td></td> + <td>XUL</td> + <td dir="rtl">حالة ال <code>checkbox</code> تم تغييره إما عن طريق إجراء المستخدم أو عن طريق برنامج نصي (مفيد لإمكانية الوصول).</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/close_event">close</a></td> + <td></td> + <td>XUL</td> + <td>تم الضغط على زر الإغلاق للنافذة.</td> + </tr> + <tr> + <td>{{Event("command")}}</td> + <td></td> + <td>XUL</td> + <td dir="rtl">تم تنشيط عنصر.</td> + </tr> + <tr> + <td>{{Event("commandupdate")}}</td> + <td></td> + <td>XUL</td> + <td dir="rtl">حدث تحديث الأمر على عنصر .<code>commandset</code> </td> + </tr> + <tr> + <td>{{Event("DOMMenuItemActive")}}</td> + <td></td> + <td>XUL</td> + <td dir="rtl"> تحوم قائمة أو menuitem أو تم تمييزها.</td> + </tr> + <tr> + <td>{{Event("DOMMenuItemInactive")}}</td> + <td></td> + <td><em>XUL</em></td> + <td dir="rtl">لم تعد القائمة أو menuitem تحوم أو يتم تمييزها.</td> + </tr> + <tr> + <td>{{Event("popuphidden")}}</td> + <td><code>PopupEvent</code></td> + <td><a href="/en-US/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td> + <td dir="rtl">تم إخفاء القائمة المنبثقة أو اللوحة أو تلميح الأدوات.</td> + </tr> + <tr> + <td>{{Event("popuphiding")}}</td> + <td><code>PopupEvent</code></td> + <td><a href="/en-US/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td> + <td dir="rtl">A menupopup، لوحة، أو تلميح الأدوات على وشك أن تكون مخفية.</td> + </tr> + <tr> + <td>{{Event("popupshowing")}}</td> + <td><code>PopupEvent</code></td> + <td><a href="/en-US/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td> + <td dir="rtl">A menupopup، لوحة، أو تلميح الأدوات هو على وشك أن تصبح مرئية.</td> + </tr> + <tr> + <td>{{Event("popupshown")}}</td> + <td><code>PopupEvent</code></td> + <td><a href="/en-US/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td> + <td dir="rtl">أصبحت القائمة المنبثقة أو اللوحة أو تلميح الأدوات مرئية.</td> + </tr> + <tr> + <td>{{Event("RadioStateChange")}}</td> + <td></td> + <td>XUL</td> + <td dir="rtl">حالة ال <code>radio</code> تم تغييره إما عن طريق إجراء المستخدم أو عن طريق برنامج نصي (مفيد لإمكانية الوصول).</td> + </tr> + <tr> + <td>{{Event("ValueChange")}}</td> + <td></td> + <td>XUL</td> + <td dir="rtl">تم تغيير قيمة عنصر (شريط تقدم ، على سبيل المثال ، مفيد لإمكانية الوصول).</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Add-on-specific_events">Add-on-specific events</h3> + +<div style="overflow: auto;"> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">اسم الحدث</th> + <th scope="col"> + <p>نوع</p> + + <p>الحدث</p> + </th> + <th scope="col">تخصيص</th> + <th scope="col">يُطلق عندما...</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/MozSwipeGesture">MozSwipeGesture</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td dir="rtl">يتم تمرير نقطة اتصال عبر سطح اللمس.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/MozMagnifyGestureStart">MozMagnifyGestureStart</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td dir="rtl">تبدأ نقطتا اللمس في الابتعاد عن بعضهما البعض.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/MozMagnifyGestureUpdate">MozMagnifyGestureUpdate</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td dir="rtl">تتحرك نقطتا اللمس بعيدًا عن بعضهما البعض (بعد<code>MozMagnifyGestureStart</code>).</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/MozMagnifyGesture">MozMagnifyGesture</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td dir="rtl">ابتعدت نقطتا اللمس عن بعضهما البعض (بعد تسلسل<code>MozMagnifyGestureUpdate</code>).</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/MozRotateGestureStart">MozRotateGestureStart</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td dir="rtl">تبدأ نقطتا اللمس في التناوب حول نقطة.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/MozRotateGestureUpdate">MozRotateGestureUpdate</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td dir="rtl">تدور نقطتا اللمس حول نقطة (بعد <code>MozRotateGestureStart</code>).</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/MozRotateGesture">MozRotateGesture</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td dir="rtl">تدور نقطتا اللمس حول نقطة (بعد تسلسل<code>MozRotateGestureUpdate</code>).</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/MozTapGesture">MozTapGesture</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td dir="rtl">يتم الضغط على نقطتي اتصال على سطح اللمس.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/MozPressTapGesture">MozPressTapGesture</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td dir="rtl">"press-tap" حدثت على سطح اللمس (الإصبع الأول لأسفل ، والإصبع الثاني لأسفل ، والإصبع الثاني لأعلى ، والإصبع الأول لأعلى).</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/MozEdgeUIGesture">MozEdgeUIGesture</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td dir="rtl">يتم تمرير نقطة اتصال عبر سطح اللمس لاستدعاء Edge UI (Win8 فقط).</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/MozAfterPaint">MozAfterPaint</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td dir="rtl">تم إعادة رسم المحتوى.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/DOMPopupBlocked">DOMPopupBlocked</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td dir="rtl">تم حظر نافذة منبثقة.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/DOMWindowCreated">DOMWindowCreated</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td dir="rtl">تم إنشاء نافذة.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/DOMWindowClose">DOMWindowClose</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td dir="rtl">نافذة على وشك أن تكون مغلقة.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/DOMTitleChanged">DOMTitleChanged</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td dir="rtl">تم تغيير عنوان النافذة.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/DOMLinkAdded">DOMLinkAdded</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td dir="rtl">تم إضافة رابط مستند.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/DOMLinkRemoved">DOMLinkRemoved</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td dir="rtl">تمت إزالة رابط بالداخل من مستند.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/DOMMetaAdded">DOMMetaAdded</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td dir="rtl">تمت إضافة العنصر<code>meta</code> إلى مستند.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/DOMMetaRemoved">DOMMetaRemoved</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td dir="rtl">تمت إزالة العنصر <code>meta</code> من المستند.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/DOMWillOpenModalDialog">DOMWillOpenModalDialog</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td dir="rtl">مربع حوار شكلي على وشك الفتح.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/DOMModalDialogClosed">DOMModalDialogClosed</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td dir="rtl">مربع حوار شكلي تم إغلاقه.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/DOMAutoComplete">DOMAutoComplete</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td dir="rtl">تم إكمال محتوى عنصر تلقائيًا.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/DOMFrameContentLoaded">DOMFrameContentLoaded</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td dir="rtl">انتهى تحميل الإطار (ولكن ليس مصادره التابعة).</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/AlertActive">AlertActive</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td dir="rtl">تم إظهار عنصر تنبيه <code><a href="/en-US/docs/XUL/notification">notification</a></code> .</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/AlertClose">AlertClose</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td dir="rtl">تم إغلاق عنصر تنبيه <code><a href="/en-US/docs/XUL/notification">notification</a></code> .</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/fullscreen">fullscreen</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td dir="rtl">تم تبديل وضع ملء الشاشة في المتصفح.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/sizemodechange">sizemodechange</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td dir="rtl">دخلت النافذة / تركت وضع ملء الشاشة ، أو تم تصغيرها / تصغيرها.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/MozEnteredDomFullscreen">MozEnteredDomFullscreen</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td><a href="/en-US/docs/DOM/Using_full-screen_mode">DOM fullscreen</a> تم إدخال الوضع.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/SSWindowClosing">SSWindowClosing</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td dir="rtl">سيتوقف مخزن الجلسة عن تتبع هذه النافذة.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/SSTabClosing">SSTabClosing</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td dir="rtl">سيتوقف مخزن الجلسة عن تتبع علامة التبويب هذه.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/SSTabRestoring">SSTabRestoring</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td dir="rtl">علامة التبويب على وشك الاستعادة.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/SSTabRestored">SSTabRestored</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td dir="rtl">تمت استعادة علامة تبويب.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/SSWindowStateReady">SSWindowStateReady</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td dir="rtl">تم تبديل حالة النافذة إلى <code>"ready"</code>.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/SSWindowStateBusy">SSWindowStateBusy</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td dir="rtl">تم تبديل حالة النافذة الى<code>"مشغول"</code>.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/TabOpen">TabOpen</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td dir="rtl">تم فتح علامة تبويب.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/TabClose">TabClose</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td dir="rtl">تم إغلاق علامة تبويب.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/TabSelect">TabSelect</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td dir="rtl">تم تحديد علامة تبويب.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/TabShow">TabShow</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td dir="rtl">تم عرض علامة تبويب.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/TabHide">TabHide</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td dir="rtl">تم إخفاء علامة تبويب.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/TabPinned">TabPinned</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td dir="rtl">تم تثبيت علامة تبويب.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/TabUnpinned">TabUnpinned</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td dir="rtl">تم إلغاء تثبيت علامة تبويب.</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Developer_tool-specific_events">Developer tool-specific events</h3> + +<div style="overflow: auto;"> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">اسم الحدث</th> + <th scope="col"> + <p>نوع</p> + + <p>الحدث</p> + </th> + <th scope="col">تخصيص</th> + <th scope="col">يُطلق عندما...</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/CssRuleViewRefreshed">CssRuleViewRefreshed</a></td> + <td></td> + <td><em>devtools specific</em></td> + <td dir="rtl">تم تحديث طريقة عرض "Rules" لعارض الستايل.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/CssRuleViewChanged">CssRuleViewChanged</a></td> + <td></td> + <td><em>devtools specific</em></td> + <td dir="rtl">تم تغيير طريقة عرض "Rules" لعارض الستايل.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/CssRuleViewCSSLinkClicked">CssRuleViewCSSLinkClicked</a></td> + <td></td> + <td><em>devtools specific</em></td> + <td dir="rtl">تم الضغط على رابط لملف CSS في عرض "Rules" في عارض الستايل.</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="انظر_أيضا">انظر أيضا</h2> + +<ul> + <li>{{DOMxRef("Event")}}</li> + <li><a href="/en-US/docs/Web/Guide/DOM/Events">Event developer guide</a></li> +</ul> 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 +--- +<p><span class="seoSummary">This tutorial introduces you to the basic features and language (the syntax) for <a href="/en-US/docs/Web/Guide/CSS" title="/en-US/docs/Web/Guide/CSS"><strong>Cascading Style Sheets</strong></a> (CSS). You use CSS to change the look of a structured document, such as a web page. The tutorial also includes sample exercises you can try on your own computer to see the effects of CSS and features that work in modern browsers. </span></p> +<p>The tutorial is for beginners and anyone who would like to review the basics of CSS. If you have more experience with CSS, the CSS main page <a href="/en-US/docs/Web/Guide/CSS" title="/en-US/docs/Web/Guide/CSS">lists</a> more advanced resources.</p> +<nav class="fancyTOC"> + <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/What_is_CSS" rel="next" title="Chapter 'What is CSS' of the CSS tutorial">What is CSS</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS" title="Chapter 'Why use CSS' of the CSS tutorial">Why use CSS</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/How_CSS_works" title="Chapter 'How CSS works' of the CSS tutorial">How CSS works</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance" title="Chapter 'Cascading and inheritance' of the CSS tutorial">Cascading and inheritance</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors" title="Chapter 'Selectors' of the CSS tutorial">Selectors</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS" title="Chapter 'Readable_CSS' of the CSS tutorial">Readable CSS</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles" title="Chapter 'Text_styles' of the CSS tutorial">Text styles</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Color" title="Chapter 'Color' of the CSS tutorial">Color</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Content" title="Chapter 'Content' of the CSS tutorial">Content</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Lists" title="Chapter 'Lists' of the CSS tutorial">Lists</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Boxes" title="Chapter 'Boxes' of the CSS tutorial">Boxes</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Layout" title="Chapter 'Layout' of the CSS tutorial">Layout</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Tables" title="Chapter 'Tables' of the CSS tutorial">Tables</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Media" title="Chapter 'Media' of the CSS tutorial">Media</a></nav> +<h2 id="What_you_need_to_get_started">What you need to get started</h2> +<ul> + <li>A text editor</li> + <li>A modern browser</li> + <li>Some experience working with a text editor and browser</li> +</ul> +<p>Although the exercises can help you learn, you are not required to complete them. You can simply read the tutorial and look at the pictures.</p> +<p><strong>Note:</strong> The tutorial covers how CSS works with color. It will be easier to complete these sections with a color display and normal color vision.</p> +<h2 id="How_to_use_this_tutorial">How to use this tutorial</h2> +<p>To use this tutorial, read the pages carefully and in sequence. If you skip a page, it may be difficult to understand pages later in the tutorial.</p> +<h3 id="Part_I_The_Basics_of_CSS">Part I: The Basics of CSS</h3> +<p>On each page, use the <em>Information</em> section to understand how CSS works. Use the <em>Action</em> section to try using CSS on your own computer.</p> +<p>To test your understanding, take the challenge at the end of each page. Solutions to the challenges are linked under the challenges, so you don't need to look at them if you don't want to.</p> +<p>To understand CSS in more depth, read the information that you find in boxes captioned <em>More details</em>. Use the links there to find reference information about CSS.</p> +<h3 id="Part_II_The_Scope_of_CSS">Part II: The Scope of CSS</h3> +<p>A second part of the tutorial provides examples, which show the scope of CSS with other web and Mozilla technologies.</p> +<ol> + <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/JavaScript" title="en/CSS/Getting_Started/JavaScript">JavaScript</a></li> + <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/SVG_and_CSS" title="en/CSS/Getting_Started/SVG_graphics">SVG graphics</a></li> + <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/XML_data" title="en/CSS/Getting_Started/XML_data">XML data</a></li> + <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/XBL_bindings" title="en/CSS/Getting_Started/XBL_bindings">XBL bindings</a></li> + <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/XUL_user_interfaces" title="en/CSS/Getting_Started/XUL_user_interfaces">XUL user interfaces</a></li> +</ol> diff --git a/files/ar/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 +--- +<p dir="rtl">{{ CSSTutorialTOC() }}</p> + +<p dir="rtl">{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectors")}}<span class="seoSummary">This is the 6th section of the <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started</a> 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.</span></p> + +<h2 class="clearLeft" dir="rtl" id="معلومة_CSS_مقروء_(قابل_للقراءة_سهل_القراءة)">معلومة: CSS مقروء (قابل للقراءة = سهل القراءة)</h2> + +<p dir="rtl">يمكنك إضافة مساحات فارغة وأيضا تعليقات داخل ملف النمط لجعل الشيفرة البرمجية (code) أكثر قابلية وسهولة للقراءة. أيضا يمكنك تجميع العناصر المختلفة معا عندما تتطابق الخصائص بينهم.</p> + +<h3 dir="rtl" id="المساحة_الفارغة">المساحة الفارغة</h3> + +<p dir="rtl">المساحة الفارغة أوالبيضاء هي عبارة عن مسافات قد تكون مسافة من خطوة واحدة أو من عدة خطوات وقد تكون عبارة عن سطر جديد. يمكنك إضافة المساحات البيضاء إلى ملف النمط الخاص بك لجعله أكثر قابلية وسهولة للقراءة.</p> + +<p dir="rtl">في سياق تخطيط وتكوين الصفحة، المساحات الفارغة تكون جزءًا من الصفحة كمسافات بين الأعمدة والسطور أو كهوامش.</p> + +<p dir="rtl">يحتوي ملف النمط الخاص بك حاليا على قاعدة واحدة لكل سطر، وعدد أدنى من المساحات الفارغة أو البيضاء. في الأنماط المعقدة سيكون من الصعب قراءة ملف النمط، مما يجعل من الصعب الحفاظ عليها.</p> + +<p dir="rtl">التخطيط دائما ما يكون شَخْصِـيًّا، ولكن إذا كان ملف النمط بين مجموعة من الأفراد بصفته جزءً من مشاريع مشتركة، من المحتمل أن تلك المشاريع تحمل اتفاقيات خاصة بها يتم الأعتماد عليها والعمل بها.</p> + +<p dir="rtl"> </p> + +<div class="tuto_example" dir="rtl"> +<div class="tuto_type">Examples</div> + +<p>بعض الأشخاص يفضلون دمج الخصائص مع بعضها، فقط يقومون بتقسيم الخط عندما يصبح طويلا جدا:</p> + +<p dir="ltr">.carrot {color: orange; text-decoration: underline; font-style: italic;}</p> + +<p><br> + بعض الناس يفضلون خاصية واحدة لكل سطر:</p> + +<pre class="brush: css" dir="rtl">.carrot +{ +color: orange; +text-decoration: underline; +font-style: italic; +} +</pre> + +<p>بعض الأشخاص يستخدمون مسافتين أو أربع أو علامة التبويب الشائعة:</p> + +<pre class="brush: css">.carrot { + color: orange; + text-decoration: underline; + font-style: italic; +} +</pre> + +<p><br> + (بعض الأشخاص يفضلون جعل كل شيء عموديا (ولكن تخطيط مثل هذا من الصعب الحفاظ عليه.</p> + +<pre class="brush: css">.carrot + { + color : orange; + text-decoration : underline; + font-style : italic; + } +</pre> + +<p>بعض الأشخاص يستخدمون مزيج من المسافات الفارغة أو البيضاء لتعزيز سهولة القراءة.</p> + +<pre class="brush: css">.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 } +</pre> +</div> + +<p dir="rtl">بعض الأشخاص يستخدمون علامة التبويب والبعض الآخر يستخدم فقط المسافات البيضاء.</p> + +<h3 dir="rtl" id="التعليقات">التعليقات<br> + </h3> + +<p dir="rtl">التعليقات في ملف النمط تبدأ بـ «*/» وتنتهي بـ«/*».<br> + <br> + يمكنك استخدام التعليقات في ملف النمط الخاص بك لكتابة تعليقات وتعليمات، وأيضا لكتابة تعليمات مؤقتة قد يكون الغرض منها هو اختبار العملية.<br> + <br> + التعليق في جزء من النمط، ضع هذا الجزء في تعليق بحيث يتجاهله المتصفح عند قراءة الملف، وكن حذرا في بداية ونهاية التعليق. بقية الأنماط والخصائص يجب أن يكون لها البنية الصحيحة.</p> + +<div class="tuto_example" dir="rtl"> +<div class="tuto_type">Example</div> + +<pre class="brush: css">/* style for initial letter C in first paragraph */ +.carrot { + color: orange; + text-decoration: underline; + font-style: italic; + } +</pre> +</div> + +<h3 dir="rtl" id="تجميع_العناصر_عندما_يكون_لمجموعة_من_العناصر_عدد_من_الخصائص_المتشابهة_في_النمط،_يمكنك_تجميع_العناصر_مع_الفصل_بينهم_بعلامة_فاصلة._وتـنطبق_هذة_الخصائص_على_جميع_العناصر_المجمعة.">تجميع العناصر<br> + <br> + <span style="font-size: 14px;">عندما يكون لمجموعة من العناصر عدد من الخصائص المتشابهة في النمط، يمكنك تجميع العناصر مع الفصل بينهم بعلامة فاصلة. وتـنطبق هذة الخصائص على جميع العناصر المجمعة.</span><br> + </h3> + +<p dir="rtl">في أماكن أخرى من ملف النمط يمكنك أيضا تجميع عدد من العناصر ولكن فرديا، وتطبيق خصائص فردية عليهم.</p> + +<div class="tuto_example" dir="rtl"> +<div class="tuto_type">Example</div> + +<p>This rule makes {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, and {{ HTMLElement("h3") }} elements the same color.</p> + +<p>إنها مناسبة لتحديد اللون لمجموعة من العناصر في مكان واحد، في حالة لابد من تغييرها.</p> + +<pre class="brush: css">/* color for headings */ +h1, h2, h3 {color: navy;} +</pre> +</div> + +<h2 dir="rtl" id="العمل_إضافة_تعليقات_و_تحسين_التخطيط">العمل: إضافة تعليقات و تحسين التخطيط</h2> + +<ol dir="rtl"> + <li>قم بتعديل ملف النمط الخاص بك، وقم بالتأكد أن لديها هذه القواعد في ذلك (في أي أمر): + <pre class="brush: css">strong {color: red;} +.carrot {color: orange;} +.spinach {color: green;} +#first {font-style: italic;} +p {color: blue;} +</pre> + </li> + <li>جعلها أكثر قابلية للقراءة من خلال إعادة ترتيبها بطريقة منطقية، وذلك من خلال إضافة مساحات بيضاء أو فارغة وأيضا تعليقات مناسبة.</li> + <li>قم بحفظ التعديلات واذهب إلى المتصفح لتشاهد الصفحة للتَّـأكد أنه لا يوجد أي تأثير على ملف النمط من خلال عمله. + <table style="border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> + </table> + </li> +</ol> + +<div class="tuto_details" dir="rtl"> +<div class="tuto_type">تحدي</div> + +<div class="tuto_type"> </div> + +<p class="tuto_type">ضع تعليقا يوجد به جزء من ملف النمط الخاص بك، بدون تغيير أي شيء آخر ، لعمل أول حرف من الوثيقة أحمر اللون.</p> + +<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td style="font-style: italic; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> +</table> + +<p>(هناك العديد من الطرق لفعل ذلك)</p> + +<div class="tuto_details" id="tutochallenge"> +<div class="tuto_type">Possible solution</div> + +<p>One way to do this is to put comment delimiters around the rule for <code>.carrot</code>:</p> + +<pre class="brush: css">/*.carrot { + color: orange; +}*/</pre> + +<p><a class="hideAnswer" href="#challenge">Hide solution</a></p> +</div> + +<p><a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></p> +</div> + +<h2 dir="rtl" id="ما_التالي؟">ما التالي؟</h2> + +<h2 dir="rtl" id="nextPage(en-USdocsWebGuideCSSGetting_StartedText_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.">{{ 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 <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles" style="font-size: 14px; font-weight: normal;" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles">specify the appearance of text</a><span style="color: #3b3c40; font-size: 14px; font-weight: normal;"> in your document</span><strong style="color: #3b3c40; font-size: 14px;">.</strong></h2> 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..5490b5d1a7 --- /dev/null +++ b/files/ar/web/guide/css/getting_started/القوائم/index.html @@ -0,0 +1,383 @@ +--- +title: القوائم +slug: Web/Guide/CSS/Getting_started/القوائم +translation_of: Learn/CSS/Styling_text/Styling_lists +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p dir="rtl"> الصفحة السابقة هي ("/en-US/docs/Web/Guide/CSS/Getting_Started/Content", "Content") أما هذا الجزء فهو العاشِر في سلسلة تعليم لغة CSS على هذا الموقع <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started</a>، وهو يصف كيف يُمكن استخدام لغة الـCSS لتحديد مظهر القائمة. ستقوم بإنشاء مثال مستند يحتوي على قائمة بالـHTML وملف تنسيق بلغة الـCSS والذي من خلاله سوف نقوم بتنسيق القائمة التي قمنا بإنشَائها. </p> + +<h2 class="clearLeft" dir="rtl" id="معلومات_عن_القوائم">معلومات عن القوائم </h2> + +<p dir="rtl">لو نظرت إلى الجزء السابق، سوف يتضح لك كيف يمكن إضافة محتـوًى قبل أي عنصر بحيث يظهر وكأنّه عنصرٌ في قائمة.</p> + +<p dir="rtl">تقدم لغة الـCSS بعض الخواص المُصَمَّـمَـة للقائمة، والتي يجب استخدامها دائما مع القوائم.</p> + +<p dir="rtl">لتحديد نمط القائمة، عليك استخدام هذه الخاصية «<strong>list-style</strong>» وذلك لتحديد نوع العلامة الموجودة قبل كل عنصر في القائمة. </p> + +<div class="note" dir="rtl"> +<p>من الممكن أن يتم اختيار القائمة ككل بهذا الوسم «<em>ul</em>» أو اختيار عنصر بداخل القائمة من خلال هذا الوسم «<em>li</em>». </p> + +<p>وعند اختيار القائمة ككل فإنَّ هذا الوسم يسمى الأب للقائمة وهو«<em>ul</em>»، ويورث الخواص التى تٌطبق عليه لكُـلِّ عنصر في القائمة. </p> +</div> + +<h3 dir="rtl" id="القوائم_غير_المرتبة">القوائم غير المرتبة</h3> + +<p dir="rtl"> في القوائم غير المُرَتَّـبة، يكون كل عنصر من القائمة معَلَّــمًا بنفس الطريقة. </p> + +<p dir="rtl"> يوجد ثلاثة أنواع من العلامات، وأدناه هي كيفية عرض المتصفح لهذه العلامات:</p> + +<p dir="rtl">• disc قرص </p> + +<p dir="rtl">○ circle دائرة</p> + +<p dir="rtl">◘ square مربع</p> + +<p dir="rtl">بدلا من ذلك، يمكن تحديد رابط صورة لاستخدامها كعلامة للعناصر بدل من العلامات السابقة.</p> + +<div class="tuto_example"> +<h3 dir="rtl" id="مثال">مثال </h3> + +<p dir="rtl"> هذه القواعد تُـوَضِّح علامات مختلفة لأصناف (classes) مختلفة من عناصر القائمة:</p> + +<pre class="brush:css" dir="rtl">li.open { + list-style: circle; +} +li.closed { + list-style: disc; +} +</pre> + +<p dir="rtl">عندما يتم استعمال هذه الأصناف (classes) في قائمة، تقوم بالتمييز بين العناصر المفتوحة والمغلقة (مثلًا في قائمة مهامّ).</p> + +<pre class="brush: html" dir="rtl"><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> +</pre> + +<p dir="rtl">وهكذا تبدو النتيجة: </p> + +<div class="syntaxbox"> ○ Lorem ipsum</div> + +<div class="syntaxbox"> • Dolor sit</div> + +<div class="syntaxbox"> • Amet consectetuer</div> + +<div class="syntaxbox"> ○ Magna aliquam</div> + +<div class="syntaxbox"> • Autem veleum</div> + +<div class="syntaxbox"> </div> +</div> + +<h3 dir="rtl" id="القوائم_المُـرَتَّـبة">القوائم المُـرَتَّـبة </h3> + +<p dir="rtl">في القوائم المُرتّبة، يكون لكل عنصر علامة مختلفة تُميّز موضعه في القائمة.</p> + +<p dir="rtl">استخدم الخاصية «list-style» لتعيين نمط القائمة، لتحديد نوع العلامة التي تظهر قبل كل عنصرفي القائمة.</p> + +<ul style="padding-left: 2em;"> + <li style=""><code>decimal (تعداد بأرقام عشرية)</code></li> + <li style=""><code>lower-roman (تعداد بحروف رومانية صغيرة)</code></li> + <li style=""><code>upper-roman (تعداد بحروف رومانية كبيرة)</code></li> + <li style=""><code>lower-latin (تعداد بحروف لاتيتنية صغيرة)</code></li> + <li style=""><code>upper-latin (تعداد بحروف لاتينية كبيرة)</code></li> +</ul> + +<div class="tuto_example"> +<div class="tuto_type" dir="rtl"> </div> + +<h4 class="tuto_type" dir="rtl" id="مثال_2">مثال </h4> + +<div class="tuto_type" dir="rtl">القاعدة التّالية تجعل العناصر في القائمة المرتّبة <ol> والتي تٌميز بصنف .«info» مُرتبة بحروف لاتينية كبيرة. </div> + +<div class="tuto_type" dir="rtl"> </div> + +<pre class="brush: html"><ol class="info"> + <li>Lorem ipsum</li> + <li>Dolor sit</li> + <li>Amet consectetuer</li> + <li>Magna aliquam</li> + <li>Autem veleum</li> +</ol></pre> + +<pre class="brush:css">ol.info { + list-style: upper-latin; +} +</pre> + +<div class="note" dir="rtl"> +<p>عند تطبيق خاصية النمط على الـ «<em>ol</em>» يُوَرِّثُ هذه الخاصية إلى الأبناء وهم عناصر القائمة المرتبة وهي العناصر المسبوقة بوسم «<em>li</em>».</p> +</div> + +<p dir="rtl">فتكون النتيجة كالتالي:</p> + +<div class="syntaxbox">ِA. Lorem ipsum</div> + +<div class="syntaxbox">B. Dolor sit</div> + +<div class="syntaxbox">C. Amet consectetuer</div> + +<div class="syntaxbox">D. Magna aliquam</div> + +<div class="syntaxbox">E. Autem veleum</div> +</div> + +<div class="tuto_details"> +<div class="tuto_type"> +<h3 dir="rtl" id="تفاصيل_أكثر">تفاصيل أكثر </h3> + +<div class="syntaxbox" dir="rtl">الخاصية «list-style» هي خاصية مختصرة أي أنه من الممكن استخدامها إذا أردت أن يكون نمط القائمة سواء كان </div> + +<div class="syntaxbox" dir="rtl"> (صورة أو رقم أو شكل أو حرف )</div> + +<div class="syntaxbox" dir="rtl"> ولكن يمكن أن تستخدم خواص منفردة لكل شكل على حدة وليكن للصورة لها خاصية محددة مثل «list-style-image» </div> + +<p dir="rtl">يمكنك مراجعة هذه الخاصية وما بها من تفاصيل من خلال هذه الصفحة <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/list-style">list style</a> </p> + +<div class="syntaxbox" dir="rtl">إن كنت تستخدم لغة HTML فإنها تُـوفر وسوما مُختلفة، فعلى سبيل المثال للقوائم المرتبة يُستخدم هذا الوسم «ol»</div> + +<div class="syntaxbox" dir="rtl">والقوائم الغير مرتبة «ul»</div> + +<div class="syntaxbox" dir="rtl"> فيفضّل استخدام هذه القوائم بحسب دلالتها ولكن من الممكن إذا أردت أن تجعل القوائم المرتبة كغير المرتبة شكلا </div> + +<div class="syntaxbox" dir="rtl">والعكس، فذلك يتم من خلال الـCSS أيضا يتم كل هذا باستخدام الخواص المختلفة لتحصل على ما تريد من نتائج </div> + +<div class="syntaxbox" dir="rtl">ولكن يُفَضَّـل أن تُسْتَخدم كل قائمة حسب وضعها والاستخدام الخاص بها. </div> + +<div class="syntaxbox" dir="rtl"> </div> + +<p dir="rtl">قد تختلف المتصفّحات في طرق عرضها لتنسيق القوائم، لا يُمكن أن تحصُل على نفس النتيجة في كل المتصفحات. </p> +</div> +</div> + +<h3 dir="rtl" id="العَـدَّادَات">العَـدَّادَات</h3> + +<div dir="rtl" style="border: 1px solid red; padding: 6px; margin: 0px -6px 0.5em 0px; width: 100%;"> +<p><strong>ملاحظة هامّة</strong>:</p> + +<div class="syntaxbox"> بعض المتصفحات لا تدعم العدّادات، تقدّم هذه الصّفحة <a href="http://www.quirksmode.org/css/contents.html">CSS contents and browser comptability</a> على موقع <a href="http://www.quirksmode.org/">QuirksMode</a> معلومات تفصيلية عن دعم المتصفحات لهذه الميزة وميزات أخرى.</div> + +<div class="syntaxbox">كما توفّر الصّفحات الفرديّة في <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference" rel="external noopener noreferrer">CSS</a> مرجعا للمعلومات عن دعم المتصفحات أيضا لهذه الخاصية وغيرها.</div> +</div> + +<p> </p> + +<div class="syntaxbox" dir="rtl">يُمكن استخدام العدّادات لعدّ أيّة عناصر، وليس فقط عناصر القوائم، فمثلًا يمكن عدّ العناوين والفقرات في المستند.</div> + +<div class="syntaxbox" dir="rtl">تحتاج إلى إنشاء عدّاد counter باسم خاص بك لتستخدمه فى العّد.</div> + +<div class="syntaxbox" dir="rtl"> </div> + +<div class="syntaxbox" dir="rtl"> يمكن تهيئة العدّاد قبل البدء بالعدّ باستخدام الخاصية «counter-reset» واسم العدادَ الخاص بك الذي أنشأته. </div> + +<div class="syntaxbox" dir="rtl">وعليك أن تعلم أن الأب للعنصر الذي تقوم بِعده هو المكان الأنسب لتهيئة العّداد، ولكن يمكن استخدام أي عنصر يأتي قبل العناصر المطلوب عدّها.</div> + +<div class="syntaxbox"> </div> + +<div class="syntaxbox" dir="rtl"> في كلّ عنصر ترغب بعدّه، استخدم الخاصية «counter-increment» مع اسم العّداد الذي تٌريده.</div> + +<div class="syntaxbox" dir="rtl"> استخدم «befor» ،«:after:» لعرض العدّاد، مع استخدام هذه الخاصية «content» مع العنصر المٌحدد المُراد عّده (سيتم شرح ذلك لاحقاَ).</div> + +<div class="syntaxbox" dir="rtl">يمكنك معرفة معلومات أكثر عن هذه الخاصية في هذه الصفحة <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Content">Content</a>. </div> + +<div class="syntaxbox"> </div> + +<h4 class="syntaxbox" dir="rtl" id="استخدام_()counter_مع_اسم_العّداد_كقيمة_لـcontent">استخدام ()counter مع اسم العّداد كقيمة لـcontent </h4> + +<div class="syntaxbox" dir="rtl">ويمكن كذلك استخدام نوع للعلامة فى العد. الأنواع المُتاحة هي التي تم عرضها في فقرة القوائم المرتّبة.</div> + +<p dir="rtl">عادةً يزيد العنصر الّذي يعرض العدّاد من قيمته. </p> + +<div class="tuto_example"> +<div class="tuto_type" dir="rtl"> مثال </div> + +<div class="tuto_type" dir="rtl"> </div> + +<div class="tuto_type" dir="rtl"> هذه القاعدة تُنشئ عدّادًا لكلّ عنصر<h3> له تصنيف (كلاس) «numbered»: </div> + +<pre class="brush:css">h3.numbered { + counter-reset: mynum; +} +</pre> + +<p dir="rtl"> أما هذه القاعدة فهى تعرض عّداد الـ <p> والتي لها تصنيف «numbered»</p> + +<pre class="brush: html"><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> +</pre> + +<pre class="brush:css">body { + counter-reset: mynum; +} +p.numbered:before { + content: counter(mynum) ": "; + counter-increment: mynum; + font-weight: bold; +} +</pre> + +<p dir="rtl">والنتيجة ستبدُو هكذا:</p> + +<div class="syntaxbox"><strong>1:</strong> Lorem ipsum</div> + +<div class="syntaxbox"><strong>2:</strong> Dolor sit</div> + +<div class="syntaxbox"><strong>3:</strong> Amet consectetuer</div> + +<div class="syntaxbox"><strong>4:</strong> Magna aliquam</div> + +<div class="syntaxbox"><strong>5:</strong> Autem veleum</div> + +<div class="syntaxbox"> </div> +</div> + +<div class="tuto_details"> +<div class="tuto_type" dir="rtl">تفاصِيل أكثر </div> + +<div class="syntaxbox" dir="rtl"> </div> + +<div class="syntaxbox" dir="rtl"> لا تستطيع استخدام العَدادات إلا إذا تيقنت من أنَ كل شخص يستخدم العدادات يستعمل متصفحاً يُدعمها. </div> + +<div class="syntaxbox" dir="rtl"> العًدادات بها مِيزات ويمكن تنسيقها منفصلة عن عنصر القَائمة المرافِقة لها كما في المثال السابق </div> + +<div class="syntaxbox" dir="rtl">ترى أن العًدادات لها تنسيق خاص فهي بِخط عريض غير عناصر القّائمة. </div> + +<div class="syntaxbox" dir="rtl"> </div> + +<div class="syntaxbox" dir="rtl">يمكن أيضًا استخدام العدّادات بطرق أكثر تعقيدًا؛ مثلًا: لعدّ الفقرات والعناوين والعناوين الفرعيّة والفقرات في المستندات الرسمية.</div> + +<div class="syntaxbox" dir="rtl"> ولتفاصِيل أكثر عليك الرجوع إلى هذِه الصفحة <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters">Automatic counters and numbering</a>.</div> +</div> + +<h2 dir="rtl" id="تمرين_قوائم_مُنسقة">تمرين: قوائم مُنسقة</h2> + +<p dir="rtl"> قم بإنشاء ملف HTML باسم doc2.html، انسخ والصق هذا المحتوى إلى الملف الخاص بك:</p> + +<pre class="brush: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> +</pre> + +<p dir="rtl"> قم بإنشاء ملف CSS وقُم بتسميته style2.css، انسخ والصق هذه الشيفرة البرمجية إلى صفحتك:</p> + +<pre class="brush:css;">/* numbered paragraphs */ +h3.numbered {counter-reset: mynum;} + +p.numbered:before { + content: counter(mynum) ": "; + counter-increment: mynum; + font-weight: bold; +} +</pre> + +<p dir="rtl">قم بتغيير أسلوب التعليقات كما تحبّ إن لم يعجبك هذا.</p> + +<p dir="rtl">افتح الملف على المٌتصفح الخاص بِك. إذا كان متصفحط يَدعم العّدادات سوف ترى النتيجة كما هي موضحة أدناه، وإن لم يكُن يُدعمها فلن ترى إلاَّ الأرقام والنُقتطان قبل القائمة التي هي بعنوان «Numbered paragraphs» :</p> + +<h3 id="The_oceans">The oceans</h3> + +<div class="syntaxbox">Arctic</div> + +<div class="syntaxbox">Atlantic</div> + +<div class="syntaxbox">Pacific</div> + +<div class="syntaxbox">Indian</div> + +<div class="syntaxbox">Southern</div> + +<h3 id="Numbered_paragraphs">Numbered paragraphs</h3> + +<div class="syntaxbox"><strong>1:</strong>Lorem ipsum</div> + +<div class="syntaxbox"><strong>2:</strong>Dolor sit</div> + +<div class="syntaxbox"><strong>3:</strong>Amet consectetuer</div> + +<div class="syntaxbox"><strong>4:</strong>Magna aliquam</div> + +<div class="syntaxbox"><strong>5:</strong>Autem veleum</div> + +<div class="tuto_example"> +<div class="tuto_type" dir="rtl"> تمرين إضافي </div> + +<div class="syntaxbox" dir="rtl"> أضِف قاعدة لملف التنسيق الخاص بك بحيث تجعل النمط قبل عناصِر القائِمة بحروف رومانية من i إلى v، بحيث تحصل على هذه النتيجة: </div> + +<div class="syntaxbox" dir="rtl"> </div> + +<table style="background-color: white; border: 2px outset #3366bb; padding: 0 6em 1em 1em;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">The oceans</p> + + <ul style=""> + <li>Arctic</li> + <li>Atlantic</li> + <li>Pacific</li> + <li>Indian</li> + <li>Southern</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p dir="rtl">وقم بتغييرها مرة أُخرى إلى حروف لاتينية كبيرة قبل عناصرالقائمة، وستكون النتيجة هكذا: </p> + +<table style="background-color: white; border: 2px outset #3366bb; padding: 0 6em 1em 1em;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(A) The oceans</p> + + <p><strong>. . .</strong></p> + + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(B) Numbered paragraphs</p> + + <p><strong>. . .</strong></p> + </td> + </tr> + </tbody> +</table> +</div> + +<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Lists" title="en-US/docs/Web/Guide/CSS/Getting started/Challenge solutions#Lists">See solutions to these challenges.</a></p> + +<h2 dir="rtl" id="ما_هو_القادم_؟">ما هو القادم ؟</h2> + +<p dir="rtl">الصفحة القادمو هي ("/en-US/docs/Web/Guide/CSS/Getting_Started/Boxes", "Boxes")</p> + +<p dir="rtl">عندما يعرض المتصفّح مستند الخاص بك، فإِنه يُنشئ مساحات حول العناصر عندما يضعها في مواضعها في الصّفحة. الصفّحة القادِمة تصف كيف يُمكن استخدام لغة الـCSS لتَّعامل مع هذه الأشكال من خلال الـ<a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Boxes" title="en-US/docs/Web/Guide/CSS/Getting_Started/Boxes">boxes</a>.</p> 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 +--- +<p>{{draft}}</p> +<p><span class="seoSummary">Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML</span> or other markup languages such as SVG<span class="seoSummary">. CSS describes how the structured elements in the document are to be rendered on screen, on paper, in speech, or on other media.</span> The ability to adjust the document's presentation depending on the output medium is a key feature of CSS.</p> +<p>CSS is one of the core languages of the open Web and has a standardized <a class="external" href="http://w3.org/Style/CSS/#specs">W3C specification</a>.</p> +<p>{{LandingPageListSubpages}}</p> +<h2 id="Pages_elsewhere">Pages elsewhere</h2> +<p>Here are other pages related to CSS that should be linked to from here.</p> +<h2 id="See_also">See also</h2> +<ul> + <li><a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/HTML">CSS</a></li> + <li><a href="/en-US/docs/Web/Reference" title="/en-US/docs/Web/Reference">Web developer reference</a></li> + <li><a href="/en-US/docs/Web/Guide" title="/en-US/docs/Web/Guide">Web developer guide</a></li> +</ul> diff --git a/files/ar/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 +--- +<p dir="rtl">كل <strong>عناصر HTML5 المعتمدة</strong> مدرجة هنا، حيث أن اسماءها تصفها ومرتبة في مجموعات حسب وظائفها.</p> + +<p dir="rtl">على عكس <a href="/en-US/docs/HTML/Element" title="فهرس عناصر HTML">فهرس عناصر HTML </a>الذي يشمل جميع عناصر HTML بما فيها المعتمدة وغير المعتمدة والصالحة والمهملة والملغية أيضًا، هذه الصفحة تتضمن عناصر HTML5 الصالحة فقط، العناصر الموجودة هنا هي التي يتوجب أن تستعمل في إنشاء المواقع الجديدة.</p> + +<p dir="rtl">العلامة <a href="/en-US/docs/HTML/HTML5"><img alt="This element was added as part of HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a> ترمز إلى أن العنصر قد تمت إضافته في HTML5، لاحظ أن العناصر الأخرى الموجودة هنا قد تكون ممددة أو معدلة في معانيها ضمن مواصفات HTML5.</p> + +<h2 dir="rtl" id="عنصر_الجذر">عنصر الجذر</h2> + +<table class="standard-table" dir="rtl"> + <thead> + <tr> + <th scope="col">العنصر</th> + <th scope="col">نبذة عنه</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("html")}}</td> + <td>وهو يمثل جذر الـ HTML أو مستند XHTML و <font>يجب أن تكون جميع العناصر الأخرى من نسل هذا العنصر.</font></td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="البيانات_الرئيسة_للوثيقة">البيانات الرئيسة للوثيقة</h2> + +<table class="standard-table" dir="rtl"> + <thead> + <tr> + <th scope="col">العنصر</th> + <th scope="col">نبذة عنه</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("head")}}</td> + <td>وهو يمثل مجموعة من البيانات الوصفية حول الوثيقة بما في ذلك الوصلات أو تعريفات و البرامج النصية والسكريبتات و انماط الـ CSS .</td> + </tr> + <tr> + <td>{{HTMLElement("title")}}</td> + <td>يحدد عنوان الوثيقة كما هو موضح في شريط عنوان المتصفح أو في علامة التبويب الصفحة <font>ولابد أن يحتوي على نصوص فقط لا غير .</font></td> + </tr> + <tr> + <td>{{HTMLElement("base")}}</td> + <td>وهو يحدد الرابط الفتراضي للوثيقة كي يتم من خلاله فرز الروابط المنتسبة لصفحة من الرابط التابعه لاجناس اخرى .</td> + </tr> + <tr> + <td>{{HTMLElement("link")}}</td> + <td>وهو يستخدم لربط ملفات ألـ CSS والـ Javascript الخارجي مع وثيقة HTML .</td> + </tr> + <tr> + <td>{{HTMLElement("meta")}}</td> + <td>يستخدم لتعريف العناصر التي لايمكن تعريفها مثل الترميز وغير من الاستخدامات الاخرى .</td> + </tr> + <tr> + <td>{{HTMLElement("style")}}</td> + <td>يستخدم لكتابة CSS داخل وثيقة HTML .</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="البرمجة">البرمجة</h2> + +<table class="standard-table" dir="rtl"> + <thead> + <tr> + <th scope="col">العنصر</th> + <th scope="col">نبذة عنه</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("script")}}</td> + <td>يستخدم لربط ملف نصي برمجي خارجي او تضمين ملف نص برمجي ويمكن الكتابة داخله بالغات متعدده مثل javascript او php و غيره .</td> + </tr> + <tr> + <td>{{HTMLElement("noscript")}}</td> + <td>يحدد محتوى بديل لعرضه عندما لا يدعم المتصفح البرمجة .</td> + </tr> + <tr> + <td>{{HTMLElement("template")}}<a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>حاوية للمحتوى العميل أثناء وقت التشغيل باستخدام جافا سكريبت .</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="اقسام_التضمين">اقسام التضمين</h2> + +<table class="standard-table" dir="rtl"> + <thead> + <tr> + <th scope="col">العنصر</th> + <th scope="col">نبذة عنه</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("body")}}</td> + <td> + <div>وهو يمثل محتوى وثيقة HTML ولابد ان تكون كل العناصر الضاهره في الجسم داخلة .</div> + </td> + </tr> + <tr> + <td>{{HTMLElement("section")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>يمثل قطعه في في المستند .</td> + </tr> + <tr> + <td>{{HTMLElement("nav")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>يحدد المقطع الذي يحتوي على ارتباطات التنقل .</td> + </tr> + <tr> + <td>{{HTMLElement("article")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>يحدد محتوى منفصل بذاته والذي يمكن أن يوجد بشكل مستقل عن بقية المحتوى.</td> + </tr> + <tr> + <td>{{HTMLElement("aside")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>يعرف بعض المحتويات التي لها علاقة فضفاضة إلى محتوى الصفحة. إذا تم إزالته ، والمحتوى المتبقية لا يزال من المنطقي .</td> + </tr> + <tr> + <td><a href="/en-US/docs/HTML/Element/Heading_Elements"><code><h1>,<h2>,<h3>,<h4>,<h5>,<h6></code></a></td> + <td>وهو يمثل 6 مستويات من عناوين النصية واكبرهم حجماً <h1> وعكسه <h6></td> + </tr> + <tr> + <td>{{HTMLElement("header")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>يحدد محتوى بذاتها التي يمكن أن توجد بشكل مستقل عن بقية المحتوى . </td> + </tr> + <tr> + <td>{{HTMLElement("footer")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>>يحدد تذييل للصفحة أو قسم فإنه غالبا ما يحتوي على إشعار حقوق التأليف والنشر وبعض الروابط على المعلومات القانونية أو عناوين .</td> + </tr> + <tr> + <td>{{HTMLElement("address")}}</td> + <td>يعرف الجزء الذي يحتوي على معلومات للإتصال به.</td> + </tr> + <tr> + <td>{{HTMLElement("main")}}<a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>يحدد المحتوى الرئيسي أو مهم في الوثيقة. هناك واحد فقط <main> عنصر في الوثيقة.</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="جداول_البيانات">جداول البيانات</h2> + +<table class="standard-table" dir="rtl"> + <thead> + <tr> + <th scope="col">العنصر</th> + <th scope="col">نبذة عنه</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("p")}}</td> + <td>يحدد الجزء الذي يجب أن يتم عرض كفقرة .</td> + </tr> + <tr> + <td>{{HTMLElement("hr")}}</td> + <td>يمثل خط فاصل بين موضوعين .</td> + </tr> + <tr> + <td>{{HTMLElement("pre")}}</td> + <td>يحدد النص المكتوب كما هو بالسطر وافراغ .</td> + </tr> + <tr> + <td>{{HTMLElement("blockquote")}}</td> + <td> + <p>يمثل المحتوى الذي يتم نقلا عن مصدر آخر.</p> + </td> + </tr> + <tr> + <td>{{HTMLElement("ol")}}</td> + <td>يحدد قائمة مرتبة مرقمة من العناصر .</td> + </tr> + <tr> + <td>{{HTMLElement("ul")}}</td> + <td>يحدد قائمة غير مرتبة من البنود.</td> + </tr> + <tr> + <td>{{HTMLElement("li")}}</td> + <td>يحدد عنصر من قائمة التعداد.</td> + </tr> + <tr> + <td>{{HTMLElement("dl")}}</td> + <td>تعرف على قائمة تعريف ، وهذا هو ، على قائمة المصطلحات والتعاريف المرتبطة بها .</td> + </tr> + <tr> + <td>{{HTMLElement("dt")}}</td> + <td>يمثل مصطلح يعرفه القادم < DD > .<dd>.</td> + </tr> + <tr> + <td>{{HTMLElement("dd")}}</td> + <td>يمثل تعريف المصطلحات الواردة فورا قبل ذلك.</td> + </tr> + <tr> + <td>{{HTMLElement("figure")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>يمثل الرقم يتضح كجزء من الوثيقة.</td> + </tr> + <tr> + <td>{{HTMLElement("figcaption")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>يمثل أسطورة شخصية .</td> + </tr> + <tr> + <td>{{HTMLElement("div")}}</td> + <td>يمثل وعاء العامة مع عدم وجود معنى خاص .</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="عناصر_النصوص">عناصر النصوص</h2> + +<table class="standard-table" dir="rtl"> + <thead> + <tr> + <th scope="col">العنصر</th> + <th scope="col">نبذة عنه</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("a")}}</td> + <td>يمثل <em>الارتباط التشعبي</em> وربط إلى مورد آخر .</td> + </tr> + <tr> + <td>{{HTMLElement("em")}}</td> + <td>يمثل خط مائل .</td> + </tr> + <tr> + <td>{{HTMLElement("strong")}}</td> + <td> يمثل خط مشدد .</td> + </tr> + <tr> + <td>{{HTMLElement("small")}}</td> + <td>يمثل خط نحيف .</td> + </tr> + <tr> + <td>{{HTMLElement("s")}}</td> + <td>يمثل نص مشطوب او محذوف</td> + </tr> + <tr> + <td>{{HTMLElement("cite")}}</td> + <td> + <p>يمثل عنوان العمل. .</p> + </td> + </tr> + <tr> + <td>{{HTMLElement("q")}}</td> + <td>يمثل الاقتباس المضمنة. .</td> + </tr> + <tr> + <td>{{HTMLElement("dfn")}}</td> + <td>يمثل مصطلح الذي يرد في أقرب محتوى الجد التعريف.</td> + </tr> + <tr> + <td>{{HTMLElement("abbr")}}</td> + <td>يمثل اختصار أو اختصار . التوسع في اختصار يمكن أن تكون ممثلة في سمة العنوان.</td> + </tr> + <tr> + <td>{{HTMLElement("data")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>الزميلة ل محتواه ما يعادل المقروءة آليا . ( هذا العنصر فقط في إصدار WHATWG للمعيار HTML ، و ليس في الإصدار W3C من HTML5</td> + </tr> + <tr> + <td>{{HTMLElement("time")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>يمثل قيمة التاريخ والوقت . أي ما يعادل المقروءة آليا يمكن أن تكون ممثلة في سمة التاريخ والوقت .</td> + </tr> + <tr> + <td>{{HTMLElement("code")}}</td> + <td>يمثل عنصر يكتب بداخله الكود</td> + </tr> + <tr> + <td>{{HTMLElement("var")}}</td> + <td>يمثل المتغير ، وهذا هو ، تعبير أو البرمجة الرياضية السياق الفعلي ، معرف تمثل ثابت ، رمزا تحديد الكمية الفعلية ، معلمة وظيفة ، أو مجرد نائب في النثر .</td> + </tr> + <tr> + <td>{{HTMLElement("samp")}}</td> + <td>يمثل الناتج من برنامج أو جهاز كمبيوتر .</td> + </tr> + <tr> + <td>{{HTMLElement("kbd")}}</td> + <td>تمثل مدخلات المستخدمين، في كثير من الأحيان من لوحة المفاتيح ، ولكن ليس بالضرورة . قد تمثل المدخلات الأخرى ، مثل الأوامر الصوتية كتب .</td> + </tr> + <tr> + <td>{{HTMLElement("sub")}},{{HTMLElement("sup")}}</td> + <td>يمثل نص منخفظ او مرتفع</td> + </tr> + <tr> + <td>{{HTMLElement("i")}}</td> + <td>تمثل بعض النص في صوت بديل أو المزاج، أو على الأقل من نوعية مختلفة ، مثل تسمية التصنيف، مصطلح تقني ، عبارة اصطلاحية ، الفكر، أو اسم السفينة</td> + </tr> + <tr> + <td>{{HTMLElement("b")}}</td> + <td>يمثل نص مشدد .</td> + </tr> + <tr> + <td>{{HTMLElement("u")}}</td> + <td>يمثل annoatation غير النصية التي العرض التقليدية و التسطير ، واصفة هذا النص كما يجري أخطأ في الهجاء أو وصفها الاسم الصحيح في النص الصيني</td> + </tr> + <tr> + <td>{{HTMLElement("mark")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>يمثل نص مشار اليه بالون الاصفر</td> + </tr> + <tr> + <td>{{HTMLElement("ruby")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>يمثل المحتوى إلى أن تكون علامة مع شروح روبي ، المديين القصير من النص قدمت جنبا إلى جنب مع النص. وكثيرا ما يستخدم هذا بالتزامن مع لغة شرق آسيا حيث تعمل شروح كدليل للنطق ، مثل furigana الياباني . .</td> + </tr> + <tr> + <td>{{HTMLElement("rt")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>يمثل نص الشرح روبي .</td> + </tr> + <tr> + <td>{{HTMLElement("rp")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>يمثل قوسين حول الشرح روبي ، وتستخدم لعرض الشرح بطريقة بديلة من قبل المتصفحات لا تدعم العرض القياسية ل شروحه.</td> + </tr> + <tr> + <td>{{HTMLElement("bdi")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>يمثل النص الذي يجب أن تكون معزولة عن محيطها ل تنسيق النص ثنائي الاتجاه . لأنها تتيح تضمين فترة من النص مع مختلف أو غير معروف، الاتجاهية .</td> + </tr> + <tr> + <td>{{HTMLElement("bdo")}}</td> + <td>يمثل اتجاهها من أبنائها ، من أجل تجاوز صراحة خوارزمية ثنائية الاتجاه يونيكود</td> + </tr> + <tr> + <td>{{HTMLElement("span")}}</td> + <td>يمثل النص مع عدم وجود معنى محدد . هذا لابد من استخدامها عند ينقل أي عنصر النص الدلالي الآخرين معنى كاف، وهو ، في هذه الحالة، وغالبا ما رفعتها سمات عالمية مثل الطبقة ، لانج ، أو دير.</td> + </tr> + <tr> + <td>{{HTMLElement("br")}}</td> + <td>يمثل سطر جديد</td> + </tr> + <tr> + <td>{{HTMLElement("wbr")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>يمثل فرصة كسر خط ، وهذا هو نقطة المقترحة لل التفاف النص من أجل تحسين إمكانية القراءة من تقسيم النص على عدة أسطر .</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="التعديلات">التعديلات</h2> + +<table class="standard-table" dir="rtl"> + <thead> + <tr> + <th scope="col">العنصر</th> + <th scope="col">نبذة عنه</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("ins")}}</td> + <td>عنصر مضاف او تم تعديله</td> + </tr> + <tr> + <td>{{HTMLElement("del")}}</td> + <td>عنصر محذوف وهو مثيل العنصر {{HTMLElement("s")}}</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="التضمين_و_الميديا">التضمين و الميديا</h2> + +<table class="standard-table" dir="rtl"> + <thead> + <tr> + <th scope="col">العنصر</th> + <th scope="col">نبذة عنه</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("img")}}</td> + <td>يستخدم لربط الصور بالوثيقه</td> + </tr> + <tr> + <td>{{HTMLElement("iframe")}}</td> + <td>يمثل السياق تصفح متداخلة ، وهذا هو وثيقة HTML المضمنة.</td> + </tr> + <tr> + <td>{{HTMLElement("embed")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>تمثل نقطة التكامل ل خارجي ، في كثير من الأحيان غير HTML ، تطبيق أو المحتوى التفاعلي .</td> + </tr> + <tr> + <td>{{HTMLElement("object")}}</td> + <td>تمثل الموارد الخارجية ، التي تعامل على أنها صورة، وثيقة الفرعية HTML ، أو الموارد الخارجية التي سيتم تجهيزها من قبل في المكونات .</td> + </tr> + <tr> + <td>{{HTMLElement("param")}}</td> + <td>تعرف المعلمات للاستخدام من قبل المكونات الإضافية التي يحتج بها <كائن > العناصر.</td> + </tr> + <tr> + <td>{{HTMLElement("video")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>يمثل الفيديو ، والملفات المرتبطة به الصوت و تعليق عليها، مع واجهة اللازمة لتشغيله .</td> + </tr> + <tr> + <td>{{HTMLElement("audio")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>يمثل الصوت ، أو تيار الصوت.</td> + </tr> + <tr> + <td>{{HTMLElement("source")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>يسمح المؤلفين لتحديد الموارد وسائل الإعلام البديلة ل عناصر الوسائط مثل {{HTMLElement("video")}} or {{HTMLElement("audio")}}.</td> + </tr> + <tr> + <td>{{HTMLElement("track")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>يسمح المؤلفين لتحديد مسار النص توقيت ل عناصر الوسائط مثل {{HTMLElement("video")}}<em>or {{HTMLElement("audio")}}.</em></td> + </tr> + <tr> + <td>{{HTMLElement("canvas")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>تمثل منطقة خريطة أبيت أن النصوص يمكن استخدامها ل تقديم الرسومات ، مثل الرسوم البيانية والرسوم البيانية لعبة ، أو أي الصور المرئية على الطاير .</td> + </tr> + <tr> + <td>{{HTMLElement("map")}}</td> + <td>بالتزامن مع {{HTMLElement("area")}}, يحدد مخطط صورة.</td> + </tr> + <tr> + <td>{{HTMLElement("area")}}</td> + <td>بالتزامن مع {{HTMLElement("map")}},يحدد مخطط صورة.</td> + </tr> + <tr> + <td>{{SVGElement("svg")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>تعرف على إد الإدارة الانتخابية دائرة التنمية الاقتصادية صورة اتجاهي .</td> + </tr> + <tr> + <td>{{MathMLElement("math")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>يحدد صيغة رياضية.</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="Tabular_data">Tabular data</h2> + +<table class="standard-table" dir="rtl"> + <thead> + <tr> + <th scope="col">العنصر</th> + <th scope="col">نبذة عنه</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("table")}}</td> + <td>تمثل البيانات مع أكثر من بعد واحد.</td> + </tr> + <tr> + <td>{{HTMLElement("caption")}}</td> + <td>يمثل عنوان الجدول.</td> + </tr> + <tr> + <td>{{HTMLElement("colgroup")}}</td> + <td>تمثل مجموعة من واحد أو أكثر من الأعمدة من الجدول.</td> + </tr> + <tr> + <td>{{HTMLElement("col")}}</td> + <td>يمثل عمود من الجدول.</td> + </tr> + <tr> + <td>{{HTMLElement("tbody")}}</td> + <td>يمثل كتلة من الصفوف التي تصف البيانات ملموسة من الجدول.</td> + </tr> + <tr> + <td>{{HTMLElement("thead")}}</td> + <td>يمثل كتلة من الصفوف التي تصف التسميات عمود من الجدول.</td> + </tr> + <tr> + <td>{{HTMLElement("tfoot")}}</td> + <td>يمثل كتلة من الصفوف التي تصف ملخصات عمود من الجدول.</td> + </tr> + <tr> + <td>{{HTMLElement("tr")}}</td> + <td>يمثل صف من الخلايا في الجدول.</td> + </tr> + <tr> + <td>{{HTMLElement("td")}}</td> + <td>يمثل خلية البيانات في الجدول.</td> + </tr> + <tr> + <td>{{HTMLElement("th")}}</td> + <td>يمثل خلية رأس في الجدول.</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="الاشكال"> الاشكال</h2> + +<table class="standard-table" dir="rtl"> + <thead> + <tr> + <th scope="col">العنصر</th> + <th scope="col">نبذة عنه</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("form")}}</td> + <td>عنصر تبادل المعلومات مع الخادم حيث يكون داخله مجموعه من العناصر تتيح لمستخدم التعديل والاضافه</td> + </tr> + <tr> + <td>{{HTMLElement("fieldset")}}</td> + <td>مثل عنصار او ضوابط مرتبة</td> + </tr> + <tr> + <td>{{HTMLElement("legend")}}</td> + <td>يمثل عنوان <code><fieldset> </code>.</td> + </tr> + <tr> + <td>{{HTMLElement("label")}}</td> + <td>يعتبر توضيح او اسم عنصر داخل <form></td> + </tr> + <tr> + <td>{{HTMLElement("input")}}</td> + <td>يمثل حقل من البينات مما يتحُيح للمستخدم استعمالها</td> + </tr> + <tr> + <td>{{HTMLElement("button")}}</td> + <td>عباره عن وز .</td> + </tr> + <tr> + <td>{{HTMLElement("select")}}</td> + <td> يمثل مجموعه من الخيارات المٌسدله المرتبة .</td> + </tr> + <tr> + <td>{{HTMLElement("datalist")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>يمثل قائمة منسدله تحوي مجموعه من الخيارات المعدة مسبقاً اشبه باقائمة .</td> + </tr> + <tr> + <td>{{HTMLElement("optgroup")}}</td> + <td>يمثل عنوان لمجموعه خيارات <option> الي تكون ادخل {{HTMLElement("optgroup")}} الي هي داخل {{HTMLElement("datalist")}}.</td> + </tr> + <tr> + <td>{{HTMLElement("option")}}</td> + <td>يمثلخيارات داخل العنصر{{HTMLElement("select")}} أو اقتراح من{{HTMLElement("datalist")}}.</td> + </tr> + <tr> + <td>{{HTMLElement("textarea")}}</td> + <td>مربع يكتب بداخله نص يمكن التحكم به .</td> + </tr> + <tr> + <td>{{HTMLElement("keygen")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>يمثل سطر مولد مفاتيح .</td> + </tr> + <tr> + <td>{{HTMLElement("output")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>سَحاب يمكن التحكم به .</td> + </tr> + <tr> + <td>{{HTMLElement("progress")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>يمثل شريط اخذ بالمتلاء يعني مثل الداون لود منيجر لما يكون ايحمل</td> + </tr> + <tr> + <td>{{HTMLElement("meter")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>يمثل قيمة مئويه اخذه بالمتلاء بشكل صغير .</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="العناصر_التفاعلية" style="line-height: 30px;">العناصر التفاعلية</h2> + +<table class="standard-table" dir="rtl"> + <thead> + <tr> + <th scope="col">العنصر</th> + <th scope="col">نبذة عنه</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("details")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>يمثل قائمة مُنسدله من الخيارات</td> + </tr> + <tr> + <td>{{HTMLElement("summary")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>وهو يمثل عنوان لقائمة العنصر <details<span style="line-height: 1.5;">> .</span></td> + </tr> + <tr> + <td>{{HTMLElement("menuitem")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>يمثل <em>الأوامر</em> التي تمكن المستخدم من الاستدعاء.</td> + </tr> + <tr> + <td>{{HTMLElement("menu")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> + <td>يمثل قائمة من العناصر .</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="وهنُاك_أيضاً">وهنُاك أيضاً</h2> + +<ul> + <li dir="rtl"><a href="https://developer.mozilla.org/en-US/docs/HTML/HTML5" title="HTML/HTML5">وهناك مجموعة من الوثائق حول HTML5</a>.</li> + <li dir="rtl">في <a href="https://developer.mozilla.org/en-US/docs/HTML/Element" title="HTML / العنصر">إشارة لجميع علامات HTML</a> ، بما في ذلك عناصر لم تعد صالحة في HTML5.</li> +</ul> 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 +--- +<p dir="rtl"><span class="seoSummary"><strong>HTML5 </strong>هي أحدث تطور للمعاير الذي يعرف <a href="/en-US/docs/HTML" title="HTML">HTML</a>. </span>يمثل المصطلح مفهومين مختلفين:</p> + +<ul dir="rtl"> + <li><span class="seoSummary">إنها نسخة جديدة من لغة HTML, مع عناصر وسمات وسلوكيات جديدة,</span></li> + <li><span class="seoSummary">ومجموعة أكبر من التقنيات التي تسمح بمواقع وتطبيقات ويب أكثر تنوعًا وقوة. تسمى هذه المجموعة أحيانًا (HTML5 & friends)</span><span class="seoSummary"> وغالبًا ما يتم اختصارها إلى HTML5 فقط.</span></li> +</ul> + +<p dir="rtl">تم تصميم هذه الصفحة المرجعية لتكون قابلة للاستخدام من قبل جميع مطوري الويب ، وترتبط هذه الصفحة المرجعية بالعديد من المصادر حول تقنيات HTML5 ، مصنفة في عدة مجموعات بناءً على وظيفتها.</p> + +<ul dir="rtl"> + <li><em>الدلالات: تتيح لك وصف المحتوى الخاص بك بدقة أكبر.</em></li> + <li><em>الاتصال: يتيح لك التواصل مع الخادم بطرق جديدة ومبتكرة.</em></li> + <li><em>عدم الإتصال بالإنترنت والتخزين: السماح لصفحات الويب بتخزين البيانات محليًا من جانب المستخدم والعمل دون اتصال بشكل أكثر كفاءة.</em></li> + <li><em>الوسائط المتعددة: جعل الفيديو والصوت ذو أولوية أولى في الويب المفتوح.</em></li> + <li><em>2D / 3D الرسوم & التأثيرات: السماح بمجموعة أكثر تنوعًا من خيارات العرض التقديمي.</em></li> + <li><em>الأداء والتكامل: توفير تحسين أكبر للسرعة واستخدام أفضل لأجهزة الكمبيوتر.</em></li> + <li><em>الوصول إلى الجهاز: السماح باستخدام أجهزة الإدخال والإخراج المختلفة.</em></li> + <li><em>التصميم: السماح للمؤلفين بكتابة مواضيع أكثر تطورا.</em></li> +</ul> + +<div class="cleared row topicpage-table"> +<h2 id="Semantics" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3827/HTML5_Semantics_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Semantics</h2> + +<dl> + <dt><a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Sections and outlines in HTML5</a></dt> + <dd>A look at the new outlining and sectioning element in HTML5: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}} and {{HTMLElement("aside")}}.</dd> + <dt dir="rtl"><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">أستخدام HTML5 audio and video</a></dt> + <dd dir="rtl">يتم تضمين عنصري {{HTMLElement ("audio")}} و {{HTMLElement ("video")}} والسماح بمعالجة محتوى الوسائط المتعددة الجديدة.</dd> + <dt dir="rtl"><a href="/en-US/docs/HTML/Forms_in_HTML" title="Forms in HTML5">النماذج في HTML5</a></dt> + <dd>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.</dd> + <dt>New semantic elements</dt> + <dd>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 <a href="/en-US/docs/HTML/HTML5/HTML5_element_list" title="HTML/HTML5/HTML5_element_list">valid HTML5 elements</a>.</dd> + <dt>Improvement in {{HTMLElement("iframe")}}</dt> + <dd>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.</dd> + <dt dir="rtl"><a href="/en-US/docs/MathML" title="MathML">MathML</a></dt> + <dd dir="rtl">السماح بتضمين المعادلات الرياضية مباشرة.</dd> + <dt dir="rtl"><a href="/en-US/docs/HTML/HTML5/Introduction_to_HTML5" title="HTML/HTML5/Introduction_to_HTML5">مقدمة إلى HTML5</a></dt> + <dd dir="rtl">This article introduces how to indicate to the problem that you are using HTML5 in your web design or web application.</dd> + <dt><a href="/en-US/docs/HTML/HTML5/HTML5_Parser" title="HTML/HTML5/HTML5 parser">HTML5-compliant parser</a></dt> + <dd>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.</dd> +</dl> + +<h2 id="Connectivity" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3839/HTML5_Connectivity_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Connectivity</h2> + +<dl> + <dt dir="rtl"><a href="/en-US/docs/WebSockets" title="WebSockets">Web Sockets</a></dt> + <dd dir="rtl">يسمح بإنشاء اتصال دائم بين الصفحة والخادم وتبادل البيانات بدون تنسيق HTML (Non-HTML) من خلال هذه الوسائل.</dd> + <dt><a href="/en-US/docs/Server-sent_events/Using_server-sent_events" title="Server-sent_events/Using_server-sent_events">Server-sent events</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt> + <dd>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.</dd> +</dl> + +<h2 id="Offline_storage" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Offline & storage</h2> + +<dl> + <dt><a href="/en-US/docs/HTML/Using_the_application_cache" title="Offline_resources_in_Firefox">Offline resources: the application cache</a></dt> + <dd>Firefox fully supports the HTML5 offline resource specification. Most others have offline resource support at some level.</dd> + <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Online and offline events</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/DOM/Storage" title="DOM/Storage">WHATWG client-side session and persistent storage (aka DOM Storage)</a></dt> + <dd>Client-side session and persistent storage allows web applications to store structured data on the client side.</dd> + <dt><a href="/en-US/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Using_files_from_web_applications" title="Using_files_from_web_applications">Using files from web applications</a></dt> + <dd>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 <span style="font-family: monospace;">{{HTMLElement("input")}}</span> of <a href="/en-US/docs/HTML/Element/Input#attr-type" title="HTML/Element/input#attr-type"><strong>type</strong></a> <span style="font-family: courier new;">file</span> HTML element's new <a href="/en-US/docs/HTML/Element/Input#attr-multiple" title="HTML/Element/input#attr-multiple"><strong>multiple</strong></a> attribute. There also is <a href="/en-US/docs/DOM/FileReader" title="DOM/FileReader"><code>FileReader</code></a>.</dd> +</dl> + +<h2 id="Multimedia" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3835/HTML5_Multimedia_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Multimedia</h2> + +<dl> + <dt><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">Using HTML5 audio and video</a></dt> + <dd>The {{HTMLElement("audio")}} and {{HTMLElement("video")}} elements embed and allow the manipulation of new multimedia content.</dd> + <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Using the Camera API</a></dt> + <dd>Allows using, manipulating, and storing an image from the computer's camera.</dd> + <dt>Track and WebVTT</dt> + <dd>The {{HTMLElement("track")}} element allows subtitles and chapters. <a href="/en-US/docs/HTML/WebVTT" title="HTML/WebVTT">WebVTT</a> is a text track format.</dd> +</dl> + +<h2 id="3D_graphics_effects" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3841/HTML5_3D_Effects_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">3D, graphics & effects</h2> + +<dl> + <dt><a href="/en-US/docs/Canvas_tutorial" title="Canvas tutorial">Canvas Tutorial</a></dt> + <dd>Learn about the new <code>{{HTMLElement("canvas")}}</code> element and how to draw graphs and other objects in Firefox.</dd> + <dt><a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">HTML5 text API for <code><canvas></code> elements</a></dt> + <dd>The HTML5 text API is now supported by {{HTMLElement("canvas")}} elements.</dd> + <dt><a href="/en-US/docs/WebGL" title="WebGL">WebGL</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/SVG" title="SVG">SVG</a></dt> + <dd>An XML-based format of vectorial images that can directly be embedded in the HTML.</dd> + <br> + <br> + <br> + <br> + + <dd></dd> + <dd></dd> +</dl> + +<div class="section"> +<h2 id="Performance_integration" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3831/HTML5_Performance_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Performance & integration</h2> + +<dl> + <dt><a href="/en-US/docs/DOM/Using_web_workers" title="Using web workers">Web Workers</a></dt> + <dd>Allows delegation of JavaScript evaluation to background threads, allowing these activities to prevent slowing down interactive events.</dd> + <dt><code><a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> Level 2</dt> + <dd>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 <a href="/en-US/docs/AJAX" title="AJAX">Ajax</a>.</dd> + <dt>JIT-compiling JavaScript engines</dt> + <dd>The new generation of JavaScript engines is much more powerful, leading to greater performance.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating_the_browser_history">History API</a></dt> + <dd>Allows the manipulation of the browser history. This is especially useful for pages loading interactively new information.</dd> + <dt><a href="/en-US/docs/HTML/Content_Editable" title="HTML/Content Editable">The contentEditable attribute: transform your website to a wiki!</a></dt> + <dd>HTML5 has standardized the contentEditable attribute. Learn more about this feature.</dd> + <dt><a href="/en-US/docs/DragDrop/Drag_and_Drop" title="DragDrop/Drag_and_Drop">Drag and drop</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Focus_management_in_HTML" title="Focus_management_in_HTML">Focus management in HTML</a></dt> + <dd>The new HTML5 <code>activeElement</code> and <code>hasFocus</code> attributes are supported.</dd> + <dt><a href="/en-US/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">Web-based protocol handlers</a></dt> + <dd>You can now register web applications as protocol handlers using the <code>navigator.registerProtocolHandler()</code> method.</dd> + <dt><a href="/en-US/docs/DOM/window.requestAnimationFrame" title="DOM/window.requestAnimationFrame"><code>requestAnimationFrame</code></a></dt> + <dd>Allows control of animations rendering to obtain optimal performance.</dd> + <dt><a href="/en-US/docs/DOM/Using_full-screen_mode" title="DOM/Using_full-screen_mode">Fullscreen API</a></dt> + <dd>Controls the usage of the whole screen for a Web page or application, without the browser UI displayed.</dd> + <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt> + <dd>Allows locking the pointer to the content, so games and similar applications don't lose focus when the pointer reaches the window limit.</dd> + <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Online and offline events</a></dt> + <dd>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.</dd> +</dl> + +<h2 id="Device_access" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3837/HTML5_Device_Access_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Device access</h2> + +<dl> + <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Using the Camera API</a></dt> + <dd>Allows using, manipulating, and storing an image from the computer's camera.</dd> + <dt><a href="/en-US/docs/DOM/Touch_events" title="DOM/Touch_events">Touch events</a></dt> + <dd>Handlers to react to events created by a user pressing touch screens.</dd> + <dt><a href="/en-US/docs/Using_geolocation" title="Using geolocation">Using geolocation</a></dt> + <dd>Let browsers locate the position of the user using geolocation.</dd> + <dt><a href="/en-US/docs/Detecting_device_orientation" title="Detecting_device_orientation">Detecting device orientation</a></dt> + <dd>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).</dd> + <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt> + <dd>Allows locking the pointer to the content, so games and similar application don't lose focus when the pointer reaches the window limit.</dd> +</dl> + +<h2 id="Styling" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3829/HTML5_Styling_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Styling</h2> + +<p><a href="/en-US/docs/CSS" title="CSS">CSS</a> has been extended to be able to style elements in a much more complex way. This is often referred as <a href="/en-US/docs/CSS/CSS3" title="CSS/CSS3">CSS3</a>, 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.</p> + +<dl> + <dt>New background styling features</dt> + <dd>It is now possible to put a shadow to a box, using {{cssxref("box-shadow")}} and <a href="/en-US/docs/CSS/Multiple_backgrounds" title="CSS/Multiple_backgrounds">multiple backgrounds</a> can be set.</dd> + <dt>More fancy borders</dt> + <dd>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.</dd> + <dt>Animating your style</dt> + <dd>Using <a href="/en-US/docs/CSS/Using_CSS_transitions" title="CSS/Using_CSS_transitions">CSS Transitions</a> to animate between different states or using <a href="/en-US/docs/CSS/Using_CSS_animations" title="CSS/Using_CSS_animations">CSS Animations</a> to animate parts of the page without a triggering event, you can now control mobile elements on your page.</dd> + <dt>Typography improvement</dt> + <dd>Authors have better control to reach better typography. They can control {{cssxref("text-overflow")}} and <a href="/en-US/docs/CSS/hyphens" title="CSS/hyphens">hyphenation</a>, but also can add a <a href="/en-US/docs/CSS/text-shadow" title="CSS/text-shadow">shadow</a> to it or control more precisely its <a href="/en-US/docs/CSS/text-decoration" title="SVG/Attribute/text-decoration">decorations</a>. Custom typefaces can be downloaded and applied thanks to the new {{cssxref("@font-face")}} at-rule.</dd> + <dt>New presentational layouts</dt> + <dd>In order to improve the flexibility of designs, two new layouts have been added: the <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="CSS/Using_CSS_multi-column_layouts">CSS multi-column layout</a>, and the <a href="/en-US/docs/CSS/Flexbox" title="CSS/Flexbox">CSS flexible box layout</a>.</dd> +</dl> +</div> +</div> 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 +--- +<p>هذه المقالات توفر المعلومات التي تساعدك على الإستفادة من التقنيات الخصصة و APIs (واجهة برمجة التطبيقات).</p> + +<div class="note"> +<p><strong>تذكير:</strong> هذه الصفحة ستكون غير منسقة لبعض الوقت حتى ننتهي من عملية نقل المحتوى. نحن آسفون!</p> +</div> + +<div>{{LandingPageListSubpages}}</div> + +<dl> + <dt><a href="/en-US/docs/JavaScript" title="/en-US/docs/JavaScript">الجافا سكربت</a></dt> + <dd>الجافا سكربت هي لغة برمجة نصية قوية تستخدم لإنشاء تطبيقات الويب.</dd> +</dl> + +<h2 id="أُنظر_أيضا">أُنظر أيضا</h2> + +<ul> + <li><a href="/en-US/docs/Web/Reference" title="/en-US/docs/Web/Reference">مرجع مطور الويب</a></li> +</ul> diff --git a/files/ar/web/guide/الرسومات/index.html b/files/ar/web/guide/الرسومات/index.html new file mode 100644 index 0000000000..9c8335471a --- /dev/null +++ b/files/ar/web/guide/الرسومات/index.html @@ -0,0 +1,47 @@ +--- +title: الرسومات على الويب +slug: Web/Guide/الرسومات +tags: + - رسومات + - رسوميات ثلاثية الأبعاد + - رسوميات ثنائية الأبعاد + - كانفاس +translation_of: Web/Guide/Graphics +--- +<p dir="rtl"><span class="seoSummary">غالباً ما تحتاج المواقع والتطبيقات لعرض الرسومات.</span> الصور العاديّة يمكن عرضها بسهولة باستخدام العنصر {{HTMLElement("img")}}، أو بإعداد خلفيّة الصفحة باستخدام الخاصيّة {{cssxref("background-image")}}. تستطيع أيضاً إنشاء رسومات في الهواء (طافية)، أو يمكنك التلاعب بالصور بعد حدث ما. <span class="seoSummary">هذه المقالات توفر نظرة حول كيف يمكنك القيام بهذه الأشياء.</span></p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" dir="rtl" id="الرسوميات_ثنائيّة_الأبعاد">الرسوميات ثنائيّة الأبعاد</h2> + +<dl> + <dt dir="rtl"><a href="/ar/docs/HTML/Canvas">الكانفاس</a></dt> + <dd dir="rtl">عنصر <a class="new" href="/ar/docs/Web/HTML/Element/canvas" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code><canvas></code></a> يوفر واجهات برمجيّة لرسم رسومات ثنائيّة الأبعاد باستخدام لغة الجافاسكربت.</dd> + <dt dir="rtl"><a href="/ar/docs/Web/SVG">الرسوميات المتجهيّة المتغيرة</a></dt> + <dd dir="rtl">تتيح <strong>الرسوميات المتجهيّة المتغيرة (SVG)</strong> لك استخدام الخطوط، المنحنيات، و غيرها من الأشكال الهندسيّة لتشكيل الرسومات. مع الفيكتور (vector) يمكنك إنشاء صور يمكن أن يتم تحجيمها بدون أن تفقد دقتها.</dd> +</dl> + +<p dir="rtl"><span class="alllinks"><a href="/ar/docs/tag/%D8%B1%D8%B3%D9%88%D9%85%D8%A7%D8%AA">عرض المزيد...</a></span></p> +</div> + +<div class="section"> +<h2 class="Documentation" dir="rtl" id="الرسوميات_ثلاثيّة_الأبعاد">الرسوميات ثلاثيّة الأبعاد</h2> + +<dl> + <dt dir="rtl"><a href="/ar/docs/Web/WebGL">تقنيّة WebGL</a></dt> + <dd dir="rtl">دليلك للبدء مع تقنيّة WebGL، الواجهة البرمجيّة المخصصة للويب لرسم رسوميات ثلاثيّة الأبعاد. تسمح هذه التقنيّة باستخدام معايير OpenGL ES في محتوى الويب.</dd> +</dl> + +<h2 dir="rtl" id="فيديو">فيديو</h2> + +<dl> + <dt dir="rtl"><a href="/ar/docs/Web/Guide/HTML/Using_HTML5_audio_and_video">استخدام ملفات الفيديو والصوت في لغة ترميز النص الفائق</a></dt> + <dd dir="rtl">تضمين ملفات الفيديو والصوت في صفحات الويب، والتحكم بتشغيلها.</dd> +</dl> + +<dl> + <dt dir="rtl"><a href="/ar/docs/WebRTC">تقنيّة WebRTC</a></dt> + <dd dir="rtl">تقنية RTC في الويب تعني الإتصال في الوقت الحالي (Real-Time Communications), وهي تقنيّة تسمح بتمكين تدفق الصوت والصورة ومشاركتها بين المُتصفحات.</dd> +</dl> +</div> +</div> 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: '<input>: 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 +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">The <strong>HTML <code><input></code> element</strong> 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")}}. </span>The <code><input></code> 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.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-text.html", "tabbed-shorter")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<h2 id="<input>_types"><input> types</h2> + +<p>How an <code><input></code> 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 <code>text</code>.</p> + +<p>The available types are as follows:</p> + +<table class="standard-table"> + <colgroup> + <col> + <col style="width: 50%;"> + <col> + </colgroup> + <thead> + <tr> + <th>Type</th> + <th>Description</th> + <th>Basic Examples</th> + <th>Spec</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("input/button", "button")}}</td> + <td>A push button with no default behavior displaying the value of the {{anch('htmlattrdefvalue', 'value')}} attribute, empty by default.</td> + <td id="examplebutton"> + <pre class="brush: html hidden notranslate"> +<input type="button" name="button" /></pre> + {{EmbedLiveSample("examplebutton",200,55,"","", "nobutton")}}</td> + <td></td> + </tr> + <tr> + <td>{{HTMLElement("input/checkbox", "checkbox")}}</td> + <td>A check box allowing single values to be selected/deselected.</td> + <td id="examplecheckbox"> + <pre class="brush: html hidden notranslate"> +<input type="checkbox" name="checkbox"/></pre> + {{EmbedLiveSample("examplecheckbox",200,55,"","", "nobutton")}}</td> + <td></td> + </tr> + <tr> + <td>{{HTMLElement("input/color", "color")}}</td> + <td>A control for specifying a color; opening a color picker when active in supporting browsers.</td> + <td id="examplecolor"> + <pre class="brush: html hidden notranslate"> +<input type="color" name="color"/></pre> + {{EmbedLiveSample("examplecolor",200,55,"","", "nobutton")}}</td> + <td>{{HTMLVersionInline("5")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/date", "date")}}</td> + <td>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.</td> + <td id="exampledate"> + <pre class="brush: html hidden notranslate"> +<input type="date" name="date"/></pre> + {{EmbedLiveSample("exampledate",200,55,"","", "nobutton")}}</td> + <td>{{HTMLVersionInline("5")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/datetime-local", "datetime-local")}}</td> + <td>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.</td> + <td id="exampledtl"> + <pre class="brush: html hidden notranslate"> +<input type="datetime-local" name="datetime-local"/></pre> + {{EmbedLiveSample("exampledtl",200,55,"","", "nobutton")}}</td> + <td>{{HTMLVersionInline("5")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/email", "email")}}</td> + <td>A field for editing an email address. Looks like a <code>text</code> input, but has validation parameters and relevant keyboard in supporting browsers and devices with dynamic keyboards.</td> + <td id="exampleemail"> + <pre class="brush: html hidden notranslate"> +<input type="email" name="email"/></pre> + {{EmbedLiveSample("exampleemail",200,55,"","", "nobutton")}}</td> + <td>{{HTMLVersionInline("5")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/file", "file")}}</td> + <td>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.</td> + <td id="examplefile"> + <pre class="brush: html hidden notranslate"> +<input type="file" accept="image/*, text/*" name="file"/></pre> + {{EmbedLiveSample("examplefile",'100%',55,"","", "nobutton")}}</td> + <td></td> + </tr> + <tr> + <td>{{HTMLElement("input/hidden", "hidden")}}</td> + <td>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!</td> + <td></td> + <td></td> + </tr> + <tr> + <td>{{HTMLElement("input/image", "image")}}</td> + <td>A graphical <code>submit</code> button. Displays an image defined by the <code>src</code> attribute. The {{anch('htmlattrdefalt', 'alt')}} attribute displays if the image {{anch('htmlattrdefsrc', 'src')}} is missing.</td> + <td id="exampleimage"> + <pre class="brush: html hidden notranslate"> +<input type="image" name="image" src="" alt="image input"/></pre> + {{EmbedLiveSample("exampleimage",200,55,"","", "nobutton")}}</td> + <td></td> + </tr> + <tr> + <td>{{HTMLElement("input/month", "month")}}</td> + <td>A control for entering a month and year, with no time zone.</td> + <td id="examplemonth"> + <pre class="brush: html hidden notranslate"> +<input type="month" name="month"/></pre> + {{EmbedLiveSample("examplemonth",200,55,"","", "nobutton")}}</td> + <td>{{HTMLVersionInline("5")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/number", "number")}}</td> + <td>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.</td> + <td id="examplenumber"> + <pre class="brush: html hidden notranslate"> +<input type="number" name="number"/></pre> + {{EmbedLiveSample("examplenumber",200,55,"","", "nobutton")}}</td> + <td>{{HTMLVersionInline("5")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/password", "password")}}</td> + <td>A single-line text field whose value is obscured. Will alert user if site is not secure.</td> + <td id="examplepassword"> + <pre class="brush: html hidden notranslate"> +<input type="password" name="password"/></pre> + {{EmbedLiveSample("examplepassword",200,55,"","", "nobutton")}}</td> + <td></td> + </tr> + <tr> + <td>{{HTMLElement("input/radio", "radio")}}</td> + <td>A radio button, allowing a single value to be selected out of multiple choices with the same {{anch('htmlattrdefname', 'name')}} value.</td> + <td id="exampleradio"> + <pre class="brush: html hidden notranslate"> +<input type="radio" name="radio"/></pre> + {{EmbedLiveSample("exampleradio",200,55,"","", "nobutton")}}</td> + <td></td> + </tr> + <tr> + <td>{{HTMLElement("input/range", "range")}}</td> + <td>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.</td> + <td id="examplerange"> + <pre class="brush: html hidden notranslate"> +<input type="range" name="range" min="0" max="25"/></pre> + {{EmbedLiveSample("examplerange",200,55,"","", "nobutton")}}</td> + <td>{{HTMLVersionInline("5")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/reset", "reset")}}</td> + <td>A button that resets the contents of the form to default values. Not recommended.</td> + <td id="examplereset"> + <pre class="brush: html hidden notranslate"> +<input type="reset" name="reset"/></pre> + {{EmbedLiveSample("examplereset",200,55,"","", "nobutton")}}</td> + <td></td> + </tr> + <tr> + <td>{{HTMLElement("input/search", "search")}}</td> + <td>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.</td> + <td id="examplesearch"> + <pre class="brush: html hidden notranslate"> +<input type="search" name="search"/></pre> + {{EmbedLiveSample("examplesearch",200,55,"","", "nobutton")}}</td> + <td>{{HTMLVersionInline("5")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/submit", "submit")}}</td> + <td>A button that submits the form.</td> + <td id="examplesubmit"> + <pre class="brush: html hidden notranslate"> +<input type="submit" name="submit"/></pre> + {{EmbedLiveSample("examplesubmit",200,55,"","", "nobutton")}}</td> + <td></td> + </tr> + <tr> + <td>{{HTMLElement("input/tel", "tel")}}</td> + <td>A control for entering a telephone number. Displays a telephone keypad in some devices with dynamic keypads.</td> + <td id="exampletel"> + <pre class="brush: html hidden notranslate"> +<input type="tel" name="tel"/></pre> + {{EmbedLiveSample("exampletel",200,55,"","", "nobutton")}}</td> + <td>{{HTMLVersionInline("5")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/text", "text")}}</td> + <td>The default value. A single-line text field. Line-breaks are automatically removed from the input value.</td> + <td id="exampletext"> + <pre class="brush: html hidden notranslate"> +<input type="text" name="text"/></pre> + {{EmbedLiveSample("exampletext",200,55,"","", "nobutton")}}</td> + <td></td> + </tr> + <tr> + <td>{{HTMLElement("input/time", "time")}}</td> + <td>A control for entering a time value with no time zone.</td> + <td id="exampletime"> + <pre class="brush: html hidden notranslate"> +<input type="time" name="time"/></pre> + {{EmbedLiveSample("exampletime",200,55,"","", "nobutton")}}</td> + <td>{{HTMLVersionInline("5")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/url", "url")}}</td> + <td>A field for entering a URL. Looks like a <code>text</code> input, but has validation parameters and relevant keyboard in supporting browsers and devices with dynamic keyboards.</td> + <td id="exampleurl"> + <pre class="brush: html hidden notranslate"> +<input type="url" name="url"/></pre> + {{EmbedLiveSample("exampleurl",200,55,"","", "nobutton")}}</td> + <td>{{HTMLVersionInline("5")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/week", "week")}}</td> + <td>A control for entering a date consisting of a week-year number and a week number with no time zone.</td> + <td id="exampleweek"> + <pre class="brush: html hidden notranslate"> +<input type="week" name="week"/></pre> + {{EmbedLiveSample("exampleweek",200,55,"","", "nobutton")}}</td> + <td>{{HTMLVersionInline("5")}}</td> + </tr> + <tr> + <th colspan="4">Obsolete values</th> + </tr> + <tr> + <td>{{HTMLElement("input/datetime", "datetime")}}</td> + <td>{{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.</td> + <td id="exampledatetime"> + <pre class="brush: html hidden notranslate"> +<input type="datetime" name="datetime"/></pre> + {{EmbedLiveSample("exampledatetime",200,75,"","", "nobutton")}}</td> + <td>{{HTMLVersionInline("5")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes">Attributes</h2> + +<p>The <code><input></code> element is so powerful because of its attributes; the {{htmlattrxref("type", "input")}} attribute, described with examples above, being the most important. Since every <code><input></code> 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.</p> + +<p>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 <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>. Those with extra importance as it relates to <code><input></code> are highlighted.</p> + +<table class="standard-table"> + <caption>Attributes for the {{htmlelement('input')}} element include <a href="/en-US/docs/Web/HTML/Global_attributes">global HTML attributes</a> and:</caption> + <thead> + <tr> + <th scope="col">Attribute</th> + <th scope="col">Type or Types</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{anch('htmlattrdefaccept', 'accept')}}</td> + <td>file</td> + <td>Hint for expected file type in file upload controls</td> + </tr> + <tr> + <td>{{anch('htmlattrdefalt', 'alt')}}</td> + <td>image</td> + <td>alt attribute for the image type. Required for accessibility</td> + </tr> + <tr> + <td>{{anch('htmlattrdefautocomplete', 'autocomplete')}}</td> + <td>all</td> + <td>Hint for form autofill feature</td> + </tr> + <tr> + <td>{{anch('htmlattrdefautofocus', 'autofocus')}}</td> + <td>all</td> + <td>Automatically focus the form control when the page is loaded</td> + </tr> + <tr> + <td>{{anch('htmlattrdefcapture', 'capture')}}</td> + <td>file</td> + <td>Media capture input method in file upload controls</td> + </tr> + <tr> + <td>{{anch('htmlattrdefchecked', 'checked')}}</td> + <td>radio, checkbox</td> + <td>Whether the command or control is checked</td> + </tr> + <tr> + <td>{{anch('htmlattrdefdirname', 'dirname')}}</td> + <td>text, search</td> + <td>Name of form field to use for sending the element's directionality in form submission</td> + </tr> + <tr> + <td>{{anch('htmlattrdefdisabled', 'disabled')}}</td> + <td>all</td> + <td>Whether the form control is disabled</td> + </tr> + <tr> + <td>{{anch('htmlattrdefform', 'form')}}</td> + <td>all</td> + <td>Associates the control with a form element</td> + </tr> + <tr> + <td>{{anch('htmlattrdefformaction', 'formaction')}}</td> + <td>image, submit</td> + <td>URL to use for form submission</td> + </tr> + <tr> + <td>{{anch('htmlattrdefformenctype', 'formenctype')}}</td> + <td>image, submit</td> + <td>Form data set encoding type to use for form submission</td> + </tr> + <tr> + <td>{{anch('htmlattrdefformmethod', 'formmethod')}}</td> + <td>image, submit</td> + <td>HTTP method to use for form submission</td> + </tr> + <tr> + <td>{{anch('htmlattrdefformnovalidate', 'formnovalidate')}}</td> + <td>image, submit</td> + <td>Bypass form control validation for form submission</td> + </tr> + <tr> + <td>{{anch('htmlattrdefformtarget', 'formtarget')}}</td> + <td>image, submit</td> + <td>Browsing context for form submission</td> + </tr> + <tr> + <td>{{anch('htmlattrdefheight', 'height')}}</td> + <td>image</td> + <td>Same as <code>height</code> attribute for {{htmlelement('img')}}; vertical dimension</td> + </tr> + <tr> + <td>{{anch('htmlattrdeflist', 'list')}}</td> + <td>almost all</td> + <td>Value of the id attribute of the {{htmlelement('datalist')}} of autocomplete options</td> + </tr> + <tr> + <td>{{anch('htmlattrdefmax', 'max')}}</td> + <td>numeric types</td> + <td>Maximum value</td> + </tr> + <tr> + <td>{{anch('htmlattrdefmaxlength', 'maxlength')}}</td> + <td>password, search, tel, text, url</td> + <td>Maximum length (number of characters) of <code>value</code></td> + </tr> + <tr> + <td>{{anch('htmlattrdefmin', 'min')}}</td> + <td>numeric types</td> + <td>Minimum value</td> + </tr> + <tr> + <td>{{anch('htmlattrdefminlength', 'minlength')}}</td> + <td>password, search, tel, text, url</td> + <td>Minimum length (number of characters) of <code>value</code></td> + </tr> + <tr> + <td>{{anch('htmlattrdefmultiple', 'multiple')}}</td> + <td>email, file</td> + <td>Boolean. Whether to allow multiple values</td> + </tr> + <tr> + <td>{{anch('htmlattrdefname', 'name')}}</td> + <td>all</td> + <td>Name of the form control. Submitted with the form as part of a name/value pair.</td> + </tr> + <tr> + <td>{{anch('htmlattrdefpattern', 'pattern')}}</td> + <td>password, text, tel</td> + <td>Pattern the <code>value</code> must match to be valid</td> + </tr> + <tr> + <td>{{anch('htmlattrdefplaceholder', 'placeholder')}}</td> + <td>password, search, tel, text, url</td> + <td>Text that appears in the form control when it has no value set</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/HTML/Attributes/readonly">readonly</a></td> + <td>almost all</td> + <td>Boolean. The value is not editable</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/HTML/Attributes/required">required</a></td> + <td>almost all</td> + <td>Boolean. A value is required or must be check for the form to be submittable</td> + </tr> + <tr> + <td>{{anch('htmlattrdefsize', 'size')}}</td> + <td>email, password, tel, text</td> + <td>Size of the control</td> + </tr> + <tr> + <td>{{anch('htmlattrdefsrc', 'src')}}</td> + <td>image</td> + <td>Same as <code>src</code> attribute for {{htmlelement('img')}}; address of image resource</td> + </tr> + <tr> + <td>{{anch('htmlattrdefstep', 'step')}}</td> + <td>numeric types</td> + <td>Incremental values that are valid.</td> + </tr> + <tr> + <td>{{anch('htmlattrdeftype', 'type')}}</td> + <td>all</td> + <td>Type of form control</td> + </tr> + <tr> + <td>{{anch('htmlattrdefvalue', 'value')}}</td> + <td>all</td> + <td>Current value of the form control. Submitted with the form as part of a name/value pair.</td> + </tr> + <tr> + <td>{{anch('htmlattrdefwidth', 'width')}}</td> + <td>image</td> + <td>Same as <code>width</code> attribute for {{htmlelement('img')}}</td> + </tr> + </tbody> +</table> + +<p>A few additional non-standard attributes are listed following the descriptions of the standard attributes.</p> + +<h3 id="Individual_attributes">Individual attributes</h3> + +<dl> + <dt id="htmlattrdefaccept">{{htmlattrdef("accept")}}</dt> + <dd> + <p>Valid for the <code>file</code> input type only, the <code>accept</code> attribute defines which file types are selectable in a <code>file</code> upload control. See the {{HTMLElement("input/file", "file")}} input type.</p> + </dd> + <dt id="htmlattrdefalt">{{htmlattrdef("alt")}}</dt> + <dd> + <p>Valid for the <code>image</code> button only, the <code>alt</code> attribute provides alternative text for the image, displaying the value of the attribute if the image <a href="#htmlattrdefsrc"><code>src</code></a> is missing or otherwise fails to load. See the {{HTMLElement("input/image", "image")}} input type.</p> + </dd> + <dt id="htmlattrdefautocomplete">{{htmlattrdef("autocomplete")}}</dt> + <dd> + <p>(<strong>Not</strong> a Boolean attribute!) The <code><a href="/en-US/docs/Web/HTML/Attributes/autocomplete">autocomplete</a></code> 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 <code>email</code> addresses in an email input field. See {{SectionOnPage("/en-US/docs/Web/HTML/Attributes/autocomplete", "Values")}} for permitted values.</p> + + <p>The <code>autocomplete</code> attribute is valid on <code>hidden</code>, <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>date</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>datetime-local</code>, <code>number</code>, <code>range</code>, <code>color</code>, and <code>password</code>. This attribute has no effect on input types that do not return numeric or text data, being valid for all input types except <code>checkbox</code>, <code>radio</code>, <code>file</code>, or any of the button types.</p> + + <p>See <a href="/en-US/docs/Web/HTML/Attributes/autocomplete">The HTML autocomplete attribute</a> for additional information, including information on password security and how <code>autocomplete</code> is slightly different for <code>hidden</code> than for other input types.</p> + </dd> + <dt id="htmlattrdefautofocus">{{htmlattrdef("autofocus")}}</dt> + <dd> + <p>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).</p> + + <div class="note"> + <p><strong>Note:</strong> An element with the <code>autofocus</code> attribute may gain focus before the {{domxref("DOMContentLoaded")}} event is fired.</p> + </div> + + <p>No more than one element in the document may have the <code>autofocus</code> attribute. If put on more than one element, the first one with the attribute receives focus.</p> + + <p>The <code>autofocus</code> attribute cannot be used on inputs of type <code>hidden</code>, since hidden inputs cannot be focused.</p> + + <div class="warning"> + <p><strong>Warning:</strong> Automatically focusing a form control can confuse visually-impaired people using screen-reading technology and people with cognitive impairments. When <code>autofocus</code> is assigned, screen-readers "teleport" their user to the form control without warning them beforehand.</p> + </div> + + <p>Use careful consideration for accessibility when applying the <code>autofocus</code> 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.</p> + </dd> + <dt id="htmlattrdefcapture">{{htmlattrdef("capture")}}</dt> + <dd> + <p>Introduced in the HTML Media Capture specification and valid for the <code>file</code> input type only, the <code>capture</code> attribute defines which media—microphone, video, or camera—should be used to capture a new file for upload with <code>file</code> upload control in supporting scenarios. See the {{HTMLElement("input/file", "file")}} input type.</p> + </dd> + <dt id="htmlattrdefchecked">{{htmlattrdef("checked")}}</dt> + <dd> + <p>Valid for both <code>radio</code> and <code>checkbox</code> types, <code>checked</code> is a Boolean attribute. If present on a <code>radio</code> type, it indicates that that radio button is the currently selected one in the group of same-named radio buttons. If present on a <code>checkbox</code> type, it indicates that the checkbox is checked by default (when the page loads). It does <em>not</em> indicate whether this checkbox is currently checked: if the checkbox’s state is changed, this content attribute does not reflect the change. (Only the <a href="/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code>’s <code>checked</code> IDL attribute</a> is updated.)</p> + + <div class="note"> + <p><strong>Note:</strong> Unlike other input controls, a checkboxes and radio buttons value are only included in the submitted data if they are currently <code>checked</code>. If they are, the name and the value(s) of the checked controls are submitted.</p> + + <p>For example, if a checkbox whose <code>name</code> is <code>fruit</code> has a <code>value</code> of <code>cherry</code>, and the checkbox is checked, the form data submitted will include <code>fruit=cherry</code>. If the checkbox isn't active, it isn't listed in the form data at all. The default <code>value</code> for checkboxes and radio buttons is <code>on</code>.</p> + </div> + </dd> + <dt id="htmlattrdefdirname">{{htmlattrdef("dirname")}}</dt> + <dd> + <p>Valid for <code>text</code> and <code>search</code> input types only, the <code>dirname</code> 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 <a href="#htmlattrdefname"><code>name</code></a> and <a href="#htmlattrdefvalue"><code>value</code></a>, the second being the value of the <code>dirname</code> as the name with the value of <code>ltr</code> or <code>rtl</code> being set by the browser.</p> + + <pre class="notranslate"><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 --> +</pre> + + <p>When the form above is submitted, the input cause both the <code>name</code> / <code>value</code> pair of <code>fruit=cherry</code> and the <code>dirname</code> / direction pair of <code>fruit.dir=ltr</code> to be sent.</p> + </dd> + <dt id="htmlattrdefdisabled">{{htmlattrdef("disabled")}}</dt> + <dd> + <p>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.</p> + + <p>Specifically, disabled inputs do not receive the {{domxref("Element/click_event", "click")}} event, and disabled inputs are not submitted with the form.</p> + + <div class="note"> + <p><strong>Note:</strong> Although not required by the specification, Firefox will by default <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persist the dynamic disabled state</a> of an <code><input></code> across page loads. Use the {{htmlattrxref("autocomplete","input")}} attribute to control this feature.</p> + </div> + </dd> + <dt id="htmlattrdefform">{{htmlattrdef("form")}}</dt> + <dd> + <p>A string specifying the {{HTMLElement("form")}} element with which the input is associated (that is, its <strong>form owner</strong>). This string's value, if present, must match the {{htmlattrxref("id")}} of a <code><form></code> element in the same document. If this attribute isn't specified, the <code><input></code> element is associated with the nearest containing form, if any.</p> + + <p>The <code>form</code> attribute lets you place an input anywhere in the document but have it included with a form elsewhere in the document.</p> + + <div class="note"> + <p><strong>Note:</strong> An input can only be associated with one form.</p> + </div> + </dd> + <dt id="htmlattrdefformaction">{{htmlattrdef('formaction')}}</dt> + <dd> + <p>Valid for the <code>image</code> and <code>submit</code> input types only. See the {{HTMLElement("input/submit", "submit")}} input type for more information.</p> + </dd> + <dt id="htmlattrdefformenctype">{{htmlattrdef('formenctype')}}</dt> + <dd> + <p>Valid for the <code>image</code> and <code>submit</code> input types only. See the {{HTMLElement("input/submit", "submit")}} input type for more information.</p> + </dd> + <dt id="htmlattrdefformmethod">{{htmlattrdef('formmethod')}}</dt> + <dd> + <p>Valid for the <code>image</code> and <code>submit</code> input types only. See the {{HTMLElement("input/submit", "submit")}} input type for more information.</p> + </dd> + <dt id="htmlattrdefformnovalidate">{{htmlattrdef('formnovalidate')}}</dt> + <dd> + <p>Valid for the <code>image</code> and <code>submit</code> input types only. See the {{HTMLElement("input/submit", "submit")}} input type for more information.</p> + </dd> + <dt id="htmlattrdefformtarget">{{htmlattrdef('formtarget')}}</dt> + <dd> + <p>Valid for the <code>image</code> and <code>submit</code> input types only. See the {{HTMLElement("input/submit", "submit")}} input type for more information.</p> + </dd> + <dt id="htmlattrdefheight">{{htmlattrdef("height")}}</dt> + <dd> + <p>Valid for the <code>image</code> input button only, the <code>height</code> is the height of the image file to display to represent the graphical submit button. See the {{HTMLElement("input/image", "image")}} input type.</p> + </dd> + <dt id="htmlattrdefheight">{{htmlattrdef("id")}}</dt> + <dd> + <p>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 <code>for</code> attribute to link the label with the form control. See {{htmlelement('label')}}.</p> + </dd> + <dt id="htmlattrdefheight">{{htmlattrdef("inputmode")}}</dt> + <dd> + <p>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 <code>none</code>, <code>text</code>, <code>tel</code>, <code>url</code>, <code>email</code>, <code>numeric</code>, <code>decimal</code>, and <code>search</code>.</p> + </dd> + <dt id="htmlattrdeflist">{{htmlattrdef("list")}}</dt> + <dd id="datalist"> + <p>The value given to the <code>list</code> attribute should be. the {{domxref("Element.id", "id")}} of a {{HTMLElement("datalist")}} element located in the same document. The <code><datalist></code> 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.</p> + + <pre class="brush: html hidden notranslate"><datalist id="colorsxx"> + <option>#ff0000</option> + <option>#ee0000</option> + <option>#dd0000</option> + <option>#cc0000</option> + <option>#bb0000</option> +</datalist> +<datalist id="numbersxx"> + <option>0</option> + <option>2</option> + <option>4</option> + <option>8</option> + <option>16</option> + <option>32</option> + <option>64</option> +</datalist> +<datalist id="fruitsxx"> + <option>cherry</option> + <option>banana</option> + <option>mango</option> + <option>orange</option> + <option>blueberry</option> +</datalist> +<datalist id="urlsxx"> + <option>https://developer.mozilla.org</option> + <option>https://caniuse.com/</option> + <option>https://mozilla.com</option> + <option>https://mdn.github.io</option> + <option>https://www.youtube.com/user/firefoxchannel</option> +</datalist> + +<p><label for="textx">Text</label> <input type="text" list="fruitsxx" id="textx"/></p> +<p><label for="colorx">Color</label> <input type="color" list="colorsxx" id="colorx"/></p> +<p><label for="rangex">Range</label> <input type="range" min="0" max="64" list="numbersxx" id="rangex"/></p> +<p><label for="numberx">Number</label> <input type="number" min="0" max="64" list="numbersxx" id="numberx"/></p> +<p><label for="urlx">URL</label> <input type="url" list="urlsxx" id="urlx"/></p></pre> + + <p>{{EmbedLiveSample("datalist",400,275,"","", "nobutton")}}</p> + + <p>It is valid on <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>date</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>datetime-local</code>, <code>number</code>, <code>range</code>, and <code>color</code>.</p> + + <p>Per the specifications, the <code>list</code> attribute is not supported by the <code>hidden</code>, <code>password</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>, or any of the button types.</p> + + <p>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 <a href="/en-US/docs/Web/HTML/Element/datalist#Browser_compatibility">browser compatibility table</a> for the other input types.</p> + + <p>See the {{htmlelement('datalist')}} element.</p> + </dd> + <dt id="htmlattrdefmax"><a href="/en-US/docs/Web/HTML/Attributes/max">{{htmlattrdef("max")}}</a></dt> + <dd> + <p>Valid for <code>date</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>datetime-local</code>, <code>number</code>, and <code>range</code>, 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 <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>. If the value of the <code>max</code> attribute isn't a number, then the element has no maximum value.</p> + + <p>There is a special case: if the data type is periodic (such as for dates or times), the value of <code>max</code> may be lower than the value of <code>min</code>, which indicates that the range may wrap around; for example, this allows you to specify a time range from 10 PM to 4 AM.</p> + </dd> + <dt id="htmlattrdefmaxlength">{{htmlattrdef("maxlength")}}</dt> + <dd> + <p>Valid for <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, and <code>password</code>, 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 <code>0</code> or higher. If no <code>maxlength</code> 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 <code>minlength</code>.</p> + + <p>The input will fail <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a> if the length of the text entered into the field is greater than <code>maxlength</code> UTF-16 code units long. By default, browsers prevent users from entering more characters than allowed by the <code>maxlength</code> attribute. See {{anch("Client-side validation")}} for more information.</p> + </dd> + <dt id="htmlattrdefmin">{{htmlattrdef("min")}}</dt> + <dd> + <p>Valid for <code>date</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>datetime-local</code>, <code>number</code>, and <code>range</code>, 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 <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>. If the value of the <code>min</code> attribute isn't a number, then the element has no minimum value.</p> + + <p>This value must be less than or equal to the value of the <code>max</code> attribute. If the <code>min</code> attribute is present but is not specified or is invalid, no <code>min</code> value is applied. If the <code>min</code> attribute is valid and a non-empty value is less than the minimum allowed by the <code>min</code> attribute, constraint validation will prevent form submission. See {{anch("Client-side validation")}} for more information.</p> + + <p>There is a special case: if the data type is periodic (such as for dates or times), the value of <code>max</code> may be lower than the value of <code>min</code>, which indicates that the range may wrap around; for example, this allows you to specify a time range from 10 PM to 4 AM.</p> + </dd> + <dt id="htmlattrdefminlength">{{htmlattrdef("minlength")}}</dt> + <dd> + <p>Valid for <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, and <code>password</code>, 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 <code>maxlength</code>. If no <code>minlength</code> is specified, or an invalid value is specified, the input has no minimum length.</p> + + <p>The input will fail <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a> if the length of the text entered into the field is fewer than <code>minlength</code> UTF-16 code units long, preventing form submission. See {{anch("Client-side validation")}} for more information.</p> + </dd> + <dt id="htmlattrdefmultiple">{{htmlattrdef("multiple")}}</dt> + <dd> + <p>The Boolean <code>multiple</code> 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 <code>file</code> input. See the {{HTMLElement("input/email", "email")}} and {{HTMLElement("input/file", "file")}} input type.</p> + </dd> + <dt id="htmlattrdefname">{{htmlattrdef("name")}}</dt> + <dd> + <p>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.</p> + + <h5 id="Whats_in_a_name">What's in a name</h5> + + <p>Consider the <code>name</code> a required attribute (even though it's not). If an input has no <code>name</code> specified, or <code>name</code> 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.)</p> + + <p>There are two special cases:</p> + + <ol> + <li><code>_charset_</code> : If used as the name of an <code><input></code> element of type {{HTMLElement("input/hidden", "hidden")}}, the input's <code>value</code> is automatically set by the {{Glossary("user agent")}} to the character encoding being used to submit the form.</li> + <li><code>isindex</code>: For historical reasons, the name <code><a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-name">isindex</a></code> is not allowed.</li> + </ol> + + <h5 id="name_and_radio_buttons">name and radio buttons</h5> + + <p>The <a href="#htmlattrdefname"><code>name</code></a> attribute creates a unique behavior for radio buttons.</p> + + <p>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,</p> + + <p>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.</p> + + <p>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.</p> + + <h5 id="HTMLFormElement.elements">HTMLFormElement.elements</h5> + + <p>When an input element is given a <code>name</code>, that name becomes a property of the owning form element's {{domxref("HTMLFormElement.elements")}} property. If you have an input whose <code>name</code> is set to <code>guest</code> and another whose <code>name</code> is <code>hat-size</code>, the following code can be used:</p> + + <pre class="brush: js notranslate">let form = document.querySelector("form"); + +let guestName = form.elements.guest; +let hatSize = form.elements["hat-size"]; +</pre> + + <p>When this code has run, <code>guestName</code> will be the {{domxref("HTMLInputElement")}} for the <code>guest</code> field, and <code>hatSize</code> the object for the <code>hat-size</code> field.</p> + + <div class="warning"> + <p><strong>Warning:</strong> Avoid giving form elements a <code>name</code> 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.</p> + </div> + </dd> + <dt id="htmlattrdefpattern">{{htmlattrdef("pattern")}}</dt> + <dd> + <div id="pattern-include"> + <p>The <code>pattern</code> attribute, when specified, is a regular expression that the input's {{htmlattrxref("value")}} must match in order for the value to pass <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>. It must be a valid JavaScript regular expression, as used by the {{jsxref("RegExp")}} type, and as documented in our <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">guide on regular expressions</a>; the <code>'u'</code> 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.</p> + + <p>If the <code>pattern</code> 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.</p> + + <div class="note"> + <p><strong>Tip:</strong> If using the <code>pattern</code> 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.</p> + </div> + </div> + + <p>See {{anch("Client-side validation")}} for more information.</p> + </dd> + <dt id="htmlattrdefplaceholder">{{htmlattrdef("placeholder")}}</dt> + <dd> + <p>The <code>placeholder</code> 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 <em>must not</em> 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".</p> + + <div class="note"> + <p><strong>Note:</strong> The <code>placeholder</code> 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.</p> + </div> + </dd> + <dt id="htmlattrdefreadonly">{{htmlattrdef("readonly")}}</dt> + <dd> + <p>A Boolean attribute which, if present, indicates that the user should not be able to edit the value of the input. The <code>readonly</code> attribute is supported <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>date</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>datetime-local</code>, <code>number</code>, and <code>password</code> input types.</p> + + <p>See the <a href="/en-US/docs/Web/HTML/Attributes/readonly">HTML attribute: <code>readonly</code></a> for more information.</p> + </dd> + <dt id="htmlattrdefrequired">{{htmlattrdef("required")}}</dt> + <dd> + <p><code>required</code> 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 <code>required</code> attribute is supported <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>date</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>datetime-local</code>, <code>number</code>, <code>password</code>, <code>checkbox</code>, <code>radio</code>, and <code>file</code>.</p> + + <p>See {{anch("Client-side validation")}} and the <a href="/en-US/docs/Web/HTML/Attributes/required">HTML attribute: <code>required</code></a> for more information.</p> + </dd> + <dt id="htmlattrdefsize">{{htmlattrdef("size")}}</dt> + <dd>Valid for <code>email</code>, <code>password</code>, <code>tel</code>, and <code>text</code> <code>input</code> types only. Specifies how much of the input is shown. Basically creates same result as setting CSS <code>width</code> property with a few specialities. The actual unit of the value depends on the input type. For <code>password</code> and <code>text</code>, it is a number of characters (or <code>em</code> units) with a default value of <code>20</code>, and for others, it is <code>pixel</code>s. CSS width takes precedence over size attribute.</dd> + <dt id="htmlattrdefsrc">{{htmlattrdef("src")}}</dt> + <dd> + <p>Valid for the <code>image</code> input button only, the <code>src</code> 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.</p> + </dd> + <dt id="htmlattrdefstep">{{htmlattrdef("step")}}</dt> + <dd> + <div id="step-include"> + <p>Valid for the numeric input types, including <code>number</code>, date/time input types, and <code>range</code>, the <code><a href="/en-US/docs/Web/HTML/Attributes/step">step</a></code> attribute is a number that specifies the granularity that the value must adhere to.</p> + + <p>If not explicitly included, <code>step</code> defaults to 1 for <code>number</code> and <code>range</code>, 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 <code>any</code>, which means no stepping is implied, and any value is allowed (barring other constraints, such as <code>{{anch("min")}}</code> and <code>{{anch("max")}}</code>).</p> + + <p>If <code>any</code> is not explicity set, valid values for the <code>number</code>, date/time input types, and <code>range</code> input types are equal to the basis for stepping - the <code>{{anch("min")}}</code> value and increments of the step value, up to the <code>{{anch("max")}}</code> value, if specified.</p> + + <p>For example, if you have <code><input type="number" min="10" step="2"></code>, then any even integer, <code>10</code> or greater, is valid. If omitted, <code><input type="number"></code>, any integer is valid, but floats (like <code>4.2</code>) are not valid, because <code>step</code> defaults to <code>1</code>. For <code>4.2</code> to be valid, <code>step</code> would have had to be set to <code>any</code>, 0.1, 0.2, or any the <code>min</code> value would have had to be a number ending in <code>.2</code>, such as <code><input type="number" min="-5.2"></code></p> + + <div class="note"> + <p><strong>Note:</strong> 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 <code>:invalid</code> pseudoclass.</p> + </div> + </div> + + <p>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 <strong>default step is 60 seconds</strong>.</p> + + <p>See {{anch("Client-side validation")}} for more information.</p> + </dd> + <dt id="htmlattrdeftype">{{htmlattrdef("tabindex")}}</dt> + <dd> + <p>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.</p> + </dd> + <dt id="htmlattrdefformenctype">{{htmlattrdef('title')}}</dt> + <dd> + <p>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 <code>for</code> attribute set to the form control's {{htmlattrdef('id')}} attribute. See {{anch("Labels")}} below.</p> + </dd> + <dt id="htmlattrdeftype">{{htmlattrdef("type")}}</dt> + <dd> + <p>A string specifying the type of control to render. For example, to create a checkbox, a value of <code>checkbox</code> is used. If omitted (or an unknown value is specified), the input type <code>text</code> is used, creating a plaintext input field.</p> + + <p>Permitted values are listed in {{anch("<input> types", "<code><input></code> types")}} above.</p> + </dd> + <dt id="htmlattrdefvalue">{{htmlattrdef("value")}}</dt> + <dd> + <p>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 <code>value</code> property. The <code>value</code> attribute is always optional, though should be considered mandatory for <code>checkbox</code>, <code>radio</code>, and <code>hidden</code>.</p> + </dd> + <dt id="htmlattrdefwidth">{{htmlattrdef("width")}}</dt> + <dd> + <p>Valid for the <code>image</code> input button only, the <code>width</code> is the width of the image file to display to represent the graphical submit button. See the {{HTMLElement("input/image", "image")}} input type.</p> + </dd> +</dl> + +<h3 id="Non-standard_attributes">Non-standard attributes</h3> + +<p>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.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Attribute</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("autocorrect")}}</code></td> + <td>A string indicating whether or not autocorrect is <code>on</code> or <code>off</code>. <strong>Safari only.</strong></td> + </tr> + <tr> + <td><code>{{anch("incremental")}}</code></td> + <td>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. <strong>WebKit and Blink only (Safari, Chrome, Opera, etc.).</strong></td> + </tr> + <tr> + <td><code>{{anch("mozactionhint")}}</code></td> + <td>A string indicating the type of action that will be taken when the user presses the <kbd>Enter</kbd> or <kbd>Return</kbd> key while editing the field; this is used to determine an appropriate label for that key on a virtual keyboard. <strong>Firefox for Android only</strong>.</td> + </tr> + <tr> + <td><code>{{anch("orient")}}</code></td> + <td>Sets the orientation of the range slider. <strong>Firefox only</strong>.</td> + </tr> + <tr> + <td><code>{{anch("results")}}</code></td> + <td>The maximum number of items that should be displayed in the drop-down list of previous search queries. <strong>Safari only.</strong></td> + </tr> + <tr> + <td><code>{{anch("webkitdirectory")}}</code></td> + <td>A Boolean indicating whether or not to only allow the user to choose a directory (or directories, if <code>{{anch("multiple")}}</code> is also present)</td> + </tr> + </tbody> +</table> + +<dl> + <dt>{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</dt> + <dd>{{page("/en-US/docs/Web/HTML/Element/input/text", "autocorrect-include")}}</dd> + <dt>{{htmlattrdef("incremental")}} {{non-standard_inline}}</dt> + <dd>{{page("/en-US/docs/Web/HTML/Element/input/search", "incremental-include")}}</dd> + <dt>{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</dt> + <dd>{{page("/en-US/docs/Web/HTML/Element/input/text", "mozactionhint-include")}}</dd> + <dt>{{htmlattrdef("orient")}} {{non-standard_inline}}</dt> + <dd>{{page("/en-US/docs/Web/HTML/Element/input/range", "orient-include")}}</dd> + <dt>{{htmlattrdef("results")}} {{non-standard_inline}}</dt> + <dd>{{page("/en-US/docs/Web/HTML/Element/input/search", "results-include")}}</dd> + <dt>{{htmlattrdef("webkitdirectory")}} {{non-standard_inline}}</dt> + <dd>{{page("/en-US/docs/Web/HTML/Element/input/file", "webkitdirectory-include")}}</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p>The following methods are provided by the {{domxref("HTMLInputElement")}} interface which represents <code><input></code> elements in the DOM. Also available are those methods specified by the parent interfaces, {{domxref("HTMLElement")}}, {{domxref("Element")}}, {{domxref("Node")}}, and {{domxref("EventTarget")}}.</p> + +<dl> + <dt>{{domxref("HTMLInputElement.checkValidity", "checkValidity()")}}</dt> + <dd>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.</dd> + <dt>{{domxref("HTMLFormElement.reportValidity", "reportValidity()")}}</dt> + <dd>Returns <code>true</code> if the element's value passes validity checks; otherwise, returns <code>false</code>.</dd> + <dt>{{domxref("HTMLInputElement.select", "select()")}}</dt> + <dd>Selects the entire content of the <code><input></code> 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.</dd> + <dt>{{domxref("HTMLInputElement.setCustomValidity", "setCustomValidity()")}}</dt> + <dd>Sets a custom message to display if the input element's value isn't valid.</dd> + <dt>{{domxref("HTMLInputElement.setRangeText", "setRangeText()")}}</dt> + <dd>Sets the contents of the specified range of characters in the input element to a given string. A <code>selectMode</code> parameter is available to allow controlling how the existing content is affected.</dd> + <dt>{{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}</dt> + <dd>Selects the specified range of characters within a textual input element. Does nothing for inputs which aren't presented as text input fields.</dd> + <dt>{{domxref("HTMLInputElement.stepDown", "stepDown()")}}</dt> + <dd>Decrements the value of a numeric input by one, by default, or by the specified number of units.</dd> + <dt>{{domxref("HTMLInputElement.stepUp", "stepUp()")}}</dt> + <dd>Increments the value of a numeric input by one or by the specified number of units.</dd> +</dl> + +<h2 id="CSS">CSS</h2> + +<p>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.</p> + +<h3 id="UI_pseudo-classes">UI pseudo-classes</h3> + +<table class="standard-table"> + <caption>Captions super relevant to the {{htmlelement("input")}} element:</caption> + <thead> + <tr> + <th>Pseudo-class</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{Cssxref(":enabled")}}</td> + <td>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.</td> + </tr> + <tr> + <td>{{Cssxref(":disabled")}}</td> + <td>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.</td> + </tr> + <tr> + <td>{{Cssxref(":read-only")}}</td> + <td>Element not editable by the user</td> + </tr> + <tr> + <td>{{Cssxref(":read-write")}}</td> + <td>Element that is editable by the user.</td> + </tr> + <tr> + <td>{{Cssxref(":placeholder-shown")}}</td> + <td>Element that is currently displaying <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-placeholder">placeholder text</a>, including {{HTMLElement("input")}} and {{HTMLElement("textarea")}} elements with the {{anch('htmlattrdefplaceholder', 'placeholder')}} attribute present that has, as of yet, no value.</td> + </tr> + <tr> + <td>{{Cssxref(":default")}}</td> + <td>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.</td> + </tr> + <tr> + <td>{{Cssxref(":checked")}}</td> + <td>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).</td> + </tr> + <tr> + <td>{{Cssxref(":indeterminate")}}</td> + <td>{{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</td> + </tr> + <tr> + <td>{{Cssxref(":valid")}}</td> + <td>Form controls that can have constraint validation applied and are currently valid.</td> + </tr> + <tr> + <td>{{Cssxref(":invalid")}}</td> + <td>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')}}.</td> + </tr> + <tr> + <td>{{Cssxref(":in-range")}}</td> + <td>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')}} .</td> + </tr> + <tr> + <td>{{Cssxref(":out-of-range")}}</td> + <td>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.</td> + </tr> + <tr> + <td>{{Cssxref(":required")}}</td> + <td>{{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.</td> + </tr> + <tr> + <td>{{Cssxref(":optional")}}</td> + <td>{{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.</td> + </tr> + <tr> + <td>{{Cssxref(":blank")}}</td> + <td>{{HTMLElement("input")}} and {{HTMLElement("textarea")}} elements that currently have no value.</td> + </tr> + <tr> + <td>{{Cssxref(":user-invalid")}}</td> + <td>Similar to <code>:invalid</code>, 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.</td> + </tr> + </tbody> +</table> + +<h4 id="Examples">Examples</h4> + +<p>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 <code>input</code> is not checked.</p> + +<div id="checkbox_label"> +<pre class="brush: html hidden notranslate"><input id="checkboxInput" type="checkbox"> +<label for="checkboxInput">Toggle the checkbox on and off</label> +</pre> + +<pre class="brush: css notranslate">input:checked + label { + color: red; + font-weight: bold; +} +</pre> + +<p>{{EmbedLiveSample('checkbox_label', 500, 80)}}</p> +</div> + +<h3 id="Attribute_selectors">Attribute selectors</h3> + +<p>It is possible to target different types of form controls based on their {{anch('htmlattrdeftype', 'type')}} using <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">attribute selectors</a>. CSS attribute selectors match elements based on either just the presence of a attribute or the value of a given attribute.</p> + +<pre class="brush: css notranslate">/* 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] {}</pre> + +<h3 id="placeholder">::placeholder</h3> + +<p>By default, the appearance of placeholder text is a translucent or light gray. The {{cssxref('::placeholder')}} pseudo-element is the input's <a href="/en-US/docs/Web/HTML/Forms_in_HTML#The_placeholder_attribute">placeholder text</a>. It can be styled with a limited subset of CSS properties.</p> + +<pre class="brush: css no-line-numbers notranslate">::placeholder { + color: blue; +}</pre> + +<p>Only the subset of CSS properties that apply to the {{cssxref("::first-line")}} pseudo-element can be used in a rule using <code>::placeholder</code> in its selector.</p> + +<h3 id="appearance">appearance</h3> + +<p>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 <code>none</code> value.</p> + +<p>You could make a <code><div></code> look like a radio button with <code>div {appearance: radio;} </code>or a radio look like a checkbox with <code>[type="checkbox] {appearance: checkbox;}</code>, but don't.</p> + +<p>Setting <code>appearance: none</code> removes platform native borders, but not functionality.</p> + +<h3 id="caret-color">caret-color</h3> + +<p>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:</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><label for="textInput">Note the red caret:</label> +<input id="textInput" class="custom" size="32"> +</pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css notranslate">input.custom { + caret-color: red; + font: 16px "Helvetica", "Arial", "sans-serif" +} +</pre> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample('caret-color', 500, 80)}}</p> + +<h3 id="object-position_and_object-fit">object-position and object-fit</h3> + +<p>In certain cases (typically involving non-textual inputs and specialized interfaces), the <code><input></code> element is a <a href="/en-US/docs/Web/CSS/Replaced_element">replaced element</a>. 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</p> + +<h3 id="Styling">Styling</h3> + +<p>For more information about adding color to elements in HTML, see:</p> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Applying_color">Applying color to HTML elements using CSS</a>.</li> +</ul> + +<p>Also see:</p> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms,</a> <a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">advanced styling for HTML forms</a>, and</li> + <li>the<a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets"> compatibility table of CSS properties</a>.</li> +</ul> + +<h2 id="Additional_features">Additional features</h2> + +<h3 id="Labels">Labels</h3> + +<p>Labels are needed to associate assistive text with an <code><input></code>. The {{HTMLElement("label")}} element provides explanatory information about a form field that is <em>always</em> appropriate (aside from any layout concerns you have). It's never a bad idea to use a <code><label></code> to explain what should be entered into an <code><input></code> or {{HTMLElement("textarea")}}.</p> + +<h4 id="Associated_labels">Associated labels</h4> + +<p>The semantic pairing of <code><input></code> and <code><label></code> elements is useful for assistive technologies such as screen readers. By pairing them using the <code><label></code>'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.</p> + +<p>It does not suffice to have plain text adjacent to the <code><input></code> element,. Rather, usability and accessibility requires the inclusion of either implicit or explicit {{HTMLElement("label")}}:</p> + +<pre class="brush: html notranslate"><!-- 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></pre> + +<p>The first example is inaccessible: no relationship exists between the prompt and the <code><input></code> element.</p> + +<p>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 <code><label></code> with an <code><input></code>, clicking on either one will focus the <code><input></code>. 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.</p> + +<p>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.</p> + +<h4 id="Placeholders_are_not_accessible">Placeholders are not accessible</h4> + +<p>The {{htmlattrxref("placeholder", "input")}} attribute lets you specify text that appears within the <code><input></code> 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.</p> + +<p>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 <code>placeholder</code> may not get translated.</p> + +<div class="blockIndicator note"> +<p>Don't use the {{htmlattrxref("placeholder", "input")}} attribute if you can avoid it. If you need to label an <code><input></code> element, use the {{HTMLElement("label")}} element.</p> +</div> + +<h3 id="Client-side_validation">Client-side validation</h3> + +<div class="blockIndicator warning"> +<p><strong>Warning:</strong> Client-side validation is useful, but it does <em>not</em> guarantee that the server will receive valid data. If the data must be in a specific format, <em>always</em> verify it also on the server-side, and return a <a href="/en-US/docs/Web/HTTP/Status/400"><code>400</code> HTTP response</a> if the format is invalid.</p> +</div> + +<p>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.</p> + +<p>Some input types and other attributes place limits on what values are valid for a given input. For example, <code><input type="number" min="2" max="10" step="2"></code> means only the number 2, 4, 6, 8, or 10 are valid. Several errors could occur, including a <code>rangeUnderflow</code> error if the value is less than 2, <code>rangeOverflow</code> if greater than 10, <code>stepMismatch</code> if the value is a number between 2 and 10, but not an even integer (does not match the requirements of the <code>step</code> attribute), or <code>typeMismatch</code> if the value is not a number.</p> + +<p>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 <code>min</code>, wraps around to the lowest possible value, then continues on until <code>max</code> 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:</p> + +<pre class="brush: html notranslate"><input type="time" min="20:00" max="08:00" name="overnight"></pre> + +<p>Specific attributes and their values can lead to a specific error {{domxref('ValidityState')}}:</p> + +<table class="standard-table"> + <caption>Validity object errors depend on the {{htmlelement('input')}} attributes and their values:</caption> + <thead> + <tr> + <th scope="col">Attribute</th> + <th scope="col">Relevent property</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{anch('htmlattrdefmax', 'max')}}</td> + <td>{{domxref('validityState.rangeOverflow')}}</td> + <td>Occurs when the value is greater than the maximum value as defined by the <code>max</code> attribute</td> + </tr> + <tr> + <td>{{anch('htmlattrdefmaxlength', 'maxlength')}}</td> + <td>{{domxref('validityState.tooLong')}}</td> + <td>Occurs when the number of characters is greater than the number allowed by the <code>maxlength</code> property</td> + </tr> + <tr> + <td>{{anch('htmlattrdefmin', 'min')}}</td> + <td>{{domxref('validityState.rangeUnderflow')}}</td> + <td>Occurs when the value is less than the minimum value as defined by the <code>min</code> attribute</td> + </tr> + <tr> + <td>{{anch('htmlattrdefminlength', 'minlength')}}</td> + <td>{{domxref('validityState.tooShort')}}</td> + <td>Occurs when the number of characters is less than the number required by the <code>minlength</code> property</td> + </tr> + <tr> + <td>{{anch('htmlattrdefpattern', 'pattern')}}</td> + <td>{{domxref('validityState.patternMismatch')}}</td> + <td>Occurs when a pattern attribute is included with a valid regular expression and the <code>value</code> does not match it.</td> + </tr> + <tr> + <td>{{anch('htmlattrdefrequired', 'required')}}</td> + <td>{{domxref('validityState.valueMissing')}}</td> + <td>Occurs when the <code>required</code> attribute is present but the value is <code>null</code> or radio or checkbox is not checked.</td> + </tr> + <tr> + <td>{{anch('htmlattrdefstep', 'step')}}</td> + <td>{{domxref('validityState.stepMismatch')}}</td> + <td>The value doesn't match the step increment. Increment default is <code>1</code>, so only integers are valid on<code> type="number"</code> is step is not included. <code>step="any"</code> will never throw this error.</td> + </tr> + <tr> + <td>{{anch('htmlattrdeftyoe', 'type')}}</td> + <td>{{domxref('validityState.typeMismatch')}}</td> + <td>Occurs when the value is not of the correct type, for example a email does not contain an <code>@</code> or a url doesn't contain a protocol.</td> + </tr> + </tbody> +</table> + +<p>If a form control doesn't have the <code>required</code> attribute, no value, or an empty string, is not invalid. Even if the above attributes are present, with the exception of <code>required</code>, and empty string will not lead to an error.</p> + +<p>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.</p> + +<p>In addition to the errors described in the table above, the <code>validityState</code> interface contains the <code>badInput</code>, <code>valid</code>, and <code>customError</code> boolean readonly properties. The validity object includes:</p> + +<ul> + <li>{{domxref('validityState.valueMissing')}}</li> + <li>{{domxref('validityState.typeMismatch')}}</li> + <li>{{domxref('validityState.patternMismatch')}}</li> + <li>{{domxref('validityState.tooLong')}}</li> + <li>{{domxref('validityState.tooShort')}}</li> + <li>{{domxref('validityState.rangeUnderflow')}}</li> + <li>{{domxref('validityState.rangeOverflow')}}</li> + <li>{{domxref('validityState.stepMismatch')}}</li> + <li>{{domxref('validityState.badInput')}}</li> + <li>{{domxref('validityState.valid')}}</li> + <li>{{domxref('validityState.customError')}}</li> +</ul> + +<p>For each of these Boolean properties, a value of <code>true</code> indicates that the specified reason validation may have failed is true, with the exception of the <code>valid</code> property, which is <code>true</code> if the element's value obeys all constraints.</p> + +<p>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 <code>null</code>), the form will be be prevented from being submitted. If there is no custom error message, and none of the other properties return true, <code>valid</code> will be true, and the form can be submitted.</p> + +<pre class="brush: js notranslate">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(''); + } +}</pre> + +<p>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 <code>null</code>.</p> + +<h4 id="Example">Example</h4> + +<p>If you want to present a custom error message when a field fails to validate, you need to use the <a href="/en-US/docs/Web/API/Constraint_validation#Constraint_validation_interfaces">Constraint validation features</a> available on <code><input></code> (and related) elements. Take the following form:</p> + +<pre class="brush: html notranslate"><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></pre> + +<p>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 <code>pattern</code>.</p> + +<p>If you wanted to instead display custom error messages, you could use JavaScript like the following:</p> + +<pre class="brush: js notranslate">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!'); + } +});</pre> + +<p>The example renders like so:</p> + +<p>{{EmbedLiveSample('Client-side_validation')}}</p> + +<p>In brief:</p> + +<ul> + <li>We check the valid state of the input element every time its value is changed by running the <code>checkValidity()</code> method via the <code>input</code> event handler.</li> + <li>If the value is invalid, an <code>invalid</code> event is raised, and the <code>invalid</code> event handler function is run. Inside this function we work out whether the value is invalid because it is empty, or because it doesn't match the pattern, using an <code>if()</code> block, and set a custom validity error message.</li> + <li>As a result, if the input value is invalid when the submit button is pressed, one of the custom error messages will be shown.</li> + <li>If it is valid, it will submit as you'd expect. For this to happen, the custom validity has to be cancelled, by invoking <code>setCustomValidity()</code> with an empty string value. We therefore do this every time the <code>input</code> event is raised. If you don't do this, and a custom validity was previously set, the input will register as invalid, even if it current contains a valid value on submission.</li> +</ul> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> Always validate input constraints both client side and server side. Constraint validation doesn't remove the need for validation on the <em>server side</em>. Invalid values can still be sent by older browsers or by bad actors.</p> +</div> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: Firefox supported a proprietary error attribute — <code>x-moz-errormessage</code> — 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)}}).</p> +</div> + +<h3 id="Localization">Localization</h3> + +<p>The allowed inputs for certain <code><input></code> 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.</p> + +<p>Firefox uses the following heuristics to determine the locale to validate the user's input (at least for <code>type="number"</code>):</p> + +<ul> + <li>Try the language specified by a <code>lang</code>/<code>xml:lang</code> attribute on the element or any of its parents.</li> + <li>Try the language specified by any <code>Content-Language</code> HTTP header. Or,</li> + <li>If none specified, use the browser's locale.</li> +</ul> + +<h3 id="Technical_summary">Technical summary</h3> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, listed, submittable, resettable, form-associated element, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>. If the {{htmlattrxref("type", "input")}} is not <code>hidden</code>, then labelable element, palpable content.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td>None, it is an {{Glossary("empty element")}}.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>Must have a start tag and must not have an end tag.</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Implicit ARIA role</th> + <td> + <ul> + <li><code>type=button</code>: <code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/button_role">button</a></code></li> + <li><code>type=checkbox</code>: <code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/checkbox_role">checkbox</a></code></li> + <li><code>type=email</code> + <ul> + <li>with no <code>list</code> attribute: <code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/textbox_role">textbox</a></code></li> + <li>with <code>list</code> attribute: {{ARIARole("combobox")}}</li> + </ul> + </li> + <li><code>type=image</code>: <code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/button_role">button</a></code></li> + <li><code>type=number</code>: {{ARIARole("spinbutton")}}</li> + <li><code>type=radio</code>: {{ARIARole("radio")}}</li> + <li><code>type=range</code>: {{ARIARole("slider")}}</li> + <li><code>type=reset</code>: <code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/button_role">button</a></code></li> + <li><code>type=search</code> + <ul> + <li>with no <code>list</code> attribute: {{ARIARole("searchbox")}}</li> + <li>with <code>list</code> attribute: {{ARIARole("combobox")}}</li> + </ul> + </li> + <li><code>type=submit</code>: <code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/button_role">button</a></code></li> + <li><code>type=tel</code> + <ul> + <li>with no <code>list</code> attribute: <code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/textbox_role">textbox</a></code></li> + <li>with <code>list</code> attribute: {{ARIARole("combobox")}}</li> + </ul> + </li> + <li><code>type=text</code> + <ul> + <li>with no <code>list</code> attribute: <code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/textbox_role">textbox</a></code></li> + <li>with <code>list</code> attribute: {{ARIARole("combobox")}}</li> + </ul> + </li> + <li><code>type=url</code> + <ul> + <li>with no <code>list</code> attribute: <code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/textbox_role">textbox</a></code></li> + <li>with <code>list</code> attribute: {{ARIARole("combobox")}}</li> + </ul> + </li> + <li><code>type=color|date|datetime-local|file|hidden|month|password|time|week</code>: <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">no corresponding role</a></li> + </ul> + </td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td> + <ul> + <li><code>type=button</code>: {{ARIARole("link")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("option")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}</li> + <li><code>type=checkbox</code>: {{ARIARole("button")}} when used with <code>aria-pressed</code>, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("option")}}, {{ARIARole("switch")}}</li> + <li><code>type=image</code>: {{ARIARole("link")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}</li> + <li><code>type=radio</code>: {{ARIARole("menuitemradio")}}</li> + <li><code>type=text</code> with no <code>list</code> attribute: {{ARIARole("combobox")}}, {{ARIARole("searchbox")}}, {{ARIARole("spinbutton")}}</li> + <li><code>type=color|date|datetime|datetime-local|email|file|hidden|month|number|password|range|reset|search|submit|tel|url|week</code> or <code>text</code> with <code>list</code> attribute: no <code>role</code> permitted</li> + </ul> + </td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLInputElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-input-element', '<input>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML Media Capture', '#the-capture-attribute','capture attribute')}}</td> + <td>{{Spec2('HTML Media Capture')}}</td> + <td>Adds the <code>capture</code> attribute</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-input-element', '<input>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.4', '<form>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Accessibility_concerns">Accessibility concerns</h2> + +<h3 id="Labels_2">Labels</h3> + +<p>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")}} .</p> + +<p>The following is an example of how to associate the <code><label></code> with an <code><input></code> element in the above style. You need to give the <code><input></code> an <code>id</code> attribute. The <code><label></code> then needs a <code>for</code> attribute whose value is the same as the input's <code>id</code>.</p> + +<pre class="notranslate"><label for="peas">Do you like peas?</label> +<input type="checkbox" name="peas" id="peas"> +</pre> + +<h3 id="Size">Size</h3> + +<p>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 <a href="https://www.w3.org/TR/WCAG21/#dfn-css-pixels">CSS pixels</a> is recommended.</p> + +<ul> + <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/target-size.html">Understanding Success Criterion 2.5.5: Target Size | W3C Understanding WCAG 2.1</a></li> + <li><a href="http://adrianroselli.com/2019/06/target-size-and-2-5-5.html">Target Size and 2.5.5 | Adrian Roselli</a></li> + <li><a href="https://a11yproject.com/posts/large-touch-targets/">Quick test: Large touch targets - The A11Y Project</a></li> +</ul> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<div>{{Compat("html.elements.input")}}</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">Form constraint validation</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">Your first HTML form</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">How to structure an HTML form</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">The native form widgets</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Sending form data</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">CSS property compatibility table</a></li> +</ul> 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: <input type="radio"> +slug: Web/HTML/Element/input/radio +translation_of: Web/HTML/Element/input/radio +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">{{htmlelement("input")}} عناصر من النوع<strong><code>radio</code></strong> تستخدم بشكل عام في<strong>radio groups</strong>—مجموعات من أزرار الاختيار تصف مجموعة من الخيارات ذات الصلة. يمكن تحديد زر اختيار واحد فقط في مجموعة معينة في نفس الوقت. عادةً ما يتم عرض أزرار الاختيار على شكل دوائر صغيرة ، يتم تعبئتها أو إبرازها عند تحديدها.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-radio.html", "tabbed-standard")}}</div> + +<p class="hidden">يتم تخزين مصدر هذا المثال التفاعلي في مستودع GitHub. إذا كنت ترغب في المساهمة في مشروع الأمثلة التفاعلية ، من فضلك استنساخ<br> + <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> وأرسل لنا طلب سحب.</p> + +<div id="Basic_example"> +<p>يطلق عليها أزرار الراديو لأنها تبدو وتعمل بطريقة مشابهة للأزرار الانضغاطية في أجهزة الراديو القديمة ، مثل تلك الموضحة أدناه.</p> + +<p><img alt="Shows what radio buttons looked like in the olden days." src="https://mdn.mozillademos.org/files/15610/old-radio.jpg" style="height: 400px; width: 600px;" title="Photo of an old-time radio"></p> +</div> + +<div class="note"> +<p><strong>Note</strong>:تشبه مربعات الاختيار أزرار الاختيار ، ولكن مع تمييز مهم: أزرار الاختيار مصممة لتحديد قيمة واحدة من مجموعة ، بينما تتيح لك مربعات الاختيار تشغيل وإيقاف القيم الفردية. في حالة وجود عناصر تحكم متعددة ، تسمح أزرار الاختيار بتحديد واحد منها جميعًا ، بينما تسمح مربعات الاختيار بتحديد قيم متعددة.</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value")}}</strong></td> + <td>A {{domxref("DOMString")}} representing the value of the radio button.</td> + </tr> + <tr> + <td><strong>Events</strong></td> + <td>{{event("change")}} and {{event("input")}}</td> + </tr> + <tr> + <td><strong>Supported common attributes</strong></td> + <td><code>checked</code> and <code>value</code></td> + </tr> + <tr> + <td><strong>IDL attributes</strong></td> + <td><code>{{anch("checked")}}</code> and <code>{{anch("value")}}</code></td> + </tr> + <tr> + <td><strong>Methods</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Value">Value</h2> + +<p>The <code>value</code> 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.</p> + +<h3 id="Defining_a_radio_group">Defining a radio group</h3> + +<p>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.</p> + +<p>You can have as many radio groups on a page as you like, as long as each has its own unique <code>name</code>.</p> + +<p>For example, if your form needs to ask the user for their preferred contact method, you might create three radio buttons, each with the <code>name</code> property set to <code>contact</code> but one with the {{htmlattrxref("value", "input")}} <code>email</code>, one with the value <code>phone</code>, and one with the value <code>mail</code>. The user never sees the <code>value</code> or the <code>name</code> (unless you expressly add code to display it).</p> + +<p>The resulting HTML looks like this:</p> + +<pre class="brush: html notranslate"><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> + +<p>Here you see the three radio buttons, each with the <code>name</code> set to <code>contact</code> and each with a unique <code>value</code> 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.</p> + +<p>You can try out this example here:</p> + +<p>{{EmbedLiveSample('Defining_a_radio_group', 600, 130)}}</p> + +<h3 id="Data_representation_of_a_radio_group">Data representation of a radio group</h3> + +<p>When the above form is submitted with a radio button selected, the form's data includes an entry in the form <code>contact=<var>value</var></code>. For example, if the user clicks on the "Phone" radio button then submits the form, the form's data will include the line <code>contact=phone</code>.</p> + +<p>If you omit the <code>value</code> attribute in the HTML, the submitted form data assigns the value <code>on</code> to the group. In this scenario, if the user clicked on the "Phone" option and submitted the form, the resulting form data would be <code>contact=on</code>, which isn't helpful. So don't forget to set your <code>value</code> attributes!</p> + +<div class="note"> +<p><strong>Note</strong>: 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.</p> +</div> + +<p>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 <code>checked</code> state. See {{anch("Selecting a radio button by default")}} below.</p> + +<p>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:</p> + +<pre class="brush: html notranslate"><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> +</pre> + +<p>Then we add some <a href="/en-US/docs/Web/JavaScript">JavaScript</a> to set up an event listener on the {{domxref("HTMLFormElement/submit_event", "submit")}} event, which is sent when the user clicks the "Submit" button:</p> + +<pre class="brush: js notranslate">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);</pre> + +<p>Try this example out and see how there's never more than one result for the <code>contact</code> group.</p> + +<p>{{EmbedLiveSample("Data_representation_of_a_radio_group", 600, 130)}}</p> + +<h2 id="Additional_attributes">Additional attributes</h2> + +<p>In addition to the common attributes shared by all {{HTMLElement("input")}} elements, <code>radio</code> inputs support the following attributes:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Attribute</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("checked")}}</code></td> + <td>A Boolean indicating whether or not this radio button is the currently-selected item in the group</td> + </tr> + <tr> + <td><code>{{anch("value")}}</code></td> + <td>The string to use as the value of the radio when submitting the form, if the radio is currently toggled on</td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdefchecked">{{htmlattrdef("checked")}}</h3> + +<p>A Boolean attribute which, if present, indicates that this radio button is the currently selected one in the group.</p> + +<p>Unlike other browsers, Firefox by default <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persists the dynamic checked state</a> of an <code><input></code> across page loads. Use the {{htmlattrxref("autocomplete","input")}} attribute to control this feature.</p> + +<h3 id="htmlattrdefvalue">{{htmlattrdef("value")}}</h3> + +<p>The <code>value</code> attribute is one which all {{HTMLElement("input")}}s share; however, it serves a special purpose for inputs of type <code>radio</code>: 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 <code>value</code> attribute. If the <code>value</code> is not otherwise specified, it is the string <code>on</code> by default. This is demonstrated in the section {{anch("Value")}} above.</p> + +<h2 id="Using_radio_inputs">Using radio inputs</h2> + +<p>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.</p> + +<h3 id="Selecting_a_radio_button_by_default">Selecting a radio button by default</h3> + +<p>To make a radio button selected by default, you simply include <code>checked</code> attribute, as shown in this revised version of the previous example:</p> + +<pre class="brush: html notranslate"><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></pre> + +<p>{{EmbedLiveSample('Selecting_a_radio_button_by_default', 600, 130)}}</p> + +<p>In this case, the first radio button is now selected by default.</p> + +<div class="note"> +<p><strong>Note</strong>: If you put the <code>checked</code> attribute on more than one radio button, later instances will override earlier ones; that is, the last <code>checked</code> 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.</p> +</div> + +<h3 id="Providing_a_bigger_hit_area_for_your_radio_buttons">Providing a bigger hit area for your radio buttons</h3> + +<p>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.</p> + +<p>Beyond accessibility, this is another good reason to properly set up <code><label></code> elements on your forms.</p> + +<h2 id="Validation">Validation</h2> + +<p>Radio buttons don't participate in constraint validation; they have no real value to be constrained.</p> + +<h2 id="Styling_radio_inputs">Styling radio inputs</h2> + +<p>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:</p> + +<pre class="brush: html notranslate"><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></pre> + +<p>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.</p> + +<p>The CSS involved is a bit more significant:</p> + +<pre class="brush: css notranslate">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; +}</pre> + +<p>Most notable here is the use of the {{cssxref("-moz-appearance")}} property (with prefixes needed to support some browsers). By default, radio buttons (and <a href="/en-US/docs/Web/HTML/Element/input/checkbox">checkboxes</a>) are styled with the operating system's native styles for those controls. By specifying <code>appearance: none</code>, 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.</p> + +<div class="note"> +<p><strong>Compatibility note</strong>: 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 <code>none</code> 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.</p> +</div> + +<p>{{EmbedLiveSample('Styling_radio_inputs', 600, 120)}}</p> + +<p>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.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>Specification</th> + <th>Status</th> + <th></th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#radio-button-state-(type=radio)', '<input type="radio">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#radio-button-state-(type=radio)', '<input type="radio">')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.input.input-radio")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{HTMLElement("input")}} and the {{domxref("HTMLInputElement")}} interface that implements it.</li> + <li>{{domxref("RadioNodeList")}}: the interface that describes a list of radio buttons</li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Compatibility of CSS properties</a></li> +</ul> 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 +--- +<div>{{HTMLSidebar}}</div> + +<p class="summary" dir="rtl"><span class="seoSummary">لغة ترميز النص الفائق (HTML) هي اللبنة الأساسية للويب. فهي تقوم بوصف وتعريف <em>محتوى</em> صفحات الويب. التقنيات الأخرى إلى جانب هذه اللغة تعمل عادةً على وصف مظهر صفحة الويب (<a href="/ar/docs/Web/CSS">صفحات الطرز المتراصة</a>) أو تفاعلها مع المستخدم (<a href="/ar/docs/Web/JavaScript">الجافاسكربت</a>). </span></p> + +<p dir="rtl">مصطلح "نص تشعبي" يشير إلى الروابط التي تربط صفحات الويب ببعضها، إما بموقع واحد، أو بين مواقع متعددة. فالروابط هي جانب أساسي من الويب. عبر رفعك لمحتوى على الأنترنت وربطه بصفحات أخرى أنشأها أشخاص آخرون، فأنت تصبح مشاركاً نشيطاً في شبكة الإنترنت.</p> + +<p dir="rtl">تستخدم لغة ترميز النص الفائقة تقنيّة "الترميز (markup)" لوصف النصوص، والصور، وغيرها من المحتويات؛ لعرضعها على المتصفح. وسوم اللغة تتضمن "عناصر (elements)" خاصة مثل {{HTMLElement("head")}}، {{HTMLElement("title")}}، {{HTMLElement("body")}}، {{HTMLElement("header")}}، {{HTMLElement("footer")}}، {{HTMLElement("article")}}، {{HTMLElement("section")}}، {{HTMLElement("p")}}، {{HTMLElement("div")}}، {{HTMLElement("span")}}، {{HTMLElement("img")}}، وغيرها الكثير.</p> + +<p dir="rtl">المقالات أدناه ستساعدك على تعلم المزيد حول هذه اللغة.</p> + +<section class="cleared" id="sect1"> +<ul class="card-grid"> + <li dir="rtl"><span>مقدمة عن لغة ترميز النص الفائق</span>إذا كنت جديداً على تطوير الويب فاحرص على قراءة مقالتنا حول <a href="/ar/docs/Learn/Getting_started_with_the_web/HTML_basics">أساسيات اللغة</a> لتعرف ما هيّتها، وكيف يمكنك استخدامها.</li> + <li dir="rtl"><span>دورات عن لغة ترميز النص الفائق</span>للحصول على مقالات عن كيفيّة استخدام هذه اللغة، وكذلك على دورات وأمثلة شاملة، تفقد <a href="/ar/docs/Learn/HTML">منطقة التعلم</a> خاصتنا.</li> + <li dir="rtl"><span>مرجع لغة ترميز النص الفائق</span> + <p>في قسم <a href="/ar/docs/Web/HTML/Reference">مرجع لغة ترميز النص الفائق</a> الشامل خاصتنا، ستجد تفاصيل حول كل عنصر وسِمة في اللغة.</p> + </li> +</ul> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Tools" dir="rtl" id="Tools" name="Tools">دورات للمبتدئين</h2> + +<p dir="rtl">تمتاز<em> </em><a href="/ar/docs/Learn/HTML">منطقة تعلم لغة ترميز النص الفائق</a> بوحدات متعددة تقوم بتعليم اللغة من الألف إلى الياء، ولا تتطلب معرفة مُسبقة.</p> + +<dl> + <dt dir="rtl"><a href="/ar/docs/Learn/HTML/Introduction_to_HTML">مقدمة عن لغة ترميز النص الفائق</a></dt> + <dd dir="rtl">تقوم هذه الوحدة بشرح الأسس، وتأخذك لتعلم المفاهيم المهمة وبنيّة اللغة، بحيث تعلمك كيفيّة وصف النصوص في اللغة، وإنشاء روابط تشعيبيّة، واستخدامها لهيكلة صفحات الويب.</dd> + <dt dir="rtl"><a href="/ar/docs/Learn/HTML/Multimedia_and_embedding">الوسائط المتعددة</a></dt> + <dd dir="rtl">هذه الوحدة تشرح كيف يمكنك استخدام لغة ترميز النص الفائق لتضمين وسائط متعددة في صفحات الويب خاصتك، كما تتضمن المقالة طرق مختلفة يمكنك استخدامها لإضافة الصور، وفيديوهات، وملفات صوت، وحتى صفحات ويب أخرى كاملة.</dd> + <dt dir="rtl"><a href="/ar/docs/Learn/HTML/Tables">الجداول</a></dt> + <dd dir="rtl">يمثل عرض البيانات المجدولة على صفحة الويب بطريق مفهومة وسهلة الوصول تحدياً. هذه الوحدة تغطي وسوم الجدول الأساسية، إلى جانب ميزات أكثر تعقيداً مثل إضافة تسميات توضيحيّة وملخصات.</dd> + <dt dir="rtl"><a href="/ar/docs/Learn/HTML/Forms">الاستمارات</a></dt> + <dd dir="rtl">الاستمارة (form) هي جزء مهم جداً من الويب، فهي توفر الكثير من الوظائف التي ستحتاجها للتفاعل مع الموقع، مثل التسجيل وتسجيل الدخول، وإرسال التعليقات (feedback)، وشراء منتجات، والمزيد. ستعلمك هذه الوحدة كيفيّة تصميم الاستمارات.</dd> + <dt dir="rtl"><a href="/ar/docs/Learn/HTML/Howto">استخدام لغة ترميز النص الفائق لحل المشاكل شائعة</a></dt> + <dd dir="rtl">توفر هذه المقالة روابط لأقسام تحتوي على شرح لكيفيّة استخدام هذه اللغة لحل مشاكل شائعة عندما تقوم بإنشاء صفحة ويب مثل: التعامل مع العناوين، وإضافة صورة أو فيديو، واستخدام المؤكدات في المحتوى، وإنشاء استمارة بسيطة، وغيرها من المواضيع.</dd> +</dl> + +<h2 dir="rtl" id="مواضيع_متقدمة">مواضيع متقدمة</h2> + +<dl> + <dt class="landingPageList" dir="rtl"><a href="/ar/docs/Web/HTML/Focus_management_in_HTML">إدارة التركيز في لغة ترميز النص الفائق</a></dt> + <dd class="landingPageList" dir="rtl">تساعدك السمة <code><a href="/ar/docs/Web/API/Document/activeElement">activeElement</a></code><a href="/en-US/docs/Web/API/Document/activeElement"> </a>والدالة <code><a href="/ar/docs/Web/API/Document/hasFocus">()hasFocus</a></code> على تتبع والتحكم بتفاعلات المستخدم مع عناصر الصفحة.</dd> + <dt class="landingPageList" dir="rtl"><a href="/ar/docs/Web/HTML/Using_the_application_cache">استخدام ذاكرة التخزين المؤقت للتطبيق</a></dt> + <dd class="landingPageList" dir="rtl">ذاكرة التخزين المؤقت تسمح للتطبيقات المبنية على الويب بالعمل في وضع عدم الإتصال. يمكنك استخدام واجهة <strong>ذاكرة التخزين المؤقت للتطبيق</strong> البرمجيّة (<em>AppCache</em>) لتحديد الموارد التي يجب على المتصفح تخزينها وإتاحتها للمستخدمين في وضع عدم الإتصال. التطبيقات التي يتم تحميلها مؤقتاً تعمل بشكل صحيح حتى ولو قام المستخدمون بالضغط على زر التحديث عندما يكونون في وضع عدم الإتصال.</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Documentation" dir="rtl" id="مراجع">مراجع</h2> + +<dl> + <dt class="landingPageList" dir="rtl"><a href="/ar/docs/Web/HTML/Reference">مرجع لغة ترميز النص الفائق</a></dt> + <dd class="landingPageList" dir="rtl">تتألف لغة ترميز النص الفائق من <strong>عناصر</strong> (elements)، كل منها يمكن تعديله بواسطة عدد من <strong>السمات</strong> (attributes). وصفحات لغة ترميز النص الفائق متصلة ببعضها البعض ب<a href="/en-US/docs/Web/HTML/Link_types">روابط</a>.</dd> + <dt class="landingPageList" dir="rtl"><a href="/ar/docs/Web/HTML/Element">مرجع عناصر لغة ترميز النص الفائق</a></dt> + <dd class="landingPageList" dir="rtl">تصفح قائمة بجميع <a class="glossaryLink" href="/en-US/docs/Glossary/HTML">عناصر هذه اللغة</a>.</dd> + <dt class="landingPageList" dir="rtl"><a href="/ar/docs/Web/HTML/Attributes">مرجع سمات لغة ترميز النص الفائق</a></dt> + <dd class="landingPageList" dir="rtl">تمتلك عناصر لغة ترميز النص الفائق سماتاً. تعد هذه السمات قيم إضافية تقوم بتعديل العناصر أو تخصيص وظيفتها بطرق مختلفة.</dd> + <dt class="landingPageList" dir="rtl"><a href="/ar/docs/Web/HTML/Global_attributes">السمات العموميّة</a></dt> + <dd class="landingPageList" dir="rtl">يمكن استخدام السمات العموميّة (تقريباً) على جميع <a href="/ar/docs/Web/HTML/Element">عناصر اللغة</a>، <em>حتى العناصر الغير معياريّة</em>. هذا يعني أنَّ أي عنصر غير معياري يجب أن يسمح باستخدام هذه السمات، بالرغم من أنَّ هذه العناصر تجعل مستند لغة ترميز النص الفائق الإصدار الخامس غير متوافِق ومعياري.</dd> + <dt class="landingPageList" dir="rtl"><a href="/ar/docs/Web/HTML/Inline_elements">العناصر المُضمنِة</a> و<a href="/ar/docs/Web/HTML/Block-level_elements">العناصر المُستحوذِة</a></dt> + <dd class="landingPageList" dir="rtl">العناصر عادةً في <strong>لغة ترميز النص الفائق </strong> إما "مضمنة" أو "مستحوذة". العنصر المضمن يأحذ المساحة المحصورة بواسطة الوسوم التي تحدده، أما العنصر المستحوذ فأنَّه يأخذ كامل مساحة العنصر الأب (الحاوي)، وبالتالي فإنه يُنشِئ "كتلة".</dd> + <dt class="landingPageList" dir="rtl"><a href="/ar/docs/Web/HTML/Link_types">أنواع الرابط</a></dt> + <dd class="landingPageList" dir="rtl">تتنوع أنواع الروابط في لغة ترميز النص الفائق، حيث يمكن استخدامها لإنشاء أو تعريف صلة بين وثيقتين. تتضمن عناصر الرابط التي يمكن استخدامها على <a href="/ar/docs/Web/HTML/Element/a"><code><a></code></a> ،<a href="/ar/docs/Web/HTML/Element/area"><code><area></code></a>، و <a href="/ar/docs/Web/HTML/Element/link"><code><link></code></a>.</dd> + <dt class="landingPageList" dir="rtl"><a href="/ar/docs/Web/HTML/Supported_media_formats">صيغ الوسائط المدعومة في لغة ترميز النص الفائق</a></dt> + <dd class="landingPageList" dir="rtl">تسمح لك العناصر <a href="/ar/docs/Web/HTML/Element/audio"><code><audio></code></a> و <a href="/ar/docs/Web/HTML/Element/video"><code><video></code></a> بتشغيل وسائط الصوت والفيديو. هذه العناصر توفر بدائل مشابهة للمتصفح كالتي موجودة في أدوبي فلاش والإضافات الأخرى.</dd> + <dt class="landingPageList" dir="rtl"><a href="/ar/docs/Web/HTML/Kinds_of_HTML_content">أنواع محتوى لغة ترميز النص الفائق</a></dt> + <dd class="landingPageList" dir="rtl">تتألف لغة ترميز النص الفائق من عدة أنواع من المحتوى، كل نوع يتيح لك استخدام عدة سياقات ويمنعك من استخدام أخرى. وبالمثل كل نوع يملك مجموعة من الفئات يمكن أن تحتوي على عناصر يمكنك، أو لا يمكنك استخدامها. هذا دليل يشرح هذه الفئات.</dd> + <dt class="landingPageList" dir="rtl"><a href="/ar/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">وضع المراوغة والوضع المعياري</a></dt> + <dd class="landingPageList" dir="rtl">معلومات تاريخيّة عن وضع المراوغة والوضع المعياري.</dd> +</dl> + +<h2 class="landingPageList" dir="rtl" id="مواضيع_متعلقة">مواضيع متعلقة</h2> + +<dl> + <dt dir="rtl"><a href="/ar/docs/Web/HTML/Applying_color">إضافة لون إلى عناصر لغة ترميز النص الفائق</a></dt> + <dd dir="rtl">هذه المقالة تغطي معظم الطرق التي يمكن استخدامها لإضفاء لون على عنصر، كما تسرد الأجزاء من مستند لغة ترميز النص الفاق التي يمكن تلوينها، وما الخصائص التي يمكنك استخدامها لفعل ذلك. تتضمن هذه المقالة على أمثلة، وروابط لأدوات تصميميّة( أدوات لاختيار ألوان، واختيار التدرجات اللونيّة... إلخ)، وغيرها من الأمور المفيدة.</dd> +</dl> +</div> +</div> + +<p dir="rtl"><span class="alllinks"><a href="/ar/docs/tag/%D9%84%D8%BA%D8%A9%20%D8%AA%D8%B1%D9%85%D9%8A%D8%B2%20%D8%A7%D9%84%D9%86%D8%B5%20%D8%A7%D9%84%D9%81%D8%A7%D8%A6%D9%82">عرض المزيد...</a></span></p> +</section> diff --git a/files/ar/web/html_لغة_ترميز_النص_الفائق/index.html b/files/ar/web/html_لغة_ترميز_النص_الفائق/index.html new file mode 100644 index 0000000000..b228c2f893 --- /dev/null +++ b/files/ar/web/html_لغة_ترميز_النص_الفائق/index.html @@ -0,0 +1,88 @@ +--- +title: HTML (لغة ترميز النص الفائق) +slug: Web/HTML_لغة_ترميز_النص_الفائق +translation_of: Web/HTML +--- +<div>{{HTMLSidebar}}</div> + +<p class="summary" dir="rtl"><span class="seoSummary">HTML (</span> لغة ترميز النصوص التشعبية <span class="seoSummary">) هي اللبنة الأساسية للويب. فهي تقوم بوصف و تعريف <em>محتوى</em> صفحة الويب. التقنيات الأخرى إلى جانب HTML تعمل عادةً على وصف مظهر صفحة الويب (<a href="https://developer.mozilla.org/ar/docs/Web/CSS">CSS</a>) أو تفاعلها مع المستخدم (<a href="https://developer.mozilla.org/ar/docs/Web/JavaScript">الجافاسكربت</a>). </span></p> + +<p dir="rtl">مصطلح "نص تشعبي" يشير إلى الروابط التي تربط صفحات الويب ببعضها, إما بموقع واحد أو بين مواقع متعددة. فالروابط هي جانب أساسي من الويب. عبر رفعك لمحتوى على الأنترنت و ربطه بصفحات أخرى أنشأها أشخاص آخرون, فأنت تصبح مشارك نشيط في شبكة الأنترنت.</p> + +<p dir="rtl">تستخدم HTML "الوسوم" لوصف النصوص, الصور, وغيرها من المحتويات لعرضعها على متصفح الويب. وسوم HTML تتضمن "عناصر" خاصة مثل {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}, وغيرها الكثير.</p> + +<p dir="rtl">المقالات أدناه ستساعدك على تعلم المزيد حول HTML.</p> + +<section class="cleared" id="sect1"> +<ul class="card-grid"> + <li dir="rtl"><span>مقدمة عن HTML</span>إذا كنت جديداً على تطوير الويب, فاحرص على قراءة مقالتنا حول <a href="/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">أساسيات HTML</a> لتعرف ماهي HTML وكيف يمكنك استخدامها.</li> + <li dir="rtl"><span>دورات عن HTML</span>للحصول على مقالات عن كيفية استخدام HTML, و كذلك على دورات و أمثلة شاملة, تفقد منطقة <a href="/en-US/docs/Learn/HTML">تعلم HTML</a> خاصتنا.</li> + <li dir="rtl"><span>مرجع HTML</span> + <p>في قسم <a href="/en-US/docs/Web/HTML/Reference">مرجع HTML</a> الشامل خاصتنا, ستجد تفاصيل حول كل عنصر و صِفة في HTML . </p> + </li> +</ul> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Tools" dir="rtl" id="Tools" name="Tools">دورات للمبتدئين</h2> + +<p dir="rtl"><a href="/en-US/docs/Learn/HTML">منطقة تعلم HTML</a> خاصتنا تتميز بوحدات متعددة و التي تقوم بتعليم HTML من الألف إلى الياء — لا تتطلب معرفة مسبقة.</p> + +<dl> + <dt dir="rtl"><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">مقدمة عن HTML</a></dt> + <dd dir="rtl">هذا الوحدة تقوم بتحديد المستوى, تأخذك لتعلم المفاهيم المهمة و تركيب اللغة, كيف يمكنك إنشاء وصلات أنترنت, و كيف يمكنك استخدام HTML لبناء صفحة ويب.</dd> + <dt dir="rtl"><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">الوسائط المتعددة و التضمين</a></dt> + <dd dir="rtl">هذه الوحدة تشرح كيف يمكنك استخدام أتش تي أم إل لتضمين وسائط متعددة في صفحات الويب خاصتك, وتتضمن المقالة طرق مختلفة يمكنك استخدامها لإضافة صورة, و كيف يمكنك تضمين فيديو, صوت, و حتى صفحات ويب أخرى كاملة.</dd> + <dt dir="rtl"><a href="/en-US/docs/Learn/HTML/Tables">جداول HTML</a></dt> + <dd dir="rtl">يمثل عرض البيانات المجدولة على صفحة الويب بطريق مفهومة و سهلة الوصول تحدياً. هذه الوحدة تغطي وسوم الجدول الأساسية, إلى جانب ميزات أكثر تعقيداً مثل إضافة تسميات توضيحية و ملخصات.</dd> + <dt dir="rtl"><a href="/en-US/docs/Learn/HTML/Forms">استمارات HTML</a></dt> + <dd dir="rtl">الاستمارات هي جزئ مهم جداً من الويب — فهذا يوفر الكثير من الوظائف التي ستحتاجها للتفاعل مع الموقع, مثل التسجيل و تسجيل التدخول, ارسال دعم, شراء منتجات, و المزيد. هذه الوحدة ستأخذك لتبدأ بإنشاء استمارة من ناحية جهة الخادم.</dd> + <dt dir="rtl"><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto">استخدام HTML لحل مشاكل شائعة</a></dt> + <dd dir="rtl">توفر هذه المقالة روابط لأقسام تحتوي على شرح لكيفية استخدام HTML لحل مشاكل شائعة جداً عندما تقوم بإنشاء صفحة ويب مثل: التعامل مع العناوين, إضافة صورة أو فيديو, تأكيد المحتوى, إنشاء استمارة بسيطة و المزيد.</dd> +</dl> + +<h2 dir="rtl" id="مواضيع_متقدمة">مواضيع متقدمة</h2> + +<dl> + <dt class="landingPageList" dir="rtl"><a href="/en-US/docs/Web/HTML/Focus_management_in_HTML">ادارة التركيز في HTML</a></dt> + <dd class="landingPageList" dir="rtl">الصفة <code><a href="/en-US/docs/Web/API/Document/activeElement">activeElement</a></code><a href="/en-US/docs/Web/API/Document/activeElement"> </a>و الدالة <code><a href="/en-US/docs/Web/API/Document/hasFocus">hasFocus()</a></code> التي تساعدك على تتبع و التحكم بتفاعلات المستخدم مع عناصر صفحة الويب. </dd> + <dt class="landingPageList" dir="rtl"><a href="/en-US/docs/Web/HTML/Using_the_application_cache">استخدام ذاكرة التخزين المؤقت للتطبيق</a></dt> + <dd class="landingPageList" dir="rtl">ذاكرة التخزين المؤقت تسمح للتطبيقات المبنية على الويب بالعمل في وضع عدم الإتصال. يمكنك استخدام واجهة <strong>ذاكرة التخزين المؤقت للتطبيق</strong> (<em>AppCache</em>) لتحديد الموارد التي يجب على المتصفح تخزينها و إتاحتها للمستخدمين في وضع عدم الإتصال. التطبيقات التي يتم تحميلها مؤقتاً تعمل بشكل صحيح حتى و لو قام المستخدمون بالضغط على زر التحديث عندما يكونون في وضع عدم الإتصال. </dd> +</dl> +</div> + +<div class="section"> +<h2 class="Documentation" dir="rtl" id="مراجع">مراجع</h2> + +<dl> + <dt class="landingPageList" dir="rtl"><a href="/en-US/docs/Web/HTML/Reference">مرجع HTML</a></dt> + <dd class="landingPageList" dir="rtl">تتألف HTML من <strong>عناصر</strong>, كل منها يمكن تعديلها بواسطة عدد من <strong>الصفات</strong>. وثائق HTML متلصة ببعضها البعض بواسطة <a href="/en-US/docs/Web/HTML/Link_types">روابط</a>.</dd> + <dt class="landingPageList" dir="rtl"><a href="/en-US/docs/Web/HTML/Element">مرجع عناصر HTML</a></dt> + <dd class="landingPageList" dir="rtl">تصفح قائمة لجميع <a class="glossaryLink" href="/en-US/docs/Glossary/HTML">عناصر HTML</a>.</dd> + <dt class="landingPageList" dir="rtl"><a href="/en-US/docs/Web/HTML/Attributes">مرجع صفات HTML</a></dt> + <dd class="landingPageList" dir="rtl">العناصر في HTML تمتلك صفات. تعد هذه الصفات قيم إضافية تقوم بتعديل العناصر أو تخصيص وظيفتها بطرق مختلفة.</dd> + <dt class="landingPageList" dir="rtl"><a href="/en-US/docs/Web/HTML/Global_attributes">الصفات الشاملة</a></dt> + <dd class="landingPageList" dir="rtl">الصفات الشاملة قد يمكن استخدامها على جميع <a href="/en-US/docs/Web/HTML/Element">عناصر HTML</a>, <em>حتى العناصر الغير معيارية</em>. هذا يعني أنَّ أي عنصر غير معياري لا يزال يجب أن يسمح باستخدام هذه الصفات, على الرغم أنَّ هذه العناصر تجعل مستند HTML5 غير متوافق.</dd> + <dt class="landingPageList" dir="rtl"><a href="/en-US/docs/Web/HTML/Inline_elements">العناصر المضمنة</a> و <a href="/en-US/docs/Web/HTML/Block-level_elements">العناصر المستحوذة</a></dt> + <dd class="landingPageList" dir="rtl">العناصر في <strong>HTML</strong> عادةً إما "مضمنة" أو "مستحوذة". العنصر المضمن يأحذ المساحة المحصورة بواسطة الوسوم التي تحدده. أما العنصر المستحوذ فأنه يأخذ كامل مساحة العنصر الأب (الحاوي), وبالتالي فإنه ينشئ "كتلة".</dd> + <dt class="landingPageList" dir="rtl"><a href="/en-US/docs/Web/HTML/Link_types">أنواع الرابط</a></dt> + <dd class="landingPageList" dir="rtl">في HTML, أنواع روابط متنوعة يمكن استخدامها لإنشاء أو تعريف صلة بين وثيقتين. تتضمن عناصر الرابط التي يمكن استخدامها على <a href="/en-US/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/en-US/docs/Web/HTML/Element/area"><code><area></code></a>, و <a href="/en-US/docs/Web/HTML/Element/link"><code><link></code></a>.</dd> + <dt class="landingPageList" dir="rtl"><a href="/en-US/docs/Web/HTML/Supported_media_formats">صيغ الوسائط المدعومة في HTML و عناصر الصوت و الفيديو</a></dt> + <dd class="landingPageList" dir="rtl">عنصر <a href="/en-US/docs/Web/HTML/Element/audio"><code><audio></code></a> و <a href="/en-US/docs/Web/HTML/Element/video"><code><video></code></a> يسمح لك بتشغيل وسائط الصوت و الفيديو. هذه العناصر توفر بدائل مشابهة للمتصفح كالتي موجودة في أدوبي فلاش و الإضافات الأخرى.</dd> + <dt class="landingPageList" dir="rtl"><a href="/en-US/docs/Web/HTML/Kinds_of_HTML_content">أنواع محتوى HTML</a></dt> + <dd class="landingPageList" dir="rtl">تتألف HTML من عدة أنواع من المحتوى, كل نوع يسمح لك باستخدام عدة سياقات و يمنعك استخدامها في أخرى. وبالمثل كل نوع يملك مجموعة من الفئات يمكن أن تحتوي على عناصر يمكن أو لا يمكن استخدامها. هذا دليل لهذه الفئات.</dd> + <dt class="landingPageList" dir="rtl"><a href="/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">وضع المراوغة و الوضع المعياري</a></dt> + <dd class="landingPageList" dir="rtl">معلومات تاريخية عن وضع المراوغة و الوضع المعياري.</dd> +</dl> + +<h2 class="landingPageList" dir="rtl" id="مواضيع_متعلقة">مواضيع متعلقة</h2> + +<dl> + <dt dir="rtl"><a href="/en-US/docs/Web/HTML/Applying_color">إضافة لون إلى عناصر HTML باستخدام السي أس أس</a></dt> + <dd dir="rtl">هذه المقالة تغطي معظم الطرق التي يمكن ان تستخدمها لإضافة لون لمحتوى HTML, و تسرد ما الأجزاء من وثيقة HTML التي يمكن تلوينها و ما خصائص السي أس أس التي يمكنك استخدامها لفعل ذلك. تتضمن أمثلة, روابط لأدوات تصميم أنماط (اختيار ألوان, اختيار تدرج لوني ..), و المزيد.</dd> +</dl> +</div> +</div> + +<p dir="rtl"><span class="alllinks"><a href="/en-US/docs/tag/HTML">رؤية المزيد..</a></span></p> +</section> 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 +--- +<div>{{HTTPSidebar}}</div> + +<p>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.</p> + +<h2 id="Articles">Articles</h2> + +<dl> + <dt><a href="/en-US/docs/Web/HTTP/Overview">Overview of HTTP</a></dt> + <dd>Describes what HTTP is and its role in the Web architecture, its position in the protocol stack.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP">Evolution of HTTP</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Negotiating)an_HTTP_version">Negotiating an HTTP version</a></dt> + <dd>Explains how a client and a server can negotiate a specific HTTP version and eventually upgrade the protocol version used.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Resources_and_URIs">Resources and URIs</a></dt> + <dd>A brief introduction of the notion of resources, identifiers, and locations on the Web.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web">Identifying resources on the Web</a></dt> + <dd>Describes how Web resources are referenced and how to locate them.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">Data URIs</a></dt> + <dd>A specific kind of URIs that directly embeds the resource it represents. Data URIs are very convenient, but have some caveats.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Resource_URLs">Resource URLs</a> {{Non-standard_Inline}}</dt> + <dd>Resource URLs, URLs prefixed with the <code>resource:</code> 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.</dd> + <dt>Separating identity and location of a resource: the Alt-Svc HTTP header</dt> + <dd>Most of the time identity and location of a Web resource are shared, this can be changed with the {{HTTPHeader("Alt-Svc")}} header.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME types</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Choosing_between_www_and_non-www_URLs">Choosing between www and non-www URLs</a></dt> + <dd>Advice on using a www-prefixed domain or not, this article explains the consequences of the choice as well as how to make it.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Flow_of_an_HTTP_session">Flow of an HTTP session</a></dt> + <dd>This fundamental article describes a typical HTTP session: what happens under the hood when you click on a link in your browser…</dd> + <dt><a href="/en-US/docs/Web/HTTP/Messages">HTTP Messages</a></dt> + <dd>HTTP Messages transmitted during requests or responses have a very clear structure; this introductory article describes this structure, its purpose and its possibilities.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Frame and message structure in HTTP_2">Frame and message structure in HTTP/2</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Connection_management_in_HTTP_1.x">Connection management in HTTP/1.x</a></dt> + <dd>HTTP/1.1 was the first version of HTTP to support persistent connection and pipelining. This article explains these two concepts.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Connection_management_in_HTTP_2">Connection management in HTTP/2</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Content_negotiation">Content Negotiation</a></dt> + <dd>HTTP introduces a set of headers, starting with <code>Accept-</code> 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.</dd> +</dl> 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 +--- +<div>{{HTTPSidebar}}</div> + +<p>في ما يلي قائمة بأنواع MIME ، المرتبطة بنوع المستندات ، مرتبة حسب الإضافات الشائعة.</p> + +<p>هناك نوعان رئيسيان من MIME مهمان لدور الأنواع الافتراضية:</p> + +<ul> + <li><code>text/plain</code>هي القيمة الافتراضية للملفات النصية. يجب أن يكون الملف النصي قابلاً للقراءة ، ويجب ألا يحتوي على بيانات ثنائية.</li> + <li><code>application/octet-stream</code>هي القيمة الافتراضية لجميع الحالات الأخرى. يجب أن يستخدم نوع الملف غير المعروف هذا النوع. وتدفع المتصفحات عناية خاصة عند التعامل مع هذه الملفات ، في محاولة لحماية المستخدم لمنع السلوكيات الخطيرة.</li> +</ul> + +<p>IANA هو السجل الرسمي لأنواع وسائط MIME ويحافظ على <a href="http://www.iana.org/assignments/media-types/media-types.xhtml">قائمة بجميع أنواع MIME الرسمية</a> . يسرد هذا الجدول بعض أنواع MIME المهمة للويب:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">تمديد</th> + <th scope="col">نوع الوثيقة</th> + <th scope="col">نوع التمثيل الصامت</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>.aac</code></td> + <td>صوت AAC</td> + <td><code>audio/aac</code></td> + </tr> + <tr> + <td><code>.abw</code></td> + <td>وثيقة <a href="https://en.wikipedia.org/wiki/AbiWord">أبي ورد</a></td> + <td><code>application/x-abiword</code></td> + </tr> + <tr> + <td><code>.arc</code></td> + <td>وثيقة الأرشيف (ملفات متعددة مدمجة)</td> + <td><code>application/octet-stream</code></td> + </tr> + <tr> + <td><code>.avi</code></td> + <td>AVI: تداخل الصوت والفيديو</td> + <td><code>video/x-msvideo</code></td> + </tr> + <tr> + <td><code>.azw</code></td> + <td>تنسيق Amazon Kindle eBook</td> + <td><code>application/vnd.amazon.ebook</code></td> + </tr> + <tr> + <td><code>.bin</code></td> + <td>أي نوع من البيانات الثنائية</td> + <td><code>application/octet-stream</code></td> + </tr> + <tr> + <td><code>.bmp</code></td> + <td>نظام التشغيل Windows OS / 2 Bitmap Graphics</td> + <td><code>image/bmp</code></td> + </tr> + <tr> + <td><code>.bz</code></td> + <td>أرشيف BZip</td> + <td><code>application/x-bzip</code></td> + </tr> + <tr> + <td><code>.bz2</code></td> + <td>أرشيف BZip2</td> + <td><code>application/x-bzip2</code></td> + </tr> + <tr> + <td><code>.csh</code></td> + <td>نص C-Shell</td> + <td><code>application/x-csh</code></td> + </tr> + <tr> + <td><code>.css</code></td> + <td>أوراق الأنماط المتتالية (CSS)</td> + <td><code>text/css</code></td> + </tr> + <tr> + <td><code>.csv</code></td> + <td>قيم مفصولة بفواصل (CSV)</td> + <td><code>text/csv</code></td> + </tr> + <tr> + <td><code>.doc</code></td> + <td>مايكروسوفت وورد</td> + <td><code>application/msword</code></td> + </tr> + <tr> + <td><code>.docx</code></td> + <td>Microsoft Word (OpenXML)</td> + <td><code>application/vnd.openxmlformats-officedocument.wordprocessingml.document</code></td> + </tr> + <tr> + <td><code>.eot</code></td> + <td>MS Embedded OpenType fonts</td> + <td><code>application/vnd.ms-fontobject</code></td> + </tr> + <tr> + <td><code>.epub</code></td> + <td>المنشور الالكتروني (EPUB)</td> + <td><code>application/epub+zip</code></td> + </tr> + <tr> + <td><code>.es</code></td> + <td>ECMAScript (<a href="https://www.iana.org/assignments/media-types/application/ecmascript"><em><abbr title="Internet Assigned Numbers Authority">IANA</abbr> Specification</em></a>) (<a href="https://tools.ietf.org/html/rfc4329#section-8.2">RFC 4329 Section 8.2</a>)</td> + <td><code>application/ecmascript</code></td> + </tr> + <tr> + <td><code>.gif</code></td> + <td>Graphics Interchange Format (GIF)</td> + <td><code>image/gif</code></td> + </tr> + <tr> + <td><code>.htm<br> + .html</code></td> + <td>HyperText Markup Language (HTML)</td> + <td><code>text/html</code></td> + </tr> + <tr> + <td><code>.ico</code></td> + <td>Icon format</td> + <td><code>image/x-icon</code></td> + </tr> + <tr> + <td><code>.ics</code></td> + <td>iCalendar format</td> + <td><code>text/calendar</code></td> + </tr> + <tr> + <td><code>.jar</code></td> + <td>Java Archive (JAR)</td> + <td><code>application/java-archive</code></td> + </tr> + <tr> + <td><code>.jpeg</code><br> + <code>.jpg</code></td> + <td>JPEG images</td> + <td><code>image/jpeg</code></td> + </tr> + <tr> + <td><code>.js</code></td> + <td>JavaScript (<a href="https://www.iana.org/assignments/media-types/application/javascript"><em><abbr title="Internet Assigned Numbers Authority">IANA</abbr> Specification</em></a>) (<a href="https://tools.ietf.org/html/rfc4329#section-8.2">RFC 4329 Section 8.2</a>)</td> + <td><code>application/javascript</code></td> + </tr> + <tr> + <td><code>.json</code></td> + <td>JSON format</td> + <td><code>application/json</code></td> + </tr> + <tr> + <td><code>.mid</code><br> + <code>.midi</code></td> + <td>Musical Instrument Digital Interface (MIDI)</td> + <td><code>audio/midi</code> <code>audio/x-midi</code></td> + </tr> + <tr> + <td><code>.mpeg</code></td> + <td>MPEG Video</td> + <td><code>video/mpeg</code></td> + </tr> + <tr> + <td><code>.mpkg</code></td> + <td>Apple Installer Package</td> + <td><code>application/vnd.apple.installer+xml</code></td> + </tr> + <tr> + <td><code>.odp</code></td> + <td>OpenDocument presentation document</td> + <td><code>application/vnd.oasis.opendocument.presentation</code></td> + </tr> + <tr> + <td><code>.ods</code></td> + <td>OpenDocument spreadsheet document</td> + <td><code>application/vnd.oasis.opendocument.spreadsheet</code></td> + </tr> + <tr> + <td><code>.odt</code></td> + <td>OpenDocument text document</td> + <td><code>application/vnd.oasis.opendocument.text</code></td> + </tr> + <tr> + <td><code>.oga</code></td> + <td>OGG audio</td> + <td><code>audio/ogg</code></td> + </tr> + <tr> + <td><code>.ogv</code></td> + <td>OGG video</td> + <td><code>video/ogg</code></td> + </tr> + <tr> + <td><code>.ogx</code></td> + <td>OGG</td> + <td><code>application/ogg</code></td> + </tr> + <tr> + <td><code>.otf</code></td> + <td>OpenType font</td> + <td><code>font/otf</code></td> + </tr> + <tr> + <td><code>.png</code></td> + <td>Portable Network Graphics</td> + <td><code>image/png</code></td> + </tr> + <tr> + <td><code>.pdf</code></td> + <td>Adobe <a href="https://acrobat.adobe.com/us/en/why-adobe/about-adobe-pdf.html">Portable Document Format</a> (PDF)</td> + <td><code>application/pdf</code></td> + </tr> + <tr> + <td><code>.ppt</code></td> + <td>Microsoft PowerPoint</td> + <td><code>application/vnd.ms-powerpoint</code></td> + </tr> + <tr> + <td><code>.pptx</code></td> + <td>Microsoft PowerPoint (OpenXML)</td> + <td><code>application/vnd.openxmlformats-officedocument.presentationml.presentation</code></td> + </tr> + <tr> + <td><code>.rar</code></td> + <td>RAR archive</td> + <td><code>application/x-rar-compressed</code></td> + </tr> + <tr> + <td><code>.rtf</code></td> + <td>Rich Text Format (RTF)</td> + <td><code>application/rtf</code></td> + </tr> + <tr> + <td><code>.sh</code></td> + <td>Bourne shell script</td> + <td><code>application/x-sh</code></td> + </tr> + <tr> + <td><code>.svg</code></td> + <td>Scalable Vector Graphics (SVG)</td> + <td><code>image/svg+xml</code></td> + </tr> + <tr> + <td><code>.swf</code></td> + <td><a href="https://en.wikipedia.org/wiki/SWF">تنسيق ويب صغير</a> (SWF) أو مستند Adobe Flash</td> + <td><code>application/x-shockwave-flash</code></td> + </tr> + <tr> + <td><code>.tar</code></td> + <td>أرشيف الشريط (TAR)</td> + <td><code>application/x-tar</code></td> + </tr> + <tr> + <td><code>.tif<br> + .tiff</code></td> + <td>تنسيق ملفات الصور ذات العلامات (TIFF)</td> + <td><code>image/tiff</code></td> + </tr> + <tr> + <td><code>.ts</code></td> + <td>ملف التوليف</td> + <td><code>application/typescript</code></td> + </tr> + <tr> + <td><code>.ttf</code></td> + <td>خط تروتايب</td> + <td><code>font/ttf</code></td> + </tr> + <tr> + <td><code>.txt</code></td> + <td>نص ، (بشكل عام ASCII أو ISO 8859- <em>n</em> )</td> + <td><code>text/plain</code></td> + </tr> + <tr> + <td><code>.vsd</code></td> + <td>مايكروسوفت فيزيو</td> + <td><code>application/vnd.visio</code></td> + </tr> + <tr> + <td><code>.wav</code></td> + <td>شكل الصوت الموجي</td> + <td><code>audio/wav</code></td> + </tr> + <tr> + <td><code>.weba</code></td> + <td>WEBM الصوت</td> + <td><code>audio/webm</code></td> + </tr> + <tr> + <td><code>.webm</code></td> + <td>WEBM الفيديو</td> + <td><code>video/webm</code></td> + </tr> + <tr> + <td><code>.webp</code></td> + <td>صورة الويب</td> + <td><code>image/webp</code></td> + </tr> + <tr> + <td><code>.woff</code></td> + <td>تنسيق خط مفتوح على الويب (WOFF)</td> + <td><code>font/woff</code></td> + </tr> + <tr> + <td><code>.woff2</code></td> + <td>تنسيق خط مفتوح على الويب (WOFF)</td> + <td><code>font/woff2</code></td> + </tr> + <tr> + <td><code>.xhtml</code></td> + <td>XHTML</td> + <td><code>application/xhtml+xml</code></td> + </tr> + <tr> + <td><code>.xls</code></td> + <td>مايكروسوفت اكسل</td> + <td><code>application/vnd.ms-excel</code></td> + </tr> + <tr> + <td><code>.xlsx</code></td> + <td>Microsoft Excel (OpenXML)</td> + <td><code>application/vnd.openxmlformats-officedocument.spreadsheetml.sheet</code></td> + </tr> + <tr> + <td><code>.xml</code></td> + <td><code>XML</code></td> + <td><code>application/xml</code></td> + </tr> + <tr> + <td><code>.xul</code></td> + <td>XUL</td> + <td>التطبيق / vnd.mozilla.xul + أكس</td> + </tr> + <tr> + <td><code>.zip</code></td> + <td>أرشيف ZIP</td> + <td><code>application/zip</code></td> + </tr> + <tr> + <td><code>.3gp</code></td> + <td>حاوية الصوت / الفيديو <a href="https://en.wikipedia.org/wiki/3GP_and_3G2">3GPP</a></td> + <td><code>video/3gpp</code><br> + <code>audio/3gpp</code> إذا لم يكن يحتوي على فيديو</td> + </tr> + <tr> + <td><code>.3g2</code></td> + <td>حاوية الصوت / الفيديو <a href="https://en.wikipedia.org/wiki/3GP_and_3G2">3GPP2</a></td> + <td><code>video/3gpp2</code><br> + <code>audio/3gpp2</code> إذا لم يكن يحتوي على فيديو</td> + </tr> + <tr> + <td><code>.7z</code></td> + <td>أرشيف <a href="https://en.wikipedia.org/wiki/7-Zip">7-zip</a></td> + <td><code>application/x-7z-compressed</code></td> + </tr> + </tbody> +</table> 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 +--- +<p><span class="seoSummary">A <strong>Multipurpose Internet Mail Extensions (MIME) type</strong> is a standard that indicates the nature and format of a document, file, or assortment of bytes.</span> It is defined and standardized in <a href="https://tools.ietf.org/html/rfc6838">IETF RFC 6838</a>.</p> + +<p>The <a href="https://www.iana.org/">Internet Assigned Numbers Authority (IANA)</a> is responsible for all official MIME types, and you can find the most up-to-date and complete list at their <a href="https://www.iana.org/assignments/media-types/media-types.xhtml">Media Types</a> page.</p> + +<div class="warning"> +<p>Browsers use the MIME type, <strong>not the file extension</strong>, to determine how to process a URL — it is important that servers send the correct MIME type in the response's <a href="/en-US/docs/Web/HTTP/Headers/Content-Type">Content-Type header</a>.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<h3 id="General_structure">General structure</h3> + +<pre class="syntaxbox">type/subtype</pre> + +<p>A MIME type consists of a <strong>type</strong> and a <strong>subtype</strong> — two strings separated by <code>/</code>. No whitespace is allowed. The <em>type</em> represents the category and can be a <em>discrete</em> or a <em>multipart</em> type. The <em>subtype</em> is specific to each type.</p> + +<p>MIME types are case-insensitive but traditionally written in lowercase.</p> + +<h3 id="Discrete_types">Discrete types</h3> + +<pre class="syntaxbox">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 +…</pre> + +<p><em>Discrete</em> types indicate the category of the document. They can be one of the following:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Type</th> + <th scope="col">Description</th> + <th scope="col">Example of typical subtypes</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>text</code></td> + <td>Any document that contains text and is theoretically human readable</td> + <td><code>text/plain</code>, <code>text/html</code>, <code>text/css</code>, <code>text/javascript</code>, <code>text/markdown</code></td> + </tr> + <tr> + <td><code>image</code></td> + <td>Any kind of image. Videos are not included, though animated images (like animated GIF) are described with an image type.</td> + <td><code>image/gif</code>, <code>image/png</code>, <code>image/jpeg</code>, <code>image/bmp</code>, <code>image/webp</code>, <code>image/vnd.microsoft.icon</code></td> + </tr> + <tr> + <td><code>audio</code></td> + <td>Any kind of audio file</td> + <td><code>audio/midi</code>, <code>audio/mpeg, audio/webm, audio/ogg, audio/wav</code></td> + </tr> + <tr> + <td><code>video</code></td> + <td>Any kind of video file</td> + <td><code>video/webm</code>, <code>video/ogg</code></td> + </tr> + <tr> + <td><code>application</code></td> + <td> + <p>Any kind of binary data, especially data that will be executed or interpreted somehow.</p> + </td> + <td><code>application/octet-stream</code>, <code>application/pkcs12</code>, <code>application/vnd.mspowerpoint</code>, <code>application/xhtml+xml</code>, <code>application/xml</code>, <code>application/pdf</code></td> + </tr> + </tbody> +</table> + +<p>For text documents without a specific subtype, <code>text/plain</code> should be used.</p> + +<p>Similarly, for binary documents without a specific or known subtype, <code>application/octet-stream</code> should be used.</p> + +<h3 id="Multipart_types">Multipart types</h3> + +<pre class="syntaxbox">multipart/form-data +multipart/byteranges</pre> + +<p id="sect1"><em>Multipart</em> types indicate a category of document broken into pieces, often with different MIME types. They represent a <em>composite</em> document. With the exception of <code>multipart/form-data</code>, used in the {{HTTPMethod("POST")}} method of <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML Forms</a>, and <code>multipart/byteranges</code>, used with {{HTTPStatus("206")}} <code>Partial Content</code> 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.)</p> + +<h2 id="Important_MIME_types_for_Web_developers">Important MIME types for Web developers</h2> + +<h3 id="applicationoctet-stream"><code>application/octet-stream</code></h3> + +<p>This is the default for binary files. As it means <em>unknown binary </em> 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 <code>attachment</code>, and propose a "Save As" dialog.</p> + +<h3 id="textplain"><code>text/plain</code></h3> + +<p>This is the default for textual files. Even if it really means <em>unknown textual</em> file, browsers assume they can display it.</p> + +<div class="note"> +<p>Note that <code>text/plain</code> does not mean <em>any kind of textual data</em>. If they expect a specific kind of textual data, they will likely not consider it a match. Specifically if they download a <code>text/plain</code> file from a {{HTMLElement("link")}} element declaring a CSS files, they will not recognize it as a valid CSS files if presented with <code>text/plain</code>. The CSS mime type <code>text/css</code> must be used.</p> +</div> + +<h3 id="textcss"><code>text/css</code></h3> + +<p>CSS files used to style a Web page<strong> must</strong> be sent with <code>text/css</code>. If a server doesn't recognize the <code>.css</code> suffix for CSS files, it may send them with <code>text/plain</code> or <code>application/octet-stream</code> MIME types. If so, they won't be recognized as CSS by most browsers and will be ignored.</p> + +<h3 id="texthtml"><code>text/html</code></h3> + +<p>All HTML content should be served with this type. Alternative MIME types for XHTML (like <code>application/xhtml+xml</code>) are mostly useless nowadays.</p> + +<div class="note"> +<p><strong>Note:</strong> Use <code>application/xml</code> or <code>application/xhtml+xml</code> if you want XML’s strict parsing rules, <code><a href="/en-US/docs/Web/API/CDATASection"><![CDATA[…]]></a></code> sections, or elements that aren't from HTML/SVG/MathML namespaces.</p> +</div> + +<h3 id="textjavascript"><code>text/javascript</code></h3> + +<p>The <a href="https://html.spec.whatwg.org/multipage/scripting.html#scriptingLanguages">Scripting languages</a> section of the HTML Standard states:</p> + +<blockquote> +<p>Servers should use <code>text/javascript</code> for JavaScript resources. Servers should not use other JavaScript MIME types for JavaScript resources, and must not use non-JavaScript MIME types.</p> +</blockquote> + +<p>The other JavaScript MIME types that should not be used are defined in the <a href="https://mimesniff.spec.whatwg.org/">MIME Sniffing Standard</a> as follows:</p> + +<ul> + <li><code>application/javascript</code> {{deprecated_inline}}</li> + <li><code>application/ecmascript</code> {{deprecated_inline}}</li> + <li><code>application/x-ecmascript</code> {{non-standard_inline}} {{deprecated_inline}}</li> + <li><code>application/x-javascript</code> {{non-standard_inline}} {{deprecated_inline}}</li> + <li><code>text/ecmascript</code> {{deprecated_inline}}</li> + <li><code>text/javascript1.0</code> {{non-standard_inline}} {{deprecated_inline}}</li> + <li><code>text/javascript1.1</code> {{non-standard_inline}} {{deprecated_inline}}</li> + <li><code>text/javascript1.2</code> {{non-standard_inline}} {{deprecated_inline}}</li> + <li><code>text/javascript1.3</code> {{non-standard_inline}} {{deprecated_inline}}</li> + <li><code>text/javascript1.4</code> {{non-standard_inline}} {{deprecated_inline}}</li> + <li><code>text/javascript1.5</code> {{non-standard_inline}} {{deprecated_inline}}</li> + <li><code>text/jscript</code> {{non-standard_inline}} {{deprecated_inline}}</li> + <li><code>text/livescript</code> {{non-standard_inline}} {{deprecated_inline}}</li> + <li><code>text/x-ecmascript</code> {{non-standard_inline}} {{deprecated_inline}}</li> + <li><code>text/x-javascript</code> {{non-standard_inline}} {{deprecated_inline}}</li> +</ul> + +<h3 id="Image_types">Image types</h3> + +<p>Only a few image types are widely recognized enough to be safe for use in a Web page:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">MIME type</th> + <th scope="col">Image type</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>image/gif</code></td> + <td>GIF images (lossless compression, superseded by PNG)</td> + </tr> + <tr> + <td><code>image/jpeg</code></td> + <td>JPEG images</td> + </tr> + <tr> + <td><code>image/png</code></td> + <td>PNG images</td> + </tr> + <tr> + <td><code>image/svg+xml</code></td> + <td>SVG images (vector images)</td> + </tr> + <tr> + <td><code>image/x-icon</code>, <code>image/vnd.microsoft.icon</code><sup><a href="#Image_types-Footnote_1" title="Despite image/vnd.microsoft.icon being registered with IANA it is largely unsupported, and image/x-icon is being used instead.">[1]</a></sup></td> + <td>Windows icons</td> + </tr> + </tbody> +</table> + +<p>There is a discussion to add WebP (<code>image/webp</code>) to this list, but browser vendors are cautious in accepting it.</p> + +<p>Other kinds of images can be found in Web documents. For example, many browsers support ICO images for favicons with the <code>image/x-icon</code> MIME type.</p> + +<dl> + <dt id="Image_types-Footnote_1">Footnote 1</dt> + <dd>Despite <code>image/vnd.microsoft.icon</code> being <a href="https://www.iana.org/assignments/media-types/image/vnd.microsoft.icon">registered with IANA</a>, it is largely unsupported, and <code>image/x-icon</code> is being used instead.</dd> +</dl> + +<h3 id="Audio_and_video_types">Audio and video types</h3> + +<p>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. <a href="/en-US/docs/Web/HTML/Supported_media_formats">Media formats supported by the HTML audio and video elements</a> explains both the codecs and container formats which can be used.</p> + +<p>The MIME type of audiovisual files mostly indicate the container formats. The most common ones on the Web are:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">MIME type</th> + <th scope="col">Audio or video type</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>audio/wave</code><br> + <code>audio/wav</code><br> + <code>audio/x-wav</code><br> + <code>audio/x-pn-wav</code></td> + <td>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).</td> + </tr> + <tr> + <td><code>audio/webm</code></td> + <td>An audio file in the WebM container format. Vorbis and Opus are the most common audio codecs.</td> + </tr> + <tr> + <td><code>video/webm</code></td> + <td>A 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.</td> + </tr> + <tr> + <td><code>audio/ogg</code></td> + <td>An audio file in the OGG container format. Vorbis is the most common audio codec used in such a container.</td> + </tr> + <tr> + <td><code>video/ogg</code></td> + <td>A 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.</td> + </tr> + <tr> + <td><code>application/ogg</code></td> + <td>An audio or video file using the OGG container format. Theora is the usual video codec used within it; Vorbis is the usual audio codec.</td> + </tr> + </tbody> +</table> + +<h3 id="multipartform-data"><code>multipart/form-data</code></h3> + +<p>The <code>multipart/form-data</code><em> </em>type can be used when sending the values of a completed <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML Form</a> from browser to server.</p> + +<p>As a multipart document format, it consists of different parts, delimited by a boundary (a string starting with a double dash <code>'--'</code>). Each part is its own entity with its own HTTP headers, {{HTTPHeader("Content-Disposition")}}, and {{HTTPHeader("Content-Type")}} for file uploading fields.</p> + +<pre class="syntaxbox">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-- + +</pre> + +<p>The following <code><form></code>:</p> + +<pre class="brush: html"><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></pre> + +<p>will send this message:</p> + +<pre>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-- + +</pre> + +<h3 id="multipartbyteranges"><code>multipart/byteranges</code></h3> + +<p>The <code>multipart/byteranges</code> MIME type is used to send partial responses to the browser.</p> + +<p>When the {{HTTPStatus("206")}}<code> Partial Content</code> 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 <code>boundary</code> 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.</p> + +<pre><code>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--</code></pre> + +<h2 id="Importance_of_setting_the_correct_MIME_type">Importance of setting the correct MIME type</h2> + +<p>Most web servers send unrecognized resources as the <code>application/octet-stream</code> 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.</p> + +<p>Some common incorrect server configurations:</p> + +<ul> + <li> + <p>RAR-compressed files. In this case, the ideal would be the true type of the original files; this is often impossible as .RAR files can hold several resources of different types. In this case, configure the server to send <code>application/x-rar-compressed</code>.</p> + </li> + <li> + <p>Audio and video. Only resources with the correct MIME Type will be played in {{ HTMLElement("video") }} or {{ HTMLElement("audio") }} elements. Be sure to <a href="/En/Media_formats_supported_by_the_audio_and_video_elements">use the correct type for audio and video</a>.</p> + </li> + <li> + <p>Proprietary file types. Avoid using <code>application/octet-stream</code> as most browsers do not allow defining a default behavior (like "Open in Word") for this generic MIME type. A specific type like <code>application/vnd.mspowerpoint</code> lets users open such files automatically in the presentation software of their choice.</p> + </li> +</ul> + +<h2 id="MIME_sniffing">MIME sniffing</h2> + +<p>In the absence of a MIME type, or in certain cases where browsers believe they are incorrect, browsers may perform <em>MIME sniffing</em> — guessing the correct MIME type by looking at the bytes of the resource.</p> + +<p>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.</p> + +<h2 id="Other_methods_of_conveying_document_type">Other methods of conveying document type</h2> + +<p>MIME types are not the only way to convey document type information:</p> + +<ul> + <li>Filename suffixes are sometimes used, especially on Microsoft Windows. Not all operating systems consider these suffixes meaningful (such as Linux and MacOS), and there is no guarantee they are correct.</li> + <li>Magic numbers. The syntax of different formats allows file-type inference by looking at their byte structure. For example, GIF files start with the <code>47 49 46 38 39</code> hexadecimal value (<code>GIF89</code>), and PNG files with <code>89 50 4E 47</code> (<code>.PNG</code>). Not all file types have magic numbers, so this is not 100% reliable either.</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/Security/Securing_your_site/Configuring_server_MIME_types">Properly configuring server MIME types</a></li> + <li><a href="/en-US/docs/Web/HTML/Supported_media_formats">Media formats supported by the HTML audio and video elements</a></li> + <li> + <p><a href="https://www.iana.org/assignments/media-types/application/json">https://www.iana.org/assignments/media-types/application/json</a></p> + </li> +</ul> + +<div>{{HTTPSidebar}}</div> 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 +--- +<div>{{HTTPSidebar}}</div> + +<p class="summary">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: <em>short-lived connections</em>, <em>persistent connections</em>, and <em>HTTP pipelining. </em></p> + +<p>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.</p> + +<p>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.</p> + +<p>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.</p> + +<p><img alt="Compares the performance of the three HTTP/1.x connection models: short-lived connections, persistent connections, and HTTP pipelining." src="https://mdn.mozillademos.org/files/13727/HTTP1_x_Connections.png" style="height: 538px; width: 813px;"></p> + +<div class="note"> +<p>HTTP/2 adds additional models for connection management.</p> +</div> + +<p>It's important point to note that connection management in HTTP applies to the connection between two consecutive nodes, which is <a href="/en-US/docs/Web/HTTP/Headers#hbh">hop-by-hop</a> and not <a href="/en-US/docs/Web/HTTP/Headers#e2e">end-to-end</a>. 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 <a href="/en-US/docs/Web/HTTP/Headers#hbh">hop-by-hop</a> headers with their values able to be changed by intermediary nodes.</p> + +<p>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 <a href="/en-US/docs/Web/HTTP/Protocol_upgrade_mechanism">protocol upgrade mechanism</a> is documented in more detail elsewhere.</p> + +<h2 id="Short-lived_connections">Short-lived connections</h2> + +<p>The original model of HTTP, and the default one in HTTP/1.0, is <em>short-lived connections</em>. Each HTTP request is completed on its own connection; this means a TCP handshake happens before each HTTP request, and these are serialized.</p> + +<p>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.</p> + +<p>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 <code>close</code>). In HTTP/1.1, this model is only used when the {{HTTPHeader("Connection")}} header is sent with a value of <code>close</code>.</p> + +<div class="note"> +<p>Unless dealing with a very old system, which doesn't support a persistent connection, there is no compelling reason to use this model.</p> +</div> + +<h2 id="Persistent_connections">Persistent connections</h2> + +<p>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 <em>persistent connection</em> has been designed, even prior to HTTP/1.1. Alternatively this may be called a <em>keep-alive connection</em>.</p> + +<p>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).</p> + +<p>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.</p> + +<p>HTTP/1.0 connections are not persistent by default. Setting {{HTTPHeader("Connection")}} to anything other than <code>close</code>, usually <code>retry-after</code>, will make them persistent.</p> + +<p>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).</p> + +<h2 id="HTTP_pipelining">HTTP pipelining</h2> + +<div class="note"> +<p>HTTP pipelining is not activated by default in modern browsers:</p> + +<ul> + <li>Buggy <a href="https://en.wikipedia.org/wiki/Proxy_server">proxies</a> are still common and these lead to strange and erratic behaviors that Web developers cannot foresee and diagnose easily.</li> + <li>Pipelining is complex to implement correctly: the size of the resource being transferred, the effective <a href="https://en.wikipedia.org/wiki/Round-trip_delay_time">RTT</a> that will be used, as well as the effective bandwidth, have a direct incidence on the improvement provided by the pipeline. Without knowing these, important messages may be delayed behind unimportant ones. The notion of important even evolves during page layout! HTTP pipelining therefore brings a marginal improvement in most cases only.</li> + <li>Pipelining is subject to the <a href="https://en.wikipedia.org/wiki/Head-of-line_blocking">HOL</a> problem.</li> +</ul> + +<p>For these reasons, pipelining has been superseded by a better algorithm, <em>multiplexing</em>, that is used by HTTP/2.</p> +</div> + +<p>By default, <a href="/en-US/docs/Web/HTTP" title="en/HTTP">HTTP</a> 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 <em>seen</em> by the server.</p> + +<p>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 <a href="https://en.wikipedia.org/wiki/Maximum_segment_size">MSS</a> (Maximum Segment Size), is big enough to contain several simple requests, although the demand in size of HTTP requests continues to grow.</p> + +<p>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.</p> + +<p>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.</p> + +<h2 id="Domain_sharding">Domain sharding</h2> + +<div class="note"> +<p>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 <a href="https://daniel.haxx.se/blog/2016/08/18/http2-connection-coalescing/">connection coalescing</a> to revert eventual domain sharding.</p> +</div> + +<p>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 <a href="/en-US/docs/Glossary/DOS_attack">DoS</a> protection on the server side if attempting more than this number.</p> + +<p>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 <code>www.example.com</code>, it could split over several domains, <code>www1.example.com</code>, <code>www2.example.com</code>, <code>www3.example.com</code>. Each of these domains resolve to the <em>same</em> server, and the Web browser will open 6 connections to each (in our example, boosting the connections to 18). This technique is called <em>domain sharding</em>.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13783/HTTPSharding.png" style="height: 727px; width: 463px;"></p> + +<h2 id="Conclusion">Conclusion</h2> + +<p>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.</p> 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 +--- +<div>{{HTTPSidebar}}</div> + +<p><span class="seoSummary"><strong>HTTP headers</strong> 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 (<code>:</code>), then by its value.</span> <a href="/en-US/docs/Glossary/Whitespace">Whitespace</a> before the value is ignored.</p> + +<p>Custom proprietary headers have historically been used with an <code>X-</code> prefix, but this convention was deprecated in June 2012 because of the inconveniences it caused when nonstandard fields became standard in <a href="https://tools.ietf.org/html/rfc6648">RFC 6648</a>; others are listed in an <a class="external" href="http://www.iana.org/assignments/message-headers/perm-headers.html">IANA registry</a>, whose original content was defined in <a class="external" href="http://tools.ietf.org/html/rfc4229">RFC 4229</a>. IANA also maintains a <a class="external" href="http://www.iana.org/assignments/message-headers/prov-headers.html">registry of proposed new HTTP headers</a>.</p> + +<p>Headers can be grouped according to their contexts:</p> + +<ul> + <li>{{Glossary("General header", "General headers")}} apply to both requests and responses, but with no relation to the data transmitted in the body.</li> + <li>{{Glossary("Request header", "Request headers")}} contain more information about the resource to be fetched, or about the client requesting the resource.</li> + <li>{{Glossary("Response header", "Response headers")}} hold additional information about the response, like its location or about the server providing it.</li> + <li>{{Glossary("Entity header", "Entity headers")}} contain information about the body of the resource, like its <a href="/en-US/docs/Web/HTTP/Headers/Content-Length">content length</a> or <a href="/en-US/docs/Web/SVG/Content_type">MIME type</a>.</li> +</ul> + +<p>Headers can also be grouped according to how <a href="/en-US/docs/Glossary/Proxy_server">proxies</a> handle them:</p> + +<ul> + <li>{{ httpheader("Connection") }}</li> + <li>{{ httpheader("Keep-Alive") }}</li> + <li>{{ httpheader("Proxy-Authenticate") }}</li> + <li>{{ httpheader("Proxy-Authorization") }}</li> + <li>{{ httpheader("TE") }}</li> + <li>{{ httpheader("Trailer") }}</li> + <li>{{ httpheader("Transfer-Encoding") }}</li> + <li>{{ httpheader("Upgrade") }}.</li> +</ul> + +<dl> + <dt><a id="e2e" name="e2e"></a>End-to-end headers</dt> + <dd>These headers <em>must</em> 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.</dd> + <dt><a id="hbh" name="hbh"></a>Hop-by-hop headers</dt> + <dd>These headers are meaningful only for a single transport-level connection, and <em>must not</em> be retransmitted by proxies or cached. Note that only hop-by-hop headers may be set using the {{ httpheader("Connection") }} general header.</dd> +</dl> + +<h2 id="Authentication">Authentication</h2> + +<dl> + <dt>{{HTTPHeader("WWW-Authenticate")}}</dt> + <dd>Defines the authentication method that should be used to access a resource.</dd> + <dt>{{HTTPHeader("Authorization")}}</dt> + <dd>Contains the credentials to authenticate a user-agent with a server.</dd> + <dt>{{HTTPHeader("Proxy-Authenticate")}}</dt> + <dd>Defines the authentication method that should be used to access a resource behind a proxy server.</dd> + <dt>{{HTTPHeader("Proxy-Authorization")}}</dt> + <dd>Contains the credentials to authenticate a user agent with a proxy server.</dd> +</dl> + +<h2 id="Caching">Caching</h2> + +<dl> + <dt>{{HTTPHeader("Age")}}</dt> + <dd>The time, in seconds, that the object has been in a proxy cache.</dd> + <dt>{{HTTPHeader("Cache-Control")}}</dt> + <dd>Directives for caching mechanisms in both requests and responses.</dd> + <dt>{{HTTPHeader("Clear-Site-Data")}}</dt> + <dd>Clears browsing data (e.g. cookies, storage, cache) associated with the requesting website.</dd> + <dt>{{HTTPHeader("Expires")}}</dt> + <dd>The date/time after which the response is considered stale.</dd> + <dt>{{HTTPHeader("Pragma")}}</dt> + <dd>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 <code>Cache-Control</code> header is not yet present.</dd> + <dt>{{HTTPHeader("Warning")}}</dt> + <dd>General warning information about possible problems.</dd> +</dl> + +<h2 id="Client_hints">Client hints</h2> + +<p>HTTP <a href="/docs/Glossary/Client_hints">Client hints</a> are a work in progress. Actual documentation can be found on the <a href="https://httpwg.org/http-extensions/client-hints.html">website of the HTTP working group</a>.</p> + +<dl> + <dt>{{HTTPHeader("Accept-CH")}} {{experimental_inline}}</dt> + <dd>Servers can advertise support for Client Hints using the <code>Accept-CH</code> header field or an equivalent HTML <code><meta></code> element with <code>http-equiv</code> attribute (<a href="https://httpwg.org/http-extensions/client-hints.html#HTML5"><cite>[HTML5]</cite></a>).</dd> + <dt>{{HTTPHeader("Accept-CH-Lifetime")}} {{experimental_inline}}</dt> + <dd>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 (<a href="https://httpwg.org/http-extensions/client-hints.html#RFC6454"><cite>[RFC6454]</cite></a>).</dd> + <dt>{{HTTPHeader("Early-Data")}} {{experimental_inline}}</dt> + <dd>Indicates that the request has been conveyed in early data.</dd> + <dt>{{HTTPHeader("Content-DPR")}} {{experimental_inline}}</dt> + <dd>A number that indicates the ratio between physical pixels over CSS pixels of the selected image response.</dd> + <dt>{{HTTPHeader("DPR")}} {{experimental_inline}}</dt> + <dd>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 <a href="https://httpwg.org/http-extensions/client-hints.html#CSSVAL"><cite>[CSSVAL]</cite></a>) of the layout viewport (Section 9.1.1 of <a href="https://httpwg.org/http-extensions/client-hints.html#CSS2"><cite>[CSS2]</cite></a>) on the device.</dd> + <dt>{{HTTPHeader("Device-Memory")}} {{experimental_inline}}</dt> + <dd>Technically a part of Device Memory API, this header represents an approximate amount of RAM client has.</dd> + <dt>{{HTTPHeader("Save-Data")}} {{experimental_inline}}</dt> + <dd>A boolean that indicates the user agent's preference for reduced data usage.</dd> + <dt>{{HTTPHeader("Viewport-Width")}} {{experimental_inline}}</dt> + <dd> + <div id="rfc.section.3.3.p.1"> + <p>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).</p> + </div> + + <div id="rfc.section.3.3.p.2"> + <p>If <code>Viewport-Width</code> occurs in a message more than once, the last value overrides all previous occurrences.</p> + </div> + </dd> + <dt>{{HTTPHeader("Width")}} {{experimental_inline}}</dt> + <dd> + <div id="rfc.section.3.2.p.1"> + <p>The <code>Width</code> 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).</p> + </div> + + <div id="rfc.section.3.2.p.2"> + <p>If the desired resource width is not known at the time of the request or the resource does not have a display width, the <code>Width</code> header field can be omitted. If <code>Width</code> occurs in a message more than once, the last value overrides all previous occurrences</p> + </div> + </dd> +</dl> + +<h2 id="Conditionals">Conditionals</h2> + +<dl> + <dt>{{HTTPHeader("Last-Modified")}}</dt> + <dd>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.</dd> + <dt>{{HTTPHeader("ETag")}}</dt> + <dd>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.</dd> + <dt>{{HTTPHeader("If-Match")}}</dt> + <dd>Makes the request conditional, and applies the method only if the stored resource matches one of the given ETags.</dd> + <dt>{{HTTPHeader("If-None-Match")}}</dt> + <dd>Makes the request conditional, and applies the method only if the stored resource <em>doesn't</em> 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.</dd> + <dt>{{HTTPHeader("If-Modified-Since")}}</dt> + <dd>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.</dd> + <dt>{{HTTPHeader("If-Unmodified-Since")}}</dt> + <dd>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.</dd> + <dt>{{HTTPHeader("Vary")}}</dt> + <dd>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.</dd> +</dl> + +<h2 id="Connection_management">Connection management</h2> + +<dl> + <dt>{{HTTPHeader("Connection")}}</dt> + <dd>Controls whether the network connection stays open after the current transaction finishes.</dd> + <dt>{{HTTPHeader("Keep-Alive")}}</dt> + <dd>Controls how long a persistent connection should stay open.</dd> +</dl> + +<h2 id="Content_negotiation"><a href="/en-US/docs/Web/HTTP/Content_negotiation">Content negotiation</a></h2> + +<dl> + <dt>{{HTTPHeader("Accept")}}</dt> + <dd>Informs the server about the <a href="/en-US/docs/Glossary/MIME_type">types</a> of data that can be sent back.</dd> + <dt>{{HTTPHeader("Accept-Charset")}}</dt> + <dd>Which <a href="/en-US/docs/Glossary/character_encoding">character encodings</a> the client understands.</dd> + <dt>{{HTTPHeader("Accept-Encoding")}}</dt> + <dd>The encoding algorithm, usually a <a href="/en-US/docs/Web/HTTP/Compression">compression algorithm</a>, that can be used on the resource sent back.</dd> + <dt>{{HTTPHeader("Accept-Language")}}</dt> + <dd>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).</dd> +</dl> + +<h2 id="Controls">Controls</h2> + +<dl> + <dt>{{HTTPHeader("Expect")}}</dt> + <dd>Indicates expectations that need to be fulfilled by the server to properly handle the request.</dd> + <dt>{{HTTPHeader("Max-Forwards")}}</dt> +</dl> + +<h2 id="Cookies">Cookies</h2> + +<dl> + <dt>{{HTTPHeader("Cookie")}}</dt> + <dd>Contains stored <a href="/en-US/docs/Web/HTTP/Cookies">HTTP cookies</a> previously sent by the server with the {{HTTPHeader("Set-Cookie")}} header.</dd> + <dt>{{HTTPHeader("Set-Cookie")}}</dt> + <dd>Send cookies from the server to the user-agent.</dd> + <dt>{{HTTPHeader("Cookie2")}} {{obsolete_inline}}</dt> + <dd>Contains an HTTP cookie previously sent by the server with the {{HTTPHeader("Set-Cookie2")}} header, but has been <strong>obsoleted</strong>. Use {{HTTPHeader("Cookie")}} instead.</dd> + <dt>{{HTTPHeader("Set-Cookie2")}} {{obsolete_inline}}</dt> + <dd>Sends cookies from the server to the user-agent, but has been <strong>obsoleted</strong>. Use {{HTTPHeader("Set-Cookie")}} instead.</dd> +</dl> + +<h2 id="CORS">CORS</h2> + +<p><em>Learn more about CORS <a href="CORS">here</a>.</em></p> + +<dl> + <dt>{{HTTPHeader("Access-Control-Allow-Origin")}}</dt> + <dd>Indicates whether the response can be shared.</dd> + <dt>{{HTTPHeader("Access-Control-Allow-Credentials")}}</dt> + <dd>Indicates whether the response to the request can be exposed when the credentials flag is true.</dd> + <dt>{{HTTPHeader("Access-Control-Allow-Headers")}}</dt> + <dd>Used in response to a <a href="/en-US/docs/Glossary/Preflight_request">preflight request</a> to indicate which HTTP headers can be used when making the actual request.</dd> + <dt>{{HTTPHeader("Access-Control-Allow-Methods")}}</dt> + <dd>Specifies the methods allowed when accessing the resource in response to a preflight request.</dd> + <dt>{{HTTPHeader("Access-Control-Expose-Headers")}}</dt> + <dd>Indicates which headers can be exposed as part of the response by listing their names.</dd> + <dt>{{HTTPHeader("Access-Control-Max-Age")}}</dt> + <dd>Indicates how long the results of a preflight request can be cached.</dd> + <dt>{{HTTPHeader("Access-Control-Request-Headers")}}</dt> + <dd>Used when issuing a preflight request to let the server know which HTTP headers will be used when the actual request is made.</dd> + <dt>{{HTTPHeader("Access-Control-Request-Method")}}</dt> + <dd>Used when issuing a preflight request to let the server know which <a href="/en-US/docs/Web/HTTP/Methods">HTTP method</a> will be used when the actual request is made.</dd> + <dt>{{HTTPHeader("Origin")}}</dt> + <dd>Indicates where a fetch originates from.</dd> + <dt>{{HTTPHeader("Service-Worker-Allowed")}}</dt> + <dd>Used to remove the <a href="https://w3c.github.io/ServiceWorker/#path-restriction">path restriction</a> by including this header <a href="https://w3c.github.io/ServiceWorker/#service-worker-script-response">in the response of the Service Worker script</a>.</dd> + <dt>{{HTTPHeader("Timing-Allow-Origin")}}</dt> + <dd>Specifies origins that are allowed to see values of attributes retrieved via features of the <a href="/en-US/docs/Web/API/Resource_Timing_API">Resource Timing API</a>, which would otherwise be reported as zero due to cross-origin restrictions.</dd> + <dt>{{HTTPHeader("X-Permitted-Cross-Domain-Policies")}}</dt> + <dd>Specifies if a cross-domain policy file (<code>crossdomain.xml</code>) 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 <a href="/en-US/docs/Web/Security/Same-origin_policy">Same-Origin Policy</a>. See the <a href="https://www.adobe.com/devnet/articles/crossdomain_policy_file_spec.html">Cross-domain Policy File Specification</a> for more information.</dd> +</dl> + +<h2 id="Do_Not_Track">Do Not Track</h2> + +<dl> + <dt>{{HTTPHeader("DNT")}}</dt> + <dd>Expresses the user's tracking preference.</dd> + <dt>{{HTTPHeader("Tk")}}</dt> + <dd>Indicates the tracking status of the corresponding response.</dd> +</dl> + +<h2 id="Downloads">Downloads</h2> + +<dl> + <dt>{{HTTPHeader("Content-Disposition")}}</dt> + <dd>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.</dd> +</dl> + +<h2 id="Message_body_information">Message body information</h2> + +<dl> + <dt>{{HTTPHeader("Content-Length")}}</dt> + <dd>The size of the resource, in decimal number of bytes.</dd> + <dt>{{HTTPHeader("Content-Type")}}</dt> + <dd>Indicates the media type of the resource.</dd> + <dt>{{HTTPHeader("Content-Encoding")}}</dt> + <dd>Used to specify the compression algorithm.</dd> + <dt>{{HTTPHeader("Content-Language")}}</dt> + <dd>Describes the human language(s) intended for the audience, so that it allows a user to differentiate according to the users' own preferred language.</dd> + <dt>{{HTTPHeader("Content-Location")}}</dt> + <dd>Indicates an alternate location for the returned data.</dd> +</dl> + +<h2 id="Proxies">Proxies</h2> + +<dl> + <dt>{{HTTPHeader("Forwarded")}}</dt> + <dd>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.</dd> + <dt>{{HTTPHeader("X-Forwarded-For")}} {{non-standard_inline}}</dt> + <dd>Identifies the originating IP addresses of a client connecting to a web server through an HTTP proxy or a load balancer.</dd> + <dt>{{HTTPHeader("X-Forwarded-Host")}} {{non-standard_inline}}</dt> + <dd>Identifies the original host requested that a client used to connect to your proxy or load balancer.</dd> + <dt>{{HTTPHeader("X-Forwarded-Proto")}} {{non-standard_inline}}</dt> + <dd>Identifies the protocol (HTTP or HTTPS) that a client used to connect to your proxy or load balancer.</dd> + <dt>{{HTTPHeader("Via")}}</dt> + <dd>Added by proxies, both forward and reverse proxies, and can appear in the request headers and the response headers.</dd> +</dl> + +<h2 id="Redirects">Redirects</h2> + +<dl> + <dt>{{HTTPHeader("Location")}}</dt> + <dd>Indicates the URL to redirect a page to.</dd> +</dl> + +<h2 id="Request_context">Request context</h2> + +<dl> + <dt>{{HTTPHeader("From")}}</dt> + <dd>Contains an Internet email address for a human user who controls the requesting user agent.</dd> + <dt>{{HTTPHeader("Host")}}</dt> + <dd>Specifies the domain name of the server (for virtual hosting), and (optionally) the TCP port number on which the server is listening.</dd> + <dt>{{HTTPHeader("Referer")}}</dt> + <dd>The address of the previous web page from which a link to the currently requested page was followed.</dd> + <dt>{{HTTPHeader("Referrer-Policy")}}</dt> + <dd>Governs which referrer information sent in the {{HTTPHeader("Referer")}} header should be included with requests made.</dd> + <dt>{{HTTPHeader("User-Agent")}}</dt> + <dd>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 <a href="/en-US/docs/Web/HTTP/Headers/User-Agent/Firefox">Firefox user agent string reference</a>.</dd> +</dl> + +<h2 id="Response_context">Response context</h2> + +<dl> + <dt>{{HTTPHeader("Allow")}}</dt> + <dd>Lists the set of HTTP request methods support by a resource.</dd> + <dt>{{HTTPHeader("Server")}}</dt> + <dd>Contains information about the software used by the origin server to handle the request.</dd> +</dl> + +<h2 id="Range_requests">Range requests</h2> + +<dl> + <dt>{{HTTPHeader("Accept-Ranges")}}</dt> + <dd>Indicates if the server supports range requests, and if so in which unit the range can be expressed.</dd> + <dt>{{HTTPHeader("Range")}}</dt> + <dd>Indicates the part of a document that the server should return.</dd> + <dt>{{HTTPHeader("If-Range")}}</dt> + <dd>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.</dd> + <dt>{{HTTPHeader("Content-Range")}}</dt> + <dd>Indicates where in a full body message a partial message belongs.</dd> +</dl> + +<h2 id="Security">Security</h2> + +<dl> + <dt>{{HTTPHeader("Cross-Origin-Opener-Policy")}} ({{Glossary("COOP")}})</dt> + <dd>Prevents other domains from opening/controlling a window.</dd> + <dt>{{HTTPHeader("Cross-Origin-Resource-Policy")}} ({{Glossary("CORP")}})</dt> + <dd>Prevents other domains from reading the response of the resources to which this header is applied.</dd> + <dt>{{HTTPHeader("Content-Security-Policy")}} ({{Glossary("CSP")}})</dt> + <dd>Controls resources the user agent is allowed to load for a given page.</dd> + <dt>{{HTTPHeader("Content-Security-Policy-Report-Only")}}</dt> + <dd>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 <code>POST</code> request to the specified URI.</dd> + <dt>{{HTTPHeader("Expect-CT")}}</dt> + <dd>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.</dd> + <dt>{{HTTPHeader("Feature-Policy")}}</dt> + <dd>Provides a mechanism to allow and deny the use of browser features in its own frame, and in iframes that it embeds.</dd> + <dt>{{HTTPHeader("Public-Key-Pins")}} ({{Glossary("HPKP")}})</dt> + <dd>Associates a specific cryptographic public key with a certain web server to decrease the risk of {{Glossary("MITM")}} attacks with forged certificates.</dd> + <dt>{{HTTPHeader("Public-Key-Pins-Report-Only")}}</dt> + <dd>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.</dd> + <dt>{{HTTPHeader("Strict-Transport-Security")}} ({{Glossary("HSTS")}})</dt> + <dd>Force communication using HTTPS instead of HTTP.</dd> + <dt>{{HTTPHeader("Upgrade-Insecure-Requests")}}</dt> + <dd>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.</dd> + <dt>{{HTTPHeader("X-Content-Type-Options")}}</dt> + <dd>Disables MIME sniffing and forces browser to use the type given in {{HTTPHeader("Content-Type")}}.</dd> + <dt>{{HTTPHeader("X-Download-Options")}}</dt> + <dd>The <code><a href="https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/jj542450(v=vs.85)?#the-noopen-directive">X-Download-Options</a></code> 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 <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/18488178/">MS Edge bug</a>).</dd> + <dt>{{HTTPHeader("X-Frame-Options")}} (XFO)</dt> + <dd>Indicates whether a browser should be allowed to render a page in a {{HTMLElement("frame")}}, {{HTMLElement("iframe")}}, {{HTMLElement("embed")}} or {{HTMLElement("object")}}.</dd> + <dt>{{HTTPHeader("X-Powered-By")}}</dt> + <dd>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.</dd> + <dt>{{HTTPHeader("X-XSS-Protection")}}</dt> + <dd>Enables cross-site scripting filtering.</dd> +</dl> + +<h2 id="Server-sent_events">Server-sent events</h2> + +<dl> + <dt>{{HTTPHeader("Last-Event-ID")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("NEL")}} {{experimental_inline}}</dt> + <dd>Defines a mechanism that enables developers to declare a network error reporting policy.</dd> + <dt>{{HTTPHeader("Ping-From")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Ping-To")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Report-To")}}</dt> + <dd>Used to specify a server endpoint for the browser to send warning and error reports to.</dd> +</dl> + +<h2 id="Transfer_coding">Transfer coding</h2> + +<dl> + <dt>{{HTTPHeader("Transfer-Encoding")}}</dt> + <dd>Specifies the form of encoding used to safely transfer the entity to the user.</dd> + <dt>{{HTTPHeader("TE")}}</dt> + <dd>Specifies the transfer encodings the user agent is willing to accept.</dd> + <dt>{{HTTPHeader("Trailer")}}</dt> + <dd>Allows the sender to include additional fields at the end of chunked message.</dd> +</dl> + +<h2 id="WebSockets">WebSockets</h2> + +<dl> + <dt>{{HTTPHeader("Sec-WebSocket-Key")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Sec-WebSocket-Extensions")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Sec-WebSocket-Accept")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Sec-WebSocket-Protocol")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Sec-WebSocket-Version")}}</dt> + <dd>...</dd> +</dl> + +<h2 id="Other">Other</h2> + +<dl> + <dt>{{HTTPHeader("Accept-Push-Policy")}} {{experimental_inline}}</dt> + <dd>A client can express the desired push policy for a request by sending an <code><a href="https://tools.ietf.org/html/draft-ruellan-http-accept-push-policy-00#section-3.1">Accept-Push-Policy</a></code> header field in the request.</dd> + <dt>{{HTTPHeader("Accept-Signature")}} {{experimental_inline}}</dt> + <dd>A client can send the <code><a href="https://wicg.github.io/webpackage/draft-yasskin-http-origin-signed-responses.html#rfc.section.3.7">Accept-Signature</a></code> header field to indicate intention to take advantage of any available signatures and to indicate what kinds of signatures it supports.</dd> + <dt>{{HTTPHeader("Alt-Svc")}}</dt> + <dd>Used to list alternate ways to reach this service.</dd> + <dt>{{HTTPHeader("Date")}}</dt> + <dd>Contains the date and time at which the message was originated.</dd> + <dt>{{HTTPHeader("Large-Allocation")}}</dt> + <dd>Tells the browser that the page being loaded is going to want to perform a large allocation.</dd> + <dt>{{HTTPHeader("Link")}}</dt> + <dd>The <code><a href="https://tools.ietf.org/html/rfc5988#section-5">Link</a></code> 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.</dd> + <dt>{{HTTPHeader("Push-Policy")}} {{experimental_inline}}</dt> + <dd>A <code><a href="https://tools.ietf.org/html/draft-ruellan-http-accept-push-policy-00#section-3.2">Push-Policy</a></code> defines the server behaviour regarding push when processing a request.</dd> + <dt>{{HTTPHeader("Retry-After")}}</dt> + <dd>Indicates how long the user agent should wait before making a follow-up request.</dd> + <dt>{{HTTPHeader("Signature")}} {{experimental_inline}}</dt> + <dd>The <code><a href="https://wicg.github.io/webpackage/draft-yasskin-http-origin-signed-responses.html#rfc.section.3.1">Signature</a></code> 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.</dd> + <dt>{{HTTPHeader("Signed-Headers")}} {{experimental_inline}}</dt> + <dd>The <code><a href="https://wicg.github.io/webpackage/draft-yasskin-http-origin-signed-responses.html#rfc.section.5.1.2">Signed-Headers</a></code> header field identifies an ordered list of response header fields to include in a signature.</dd> + <dt>{{HTTPHeader("Server-Timing")}}</dt> + <dd>Communicates one or more metrics and descriptions for the given request-response cycle.</dd> + <dt>{{HTTPHeader("SourceMap")}}</dt> + <dd>Links generated code to a <a href="/en-US/docs/Tools/Debugger/How_to/Use_a_source_map">source map</a>.</dd> + <dt>{{HTTPHeader("Upgrade")}}</dt> + <dd>The relevant RFC document for the <a href="https://tools.ietf.org/html/rfc7230#section-6.7">Upgrade header field is RFC 7230, section 6.7</a>. 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 <a href="https://tools.ietf.org/html/rfc7230#section-6.1">please see section 6.1 of the aforementioned RFC</a>.</dd> + <dt>{{HTTPHeader("X-DNS-Prefetch-Control")}}</dt> + <dd>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.</dd> + <dt>{{HTTPHeader("X-Firefox-Spdy")}} {{deprecated_inline}} {{non-standard_inline}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("X-Pingback")}} {{non-standard_inline}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("X-Requested-With")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("X-Robots-Tag")}}{{non-standard_inline}}</dt> + <dd>The <code><a href="https://developers.google.com/search/reference/robots_meta_tag#xrobotstag">X-Robots-Tag</a></code> 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 <code><meta name="robots" content="..."></code>.</dd> + <dt>{{HTTPHeader("X-UA-Compatible")}} {{non-standard_inline}}</dt> + <dd>Used by Internet Explorer to signal which document mode to use.</dd> +</dl> + +<h2 id="Contributing">Contributing</h2> + +<p>You can help by <a href="/en-US/docs/MDN/Contribute/Howto/Document_an_HTTP_header">writing new entries</a> or improving the existing ones.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://en.wikipedia.org/wiki/List_of_HTTP_header_fields">Wikipedia page on List of HTTP headers</a></li> + <li><a href="https://www.iana.org/assignments/message-headers/perm-headers.html">IANA registry</a></li> + <li><a href="https://httpwg.org/specs/">HTTP Working Group</a></li> +</ul> 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 +--- +<div>{{HTTPSidebar}}</div> + +<p class="summary" dir="rtl">ہائپر ٹیکسٹ ٹرانسفر پروٹوکول (ایچ ٹی ٹی پی) ہائپرمیڈیا دستاویزات ، جیسے ایچ ٹی ایم ایل کو منتقل کرنے کے لئے ایپلیکیشن لیئر پروٹوکول ہے۔</p> + +<p class="summary" dir="rtl"><strong>بروتوكول نقل النص التشعبي</strong><strong> </strong>(Hypertext Transfer Protocol)<strong> </strong>هو عبارة عن ميثاق (protocol) في طبقة التطبيقات (<a href="https://en.wikipedia.org/wiki/Application_Layer">application-layer</a>) مهمّته نقل مستندات الوسائط الفائقة، مثل وثائق لغة ترميز النص الفائق. صُمّمَ هذا الميثاق للتواصل فيما بين متصفّحات الويب، وخوادم الويب، لكن أيضاً يُمكن استخدامه لأغراضٍ أُخرى. يَتبِع الميثاق ما يُعرف <a href="https://ar.wikipedia.org/wiki/%D9%86%D9%85%D9%88%D8%B0%D8%AC_%D8%B7%D9%84%D8%A8_%D8%A7%D9%84%D8%AE%D8%AF%D9%85%D8%A9">بنموذج العميل/الخادم</a> (client-server model)، حيث يقوم بإرسال طلب (request)، ومن ثم ينتظر ليتلقّى الإجابة (response) على هذا الطلب. بروتوكول نقل النص التشعبي <a href="https://ar.wikipedia.org/wiki/%D8%A8%D8%B1%D9%88%D8%AA%D9%88%D9%83%D9%88%D9%84_%D8%B9%D8%AF%D9%8A%D9%85_%D8%A7%D9%84%D8%AD%D8%A7%D9%84%D8%A9">عديم الحالة</a> (stateless protocol) هذا يعني أنَّ الخادم لن يحتفظ بأيّ بيانات (حالة) بين الطلبين. بالرغم من أنَّ هذا الميثاق مبني على طبقة TCP/IP إلّا أنّه يمكن استخدامه على أي<a href="https://ar.wikipedia.org/wiki/%D8%B7%D8%A8%D9%82%D8%A9_%D8%A7%D9%84%D9%86%D9%82%D9%84"> طبقة نقل</a> موثوقة؛ أي مثياق لا يفقد الرسائل بصمت كما يفعل مثياق UDP.</p> + +<div class="column-container"> +<div class="column-half"> +<h2 dir="rtl" id="دروس">دروس</h2> + +<p dir="rtl">تعلم استخدام HTTP مع الدورات والدروس الإرشاديّة التالية.</p> + +<dl> + <dt dir="rtl"><a href="/ar/docs/Web/HTTP/Overview">لمحة عن HTTP</a></dt> + <dd dir="rtl">الميزات الأساسيّة لميثاق طرفي العميل والخادم (client-server protocole): ماذا يُمكِن أن يفعل، وما استخداماته.</dd> + <dt dir="rtl"><a href="/ar/docs/Web/HTTP/Caching">ذاكرة التخزين المؤقت ل HTTP</a></dt> + <dd dir="rtl">تقنيّة التخزين المؤقت مهمة جداً لصفحات ويب أسرع. تشرح هذه المقالة الفرق بين طرق الخزين المؤقت، وكيفيّة استخدام ترويسات (headers) الميثاق للتحكم بها.</dd> + <dt dir="rtl"><a href="/ar/docs/Web/HTTP/Cookies">كعكات HTTP</a></dt> + <dd dir="rtl">آلية عمل الكعكات (ملفات تعريف الإرتباط) مشروحة في <a href="http://tools.ietf.org/html/rfc6265">هذا المقال</a>. عندما يتعامل الميثاق مع طلب، يُمكِن للخادم إرسالة الترويسة <code>Set-Cookie</code> مع الرد. ثم يقوم العميل بإعادة قيمة الكعكة مع كل طلب لنفس الخادم باستخدام الترويسة <code>Cookie</code>. يُمكِن أن تُضبَط الكعكات أيضاً لتنتهي صلاحيتها في تاريخ معين، أو لِتُحصَر فعاليتها في نطاق ومسار معين.</dd> +</dl> + +<dl> + <dt dir="rtl"><a href="/ar/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP">تطور HTTP</a></dt> + <dd dir="rtl">وصف موجز للتغيّرات التي طرأت منذ الإصدارات الأولى من الميثاق، إلى الإصدارات الحديثة (الإصدار HTTP/2 وما بعده).</dd> + <dt dir="rtl"><a href="https://wiki.mozilla.org/Security/Guidelines/Web_Security">إرشادات أمان الويب من موزيلا</a></dt> + <dd dir="rtl">مجموعة من النصائح لتساعد المطورين على بناء تطبيقات ويب آمنة.</dd> +</dl> + +<dl> + <dt dir="rtl"><a href="/ar/docs/Web/HTTP/Messages">رسائل ميثاق نقل النص الفائق</a></dt> + <dd dir="rtl">تشرح المقالة نوع وبنيّة أنواع الرسائل المختلفة في الإصدار الأول والثاني من الميثاق.</dd> + <dt dir="rtl"><a href="/ar/docs/Web/HTTP/Session">طريقة عمل جلسة ميثاق نقل النص الفائق النموذجيّة</a></dt> + <dd dir="rtl">تُظهِر المقالة وتشرح الكيفيّة التي تجري فيها جلسة الميثاق الإعتياديّة.</dd> + <dt dir="rtl"><a href="/ar/docs/Web/HTTP/Connection_management_in_HTTP_1.x">إدارة الإتصال في الإصدار الأول من الميثاق</a></dt> + <dd dir="rtl">تشرح المقالة نماذج إدارة الإتصال الثلاثة المتوفرة في الإصدار الأول، مغطيةً نقاط قوتهم وضعفهم.</dd> +</dl> +</div> + +<div class="column-half"> +<h2 dir="rtl" id="مراجع">مراجع</h2> + +<p dir="rtl">تصفَّح وثائق بروتوكول نقل النص التشعبي المرجعيَّة المُفصَّلة.</p> + +<dl> + <dt dir="rtl"><a href="/ar/docs/Web/HTTP/Headers">ترويسات لغة ترميز النص الفائق</a></dt> + <dd dir="rtl">تُستخدم رسائل ترويسات الميثاق لوصف مورد، أو سلوك الخادم أو العميل. يمكن إضافة ترويسات مخصصة بواسطة البادِئة <code>-X</code>، الترويسات الأخرى مُعرفة في <a href="http://www.iana.org/assignments/message-headers/perm-headers.html">سجل IANA</a>، والتي عُرِفَ محتواهاً بالأصل في <a href="http://tools.ietf.org/html/rfc4229">RFC 4229</a>. تعمل IANA أيضاً على إدارة <a href="http://www.iana.org/assignments/message-headers/prov-headers.html">سجل رسائل الترويسات الجديدة المُقترحة</a>.</dd> + <dt dir="rtl"><a href="/ar/docs/Web/HTTP/Methods">طرق الطلب في ميثاق نقل النص الفائق</a></dt> + <dd dir="rtl">العمليات المُختلفة التي يُمكِن أن تتم بواسطة الميثاق: {{HTTPMethod("GET")}}، {{HTTPMethod("POST")}}، ويوجد أيضاً طلبات أقل شيوعاً مثل {{HTTPMethod("OPTIONS")}}، {{HTTPMethod("DELETE")}}، أو {{HTTPMethod("TRACE")}}.</dd> + <dt dir="rtl"><a href="/ar/docs/Web/HTTP/Response_codes">رموز الحالة</a></dt> + <dd dir="rtl">تشير رموز الحالة إلى ما إذا كان طلب معين قد تمَّ بنجاح. رموز الاستجابة مجموعة في خمس فئات: استجابة معلوماتية، استجابة ناجحة، إعادة توجيه، خطأ من جهة العميل، خطأ من جهة الخادم.</dd> +</dl> + +<h2 dir="rtl" id="أدوات_وموارد">أدوات وموارد</h2> + +<p dir="rtl">أدوات وموارد مفيدة لفهم وتنقيح عمل HTTP.</p> + +<dl> + <dt dir="rtl"><a href="/ar/docs/Tools">أدوات مطورين فايرفوكس</a></dt> + <dd dir="rtl"><a href="/ar/docs/Tools/Network_Monitor">مُراقب الشبكة</a></dd> + <dt dir="rtl"><a href="https://observatory.mozilla.org/">مرقب موزيلا</a> (Mozilla Observatory)</dt> + <dd dir="rtl">مشروع صُمِمَ ليساعد المطورين، مدراء النظام، والمختصين في الحماية على إعداد مواقعهم بشكل آمن.</dd> + <dt dir="rtl"><a class="external" href="https://redbot.org/">أداة RedBot</a></dt> + <dd dir="rtl">أداة تساعد على التحقق من الترويسات المتعلقة بالتخزين المؤقت.</dd> + <dt dir="rtl"><a href="http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/">كيف تعمل المتصفحات</a></dt> + <dd dir="rtl">مقالة شاملة عن الأجزاء الداخليّة للمتصفحات وتدفق الطلبات في ميثاق نقل النص الفائق. على كل مطوِّر ويب أن يكون على دراية بمعلومات هذه المقالة.</dd> +</dl> +</div> +</div> + +<div id="eJOY__extension_root"></div> 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 +--- +<div>بروتكول ال HTTP هو {{Glossary("protocol")}} يسمح بجلب الموارد, مثل مستندات HTML. انه الأساس لتبادل أي بيانات على الويب بالأضافة من أنه يعمل كبروتوكول خادم-عميل, والذي يعني من أن الطلبات تبدأ من قبل العميل نفسه باستخدام المتصفح. يتم إعادة بناء المستند الكامل من مختلف الملفات الفرعية المجلوبة. على سبيل المثال, النص و و صف التنسيق و الصور و مقاطع الفيديو و الملفات النصية و الكثير... </div> + +<p><img alt="A Web document is the composition of different resources" src="https://mdn.mozillademos.org/files/13677/Fetching_a_page.png" style="height: 319px; width: 545px;"></p> + +<p>العملاء و الخادم يتواصلون من خلال تبادل الرسائل الفردية (على عكس تدفق البيانات). يتم إرسال الرسائل من العميل نفسه, باستخدام متصفح الإنترنت على سبيل المثال, و يتم استدعاء البيانات التي تم ارسالها الى الخادم كجواب عن تلك الرسائل التي ارسلت من العميل.</p> + +<p><img alt="HTTP as an application layer protocol, on top of TCP (transport layer) and IP (network layer) and below the presentation layer." src="https://mdn.mozillademos.org/files/13673/HTTP%20&%20layers.png" style="float: left; height: 299px; padding-bottom: 15px; padding-right: 20px; width: 418px;">تم تصميم HTTP في أوائل التسعينيات ، وهو بروتوكول قابل للتوسيع تطور بمرور الوقت. إنه بروتوكول يعمل من خلال طبقة التطبيقات يتم إرساله عبر {{Glossary("TCP")}}, ، أو عبر اتصال TCP مشفر بواسطة {{Glossary("TLS")}}- ، على الرغم من أنه يمكن نظريًا استخدام أي بروتوكول نقل موثوق. نظرًا لقابليته للتوسعة ، فإنه لا يستخدم فقط لجلب مستندات النص التشعبي ، ولكن أيضًا الصور ومقاطع الفيديو أو لنشر المحتوى على الخوادم ، كما هو الحال مع نتائج نماذج HTML. يمكن أيضًا استخدام HTTP لجلب أجزاء من المستندات لتحديث صفحات الويب عند الطلب.</p> + +<h2 id="مكونات_الأنظمة_المستندة_إلى_الأنظمةHTTP"> مكونات الأنظمة المستندة إلى الأنظمةHTTP</h2> + +<p>HTTP هو بروتوكول خادم عميل: يتم إرسال الطلبات بواسطة كيان واحد أو وكيل المستخدم (أو وكيل نيابة عنه). في معظم الأحيان يكون وكيل المستخدم مستعرض ويب ، ولكن يمكن أن يكون أي شيء ، على سبيل المثال روبوت يزحف إلى الويب لملء فهرس محرك البحث والحفاظ عليه.</p> + +<p>يتم إرسال كل طلب فردي إلى الخادم الذي يتعامل معه ويقدم إجابة تسمى الاستجابة. بين العميل والخادم ، هناك العديد من الكيانات ، التي تسمى مجتمعة {{Glossary("Proxy_server", "proxies")}} ، والتي تؤدي عمليات مختلفة وتعمل كبوابات أو {{Glossary("Cache", "caches")}} ، على سبيل المثال.</p> + +<p><img alt="Client server chain" src="https://mdn.mozillademos.org/files/13679/Client-server-chain.png"></p> + +<p>في الحقيقة, هناك العديد من أجهزة الكمبيوتر بين المتصفح وبين الخادم الذي يعمل على معالجة الطلبات: هناك الراوترز, المودمز, و الكثير. شكرا لمصمم طبقات شبكات الويب, هذه مخفية في طبقات الشبكة والنقل. HTTP في القمة, عند طبقة التطبيقات. على الرغم من أهمية تشخيص مشاكل الشبكة ، إلا أن الطبقات الأساسية لا علاقة لها في الغالب بوصف HTTP.</p> + +<h3 id="العميل_وكيل_المستخدم">العميل: وكيل المستخدم</h3> + +<p>وكيل المستخدم هو أي أداة تعمل نيابة عن المستخدم. يتم تنفيذ هذا الدور بشكل أساسي بواسطة مستعرض الويب; الاحتمالات الأخرى هي البرامج التي يستخدمها المهندسون ومطورو الويب لتصحيح أخطاء تطبيقاتهم.</p> + +<p>المستعرض هو دائمًا الكيان الذي يبدأ الطلب. إنه ليس الخادم أبدًا (على الرغم من إضافة بعض الآليات على مر السنين لمحاكاة الرسائل التي يبدأها الخادم).</p> + +<p>لتقديم صفحة ويب ، يرسل المستعرض طلبًا أصليًا لجلب مستند HTML الذي يمثل الصفحة. يقوم بعد ذلك بتحليل هذا الملف ، وتقديم طلبات إضافية تتوافق مع البرامج النصية للتنفيذ ، ومعلومات التخطيط (CSS) لعرضها ، والموارد الفرعية الموجودة في الصفحة (عادةً الصور ومقاطع الفيديو). يقوم مستعرض الويب بعد ذلك بمزج هذه الموارد ليقدم للمستخدم مستندًا كاملاً ، صفحة الويب. يمكن للنصوص التي ينفذها المتصفح جلب المزيد من الموارد في مراحل لاحقة ويقوم المتصفح بتحديث صفحة الويب وفقًا لذلك.</p> + +<p>صفحة الويب هي مستند نص تشعبي. هذا يعني أن بعض أجزاء النص المعروض عبارة عن روابط يمكن تنشيطها (عادةً بنقرة الماوس) لجلب صفحة ويب جديدة ، مما يسمح للمستخدم بتوجيه وكيل المستخدم الخاص به والتنقل عبر الويب. يترجم المستعرض هذه الاتجاهات في طلبات HTTP ، ويفسر استجابات HTTP بشكل أكبر لتقديم استجابة واضحة للمستخدم</p> + +<h3 id="The_Web_server">The Web server</h3> + +<p>على الجانب الآخر من قناة الاتصال ، يوجد الخادم ، الذي يخدم المستند حسب طلب العميل. يظهر الخادم كجهاز واحد فقط افتراضيًا: هذا لأنه قد يكون في الواقع مجموعة من الخوادم ، أو مشاركة الحمل (موازنة التحميل) أو قطعة معقدة من البرامج تستجوب أجهزة الكمبيوتر الأخرى (مثل ذاكرة التخزين المؤقت ، أو خادم قاعدة البيانات ، أو التجارة الإلكترونية الخوادم) ، لإنشاء المستند كليًا أو جزئيًا عند الطلب.</p> + +<p>ليس بالضرورة أن يكون الخادم جهازًا واحدًا ، ولكن يمكن استضافة العديد من مثيلات برنامج الخادم على نفس الجهاز. باستخدام HTTP / 1.1 ورأس {{HTTPHeader ("Host")}} ، يمكنهم أيضًا مشاركة عنوان IP نفسه.</p> + +<h3 id="Proxies">Proxies</h3> + +<p><img alt="HTTP as an application layer protocol, on top of TCP (transport layer) and IP (network layer) and below the presentation layer." src="https://blogs.bmc.com/wp-content/uploads/2018/06/osi-model-7-layers-1024x734.jpg" style="float: left; height: 400px; width: 400px;">بين متصفح الويب والخادم ، تقوم العديد من أجهزة الكمبيوتر والآلات بنقل رسائل HTTP.. نظرًا للهيكل متعدد الطبقات لمكدس الويب ، يعمل معظمها على مستوى النقل أو الشبكة أو المستوى المادي ، وتصبح شفافة في طبقة HTTP ويحتمل أن يكون لها تأثير كبير على الأداء<span>. </span>تسمى تلك التي تعمل في طبقات التطبيق عمومًا الوكلاء(<strong>proxies)</strong><span>. </span>يمكن أن تكون هذه شفافة ، حيث يتم إعادة توجيه الطلبات التي يتلقونها دون تغييرها بأي شكل من الأشكال ، أو غير شفافة ، وفي هذه الحالة سوف يقومون بتغيير الطلب بطريقة ما قبل تمريره إلى الخادم. قد تؤدي الوكلاء وظائف عديدة<span>:</span></p> + +<ul> + <li>التخزين المؤقت (يمكن أن تكون ذاكرة التخزين المؤقت عامة أو خاصة ، مثل ذاكرة التخزين المؤقت للمتصفح)</li> + <li>التصفية (مثل فحص مكافحة الفيروسات أو المراقبة الأبوية)</li> + <li>موازنة الحمل (للسماح لخوادم متعددة بخدمة الطلبات المختلفة)</li> + <li>المصادقة (للتحكم في الوصول إلى الموارد المختلفة)</li> + <li>التسجيل (السماح بتخزين المعلومات التاريخية)</li> +</ul> + +<h2 id="الجوانب_الأساسية_لـ_HTTP">الجوانب الأساسية لـ HTTP</h2> + +<h3 id="HTTP_بسيط">HTTP بسيط</h3> + +<p>تم تصميم HTTP بشكل عام ليكون بسيطًا وقابل للقراءة البشرية ، حتى مع التعقيد الإضافي المقدم في HTTP / 2 عن طريق تغليف رسائل HTTP في إطارات. يمكن قراءة رسائل HTTP وفهمها من قبل البشر ، مما يوفر اختبارًا أسهل للمطورين ، ويقلل من التعقيد للقادمين الجدد.</p> + +<h3 id="HTTP_قابل_للتوسيع">HTTP قابل للتوسيع</h3> + +<p>المقدمة في, <a href="/en-US/docs/Web/HTTP/Headers">HTTP headers</a> HTTP هذا البروتوكول سهل التوسيع والتجربة. يمكن أيضًا تقديم وظائف جديدة من خلال اتفاقية بسيطة بين العميل والخادم حول دلالات الرأس الجديدة.</p> + +<h3 id="HTTP_عديم_الحالة_،_ولكن_ليس_بدون_جلسات">HTTP عديم الحالة ، ولكن ليس بدون جلسات</h3> + +<p>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.</p> + +<h3 id="HTTP_والاتصالات">HTTP والاتصالات</h3> + +<p>على الرغم من أن HTTP لا يتطلب أن يكون بروتوكول النقل الأساسي قائمًا على الاتصال ؛ فقط تتطلب أن تكون موثوقة ، أو لا تفقد الرسائل (لذلك على الأقل تقديم خطأ). من بين بروتوكولي النقل الأكثر شيوعًا على الإنترنت ، يعتبر TCP موثوقًا و UDP ليس كذلك. لذلك يعتمد HTTP على معيار TCP ، الذي يعتمد على التوصيل.</p> + +<p>قبل أن يتمكن العميل والخادم من تبادل زوج طلب / استجابة HTTP ، يجب عليهم إنشاء اتصال TCP ، وهي عملية تتطلب عدة رحلات ذهابًا وإيابًا. السلوك الافتراضي لـ HTTP / 1.0 هو فتح اتصال TCP منفصل لكل زوج من طلبات / استجابة HTTP. هذا أقل كفاءة من مشاركة اتصال TCP واحد عندما يتم إرسال طلبات متعددة في تتابع قريب.</p> + +<p>من أجل التخفيف من هذا الخلل ، قدم HTTP / 1.1 خطوط الأنابيب (التي ثبت صعوبة تنفيذها) والتوصيلات المستمرة: يمكن التحكم في اتصال TCP الأساسي جزئيًا باستخدام الرأس {{HTTPHeader ("Connection")}}. تقدمت HTTP / 2 خطوة إلى الأمام من خلال تعدد إرسال الرسائل عبر اتصال واحد ، مما يساعد في الحفاظ على الاتصال دافئًا وأكثر كفاءة.</p> + +<p>التجارب جارية لتصميم بروتوكول نقل أفضل أكثر ملاءمة لـ HTTP. على سبيل المثال ، تقوم Google بالتجربة مع <a href="https://en.wikipedia.org/wiki/QUIC">QUIC</a> الذي يعتمد على UDP لتوفير بروتوكول نقل أكثر موثوقية وفعالية.</p> + +<h2 id="ما_يمكن_التحكم_فيه_عن_طريق_HTTP">ما يمكن التحكم فيه عن طريق HTTP</h2> + +<p>هذه الطبيعة القابلة للتوسيع لـ HTTP ، بمرور الوقت ، سمحت بمزيد من التحكم والوظائف على الويب. تم التعامل مع طرق التخزين المؤقت أو المصادقة في وقت مبكر في سجل HTTP. على النقيض من ذلك ، تمت إضافة القدرة على تخفيف قيود الأصل فقط في 2010.</p> + +<p>فيما يلي قائمة بالميزات الشائعة التي يمكن التحكم فيها باستخدام HTTP.</p> + +<ul> + <li><em><a href="/en-US/docs/Web/HTTP/Caching">Caching</a> </em>يمكن التحكم في كيفية تخزين المستندات مؤقتًا بواسطة HTTP. يمكن للخادم توجيه الوكلاء والعملاء ، حول ما يجب تخزينه مؤقتًا ومدة ذلك. يمكن للعميل توجيه وكلاء ذاكرة التخزين المؤقت الوسيطة لتجاهل المستند المخزن.</li> + <li>To <em>Relaxing the origin constraint</em> لمنع التطفل وانتهاكات الخصوصية الأخرى ، تفرض متصفحات الويب الفصل الصارم بين مواقع الويب. يمكن فقط للصفحات من نفس الأصل الوصول إلى كافة المعلومات الخاصة بصفحة الويب. على الرغم من أن هذا القيد يمثل عبئًا على الخادم ، إلا أن رؤوس HTTP يمكن أن تخفف هذا الفصل الصارم على جانب الخادم ، مما يسمح للمستند بأن يصبح خليطًا من المعلومات التي يتم الحصول عليها من مجالات مختلفة ؛ يمكن أن تكون هناك أسباب أمنية للقيام بذلك.</li> + <li><em>Authentication</em><br> + Some pages may be protected so that only specific users can access them. Basic authentication may be provided by HTTP, either using the {{HTTPHeader("WWW-Authenticate")}} and similar headers, or by setting a specific session using <a href="/en-US/docs/Web/HTTP/Cookies">HTTP cookies</a>.</li> + <li><em><a href="/en-US/docs/Web/HTTP/Proxy_servers_and_tunneling">Proxy and tunneling</a></em>غالبًا ما توجد الخوادم أو العملاء على شبكات إنترانت وتخفي عنوان IP الحقيقي الخاص بهم عن أجهزة الكمبيوتر الأخرى. تنتقل طلبات HTTP بعد ذلك عبر الوكلاء لعبور حاجز الشبكة هذا. ليست كل الوكلاء عبارة عن وكلاء HTTP. بروتوكول SOCKS ، على سبيل المثال ، يعمل بمستوى أدنى. البروتوكولات الأخرى ، مثل بروتوكول نقل الملفات ، يمكن التعامل معها بواسطة هذه البروتوكولات.</li> + <li><em>Sessions</em>يتيح لك استخدام ملفات تعريف الارتباط HTTP ربط الطلبات بحالة الخادم. يؤدي هذا إلى إنشاء جلسات ، على الرغم من أن HTTP الأساسي هو بروتوكول بدون حالة. هذا مفيد ليس فقط لسلة التسوق في التجارة الإلكترونية ، ولكن أيضًا لأي موقع يسمح للمستخدم بتكوين المخرجات.</li> +</ul> + +<h2 id="HTTP_flow">HTTP flow</h2> + +<p>When a client wants to communicate with a server, either the final server or an intermediate proxy, it performs the following steps:</p> + +<ol> + <li>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.</li> + <li>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: + <pre class="line-numbers language-html notranslate"><code class="language-html">GET / HTTP/1.1 +Host: developer.mozilla.org +Accept-Language: fr</code></pre> + </li> + <li>Read the response sent by the server, such as: + <pre class="line-numbers language-html notranslate"><code class="language-html">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)</code></pre> + </li> + <li>Close or reuse the connection for further requests.</li> +</ol> + +<p>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.</p> + +<h2 id="HTTP_Messages">HTTP Messages</h2> + +<p>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 <em>frame</em>, 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.</p> + +<p>There are two types of HTTP messages, requests and responses, each with its own format.</p> + +<h3 id="Requests">Requests</h3> + +<p>An example HTTP request:</p> + +<p><img alt="A basic HTTP request" src="https://mdn.mozillademos.org/files/13687/HTTP_Request.png" style="height: 336px; width: 693px;"></p> + +<p>Requests consists of the following elements:</p> + +<ul> + <li>An HTTP <a href="/en-US/docs/Web/HTTP/Methods">method</a>, usually a verb like {{HTTPMethod("GET")}}, {{HTTPMethod("POST")}} or a noun like {{HTTPMethod("OPTIONS")}} or {{HTTPMethod("HEAD")}} that defines the operation the client wants to perform. Typically, a client wants to fetch a resource (using <code>GET</code>) or post the value of an <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML form</a> (using <code>POST</code>), though more operations may be needed in other cases.</li> + <li>The path of the resource to fetch; the URL of the resource stripped from elements that are obvious from the context, for example without the {{Glossary("protocol")}} (<code>http://</code>), the {{Glossary("domain")}} (here, <code>developer.mozilla.org</code>), or the TCP {{Glossary("port")}} (here, <code>80</code>).</li> + <li>The version of the HTTP protocol.</li> + <li>Optional <a href="/en-US/docs/Web/HTTP/Headers">headers</a> that convey additional information for the servers.</li> + <li>Or a body, for some methods like <code>POST</code>, similar to those in responses, which contain the resource sent.</li> +</ul> + +<h3 id="Responses">Responses</h3> + +<p>An example response:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13691/HTTP_Response.png" style="height: 494px; width: 758px;"></p> + +<p>Responses consist of the following elements:</p> + +<ul> + <li>The version of the HTTP protocol they follow.</li> + <li>A <a href="/en-US/docs/Web/HTTP/Status">status code</a>, indicating if the request was successful, or not, and why.</li> + <li>A status message, a non-authoritative short description of the status code.</li> + <li>HTTP <a href="/en-US/docs/Web/HTTP/Headers">headers</a>, like those for requests.</li> + <li>Optionally, a body containing the fetched resource.</li> +</ul> + +<h2 id="APIs_based_on_HTTP">APIs based on HTTP</h2> + +<p>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.</p> + +<p>Another API, <a href="/en-US/docs/Web/API/Server-sent_events">server-sent events</a>, 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.</p> + +<h2 id="Conclusion">Conclusion</h2> + +<p>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.</p> + +<p>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 <a href="/en-US/docs/Tools/Network_Monitor">HTTP message monitor</a>.</p> 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 +--- +<p>الويب المفتوح يقدم فرصة عظيمة للأشخاص الذين يرغبون في إنشاء مواقع وتطبيقات على الإنترنت. للحصول على الإستفادة الكاملة من تقنيات الويب، عليك معرفة كيفية استخدامها. تصفح الراوبط أدناه لتعلُّم المزيد حول تقنيات الويب المتنوعة.</p> + +<div class="row topicpage-table"> +<div class="section"> +<h3 dir="rtl" id="الأساسيات">الأساسيات</h3> + +<dl> + <dt dir="rtl"><a href="/ar/docs/Web/HTML">لغة ترميز النص الفائق</a></dt> + <dd dir="rtl">تستخدم<strong> لغة ترميز النص الفائق (HTML) </strong>لوصف وتعريف <em>محتوى</em> صفحة الويب<strong>.</strong></dd> + <dt dir="rtl"><a href="https://servicebosch2020.blogspot.com/">بروتوكول نقل النص الفائق</a></dt> + <dd dir="rtl">يستخدم<strong> بروتوكول نقل النص الفائق (HTTP)</strong> لتوصيل وثائق لغة ترميز النص الفائق، وغيرها من الوثائق الفائقة على الويب.</dd> +</dl> + +<h3 dir="rtl" id="البرمجة">البرمجة</h3> + +<dl> + <dt dir="rtl"><a href="/ar/docs/Web/JavaScript">الجافاسكربت</a></dt> + <dd dir="rtl">تعد <strong>الجافاسكربت</strong> لغة برمجة تعمل على المتصفح، تستطيع استخدامها لإضافة مزايا تفاعليّة ومزايا ديناميكيّة أخرى لموقعك أو تطبيقك.</dd> + <dt dir="rtl"><a href="/ar/docs/Web/Reference/API">واجهات البرمجيّة للويب</a></dt> + <dd dir="rtl">تستخدم <strong>واجهات التطبيقات البرمجيّة للويب (Web APIs)</strong> للقيام بمهام متنوعة، كالتلاعب بـ <a href="/ar/docs/Web/API/Document_Object_Model">DOM</a>، تشغيل الملفات الصوتيّة والفيديوهات، أو توليد رسومات ثلاثيّة الأبعاد.</dd> +</dl> + +<ul dir="rtl"> + <li><a href="/ar/docs/Web/API">مرجع واجهات التطبيقات البرمجيّة للويب</a> يسرد جميع أنواع الكائنات التي يمكنك استخدامها عند تطوير الويب.</li> + <li><a href="/ar/docs/WebAPI">صفحة واجهات التطبيقات البرمجية للويب</a> تسرد جميع الواجهات البرمجيّة التي تستخدم في الإتصالات، وصول للعتاد، وواجهات برمجيّة أخرى يمكنك استخدامها في تطبيقات الويب.</li> + <li><a href="/ar/docs/Web/Events">مرجع الأحداث</a> يسرد جميع الأحداث التي يمكنك استخدامها لتتبع أو الإستجابة للأمور التي تحدث في صفحة الويب خاصتك أو تطبيقك.</li> +</ul> + +<h3 dir="rtl" id="الرسومات">الرسومات</h3> + +<dl> + <dt dir="rtl"><a href="/ar/docs/HTML/Canvas">الكانفاس</a></dt> + <dd dir="rtl">عنصر <a class="new" href="/ar/docs/Web/HTML/Element/canvas" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code><canvas></code></a> يوفر واجهات برمجيّة لرسم رسومات ثنائيّة الأبعاد باستخدام لغة الجافاسكربت.</dd> + <dt dir="rtl"><a href="/ar/docs/Web/SVG">الرسوميات المتجهية المتغيرة</a></dt> + <dd dir="rtl">تتيح <strong>الرسوميات المتجهيّة المتغيرة (SVG)</strong> لك استخدام الخطوط، المنحنيات، و غيرها من الأشكال الهندسيّة لتشكيل الرسومات. مع الفيكتور (vector) يمكنك إنشاء صور يمكن أن يتم تحجيمها بدون أن تفقد دقتها.</dd> + <dt dir="rtl"><a href="/ar/docs/Web/WebGL">تقنيّة WebGL</a></dt> + <dd dir="rtl">دليلك للبدء مع تقنيّة WebGL، الواجهة البرمجيّة المخصصة للويب لرسم رسوميات ثلاثيّة الأبعاد. تسمح هذه التقنيّة باستخدام معايير OpenGL ES في محتوى الويب.</dd> +</dl> + +<h3 dir="rtl" id="الصوت،_الفيديو،_والوسائط_المتعددة">الصوت، الفيديو، والوسائط المتعددة</h3> + +<dl> + <dt dir="rtl"><a href="/ar/docs/Web/Media">تقنيات وسائط الويب</a></dt> + <dd dir="rtl">قائمة بالواجهات البرمجيّة المتعلقة بالوسائط مع روابط لوثائق ستحتاجها.</dd> + <dt dir="rtl"><a href="/ar/docs/Web/Media/Overview">لمحة عن تقنية الوسائط في الويب</a></dt> + <dd dir="rtl">لمحة عامة على تقنيات الويب المفتوحة والواجهات البرمجيّة التي توفر دعم لتشغيل الصوت والفيديو، التلاعب والتسجيل. إذا لم تكن تعلم أي واجهة برمجيّة يجب أن تستخدم، فهنا حيث يجب أن تبدأ.</dd> + <dt dir="rtl"><a href="/ar/docs/Web/API/Media_Streams_API">واجهة برمجيّة لالتقاط الوسائط والتدفقات</a></dt> + <dd dir="rtl">مرجع لواجهة برمجية التي تجعل من الممكن دفق، تسجيل، والتلاعب بالوسائط محلياً وعلى الشبكة في آنٍ واحد. هذا يتضمن استخدام الكاميرا المحليّة والميكروفون للالتقاط الفيديو، الصوت، والصور.</dd> + <dt dir="rtl"></dt> + <dt dir="rtl"><a href="/ar/docs/Web/Guide/HTML/Using_HTML5_audio_and_video">استخدام ملفات الفيديو والصوت في لغة ترميز النص الفائق</a></dt> + <dd dir="rtl">تضمين ملفات الفيديو والصوت في صفحات الويب، والتحكم بتشغيلها.</dd> + <dt dir="rtl"><a href="/ar/docs/WebRTC">تقنيّة WebRTC</a></dt> + <dd dir="rtl">تقنية RTC في الويب تعني الإتصال في الوقت الحالي (Real-Time Communications), وهي تقنيّة تسمح بتمكين تدفق الصوت والصورة ومشاركتها بين المُتصفحات.</dd> + <dd dir="rtl"> + <h3 class="highlight-spanned" id="أُخرى"><span class="highlight-span">أُخرى</span></h3> + </dd> + <dt dir="rtl"><a href="/ar/docs/Web/MathML">لغة الترميز الرياضية</a></dt> + <dd dir="rtl">تتيح <strong>لغة الترميز الرياضية (MathML)</strong> لك تمثيل صيغ المعادلات الرياضيّة المعقدة.</dd> +</dl> +</div> + +<div class="section"> +<dl> + <dt dir="rtl"> + <h2 id="قسم_التعلم">قسم التعلم</h2> + </dt> + <dt dir="rtl"><a href="/ar/docs/Learn">تعلم تطوير الويب</a></dt> + <dd dir="rtl">هذه مجموعة من المقالات توفر للمبتدئين ما يحتاجون إليه للبدء بكتابة موقع بسيط.</dd> + <dt> + <h2 dir="rtl" id="مواضيع_أُخرى">مواضيع أُخرى</h2> + </dt> + <dt dir="rtl"><a href="/ar/docs/Web/Apps">تطوير تطبيقات الويب</a></dt> + <dd dir="rtl">هذه قائمة من المقالات التي تشرح التقنيات التي تُستخدم في تطوير تطبيقات الويب للهواتف، لسطح المكتب، ولبيئة نظام فايرفوكس.</dd> + <dt dir="rtl"><a href="/ar/docs/Web/Accessibility">الإتاحة</a></dt> + <dd dir="rtl">تُمكِن المواقع التي يمكن الوصول إليها بطرق مختلفة عدد أكبر من الأشخاص استخدام الويب، بما في ذلك الأشخاص التي تكون قدراتهم السمعيّة و البصريّة محدودة (المعاقين جسدياً). هذه المجموعة من المقالات توفر معلومات حول تطوير الويب المُتاح.</dd> + <dt dir="rtl"><a href="/ar/docs/Web/Security">الحماية</a></dt> + <dd dir="rtl">لا تدع موقعك أو تطبيقك يتعرض لتسريب بيانات خاصة إلى أشخاص سيئين. استخدم مجموعة المقالات هذه لتتأكد أنَّ مشروعك آمن.</dd> +</dl> +</div> +</div> + +<p dir="rtl"><a href="/ar/docs/tag/Web">قراءة المزيد ...</a></p> + +<div id="eJOY__extension_root"></div> 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 +--- +<div>{{JsSidebar}}</div> + +<h2 id="ماهي_جافا_سكريبت">ماهي جافا سكريبت</h2> + +<p><strong>جافا سكريبت</strong><sup>®</sup> (غالبا ما تختصر بـ <strong>JS</strong>) هي لغة خفيفة الوزن، مفسّرة، كائنية التوجه مع <a href="https://ar.wikipedia.org/wiki/First-class_function">دوال من الدرجة الأولى</a>، وهي معروفة باسم لغة البرمجة النصية لصفحات الويب، ولكنها <a href="https://ar.wikipedia.org/wiki/JavaScript#Uses_outside_web_pages">تستخدم في العديد من البيئات غير المتصفّح</a> أيضًا. وهي لغة برمجة مبنية على<a href="https://en.wikipedia.org/wiki/Prototype-based_programming"> نماذج أولية</a> ومتعددة النماذج تتسم بالديناميكية و تدعم أنماط البرمجة الكائنية التوجه و اﻷساسية و الوظيفية.</p> + +<p>تعمل جافا سكريبت على جانب العميل\المستخدم من الويب، و التي يمكن إستخدامها لتصميم\برمجة كيفية تصرف صفحات الويب عند وقوع خطأ ما. جافا سكريبت هي لغة سهلة التعلم ولغة برمجة قوية ، و تستخدم على نطاق واسع للتحكم في سلوك صفحات الويب.</p> + +<p>على عكس الاعتقاد الخاطئ الشائع ، فإن <strong>جافا سكريبت <em>ليست</em> "جافا المفسرة"</strong>. باختصار ، جافا سكريبت هي لغة برمجة ديناميكية تدعم بناء الكائن <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Class-Based_vs._Prototype-Based_Languages">المعتمد على النماذج</a>. التركيب اﻷساسي مشابه -بشكل مقصود- لجافا و سي++ لتقليل عدد المفاهيم الجديدة المطلوبة لتعلم اللغة. إن تركيبات اللغة مثل عبارات <code>if</code> و حلقات <code>for</code> و <code>while</code> ، و الكتل <code>switch</code> and <code>try ... catch</code> تعمل بالمثل كما في هذه اللغات (أو أقرب إلى ذلك)</p> + +<p>يمكن أن تعمل جافا سكريبت كلغة <a href="https://ar.wikipedia.org/wiki/Procedural_programming">إجرائية</a> و <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">لغة كائنية التوجه</a>.. يتم إنشاء الكائنات برمجياً في جافا سكريبت ، عن طريق إرفاق طرق وخصائص الكائنات الفارغة الأخرى <strong>في وقت التشغيل</strong>، على عكس التركيب\البناء اللغوي لتعريفات الأصناف الشائعة في اللغات المترجمة أمثال سي++ و جافا. بمجرد إنشاء كائن، يمكن استخدامه كمخطط (أو نموذج أولي) لإنشاء كائنات مشابهة.</p> + +<p>تتضمن الإمكانات الديناميكية لجافا سكريبت بناء الكائن وقت التشغيل ، وقوائم المعاملات المتغيرة ، ومتغيرات الوظيفة ، وإنشاء النص البرمجي الديناميكي (عن طريق <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval">eval</a>) ، واستبطان الكائن (عن طريق <code>for ... in</code>)، واستعادة الكود المصدري (يمكن لبرامج جافا سكريبت تفكيك هيئات\أجسام الوظائف رجوعا إلى نصها المصدري).</p> + +<p>لإجراء مناقشة أكثر عمقاً لبرمجة جافا سكريبت ، تابع روابط <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/About_JavaScript$translate?tolocale=ar#JavaScript_resources">موارد جافا سكريبت</a> أدناه.</p> + +<h2 id="ما_هي_تطبيقات_جافا_سكريبت_المتاحة؟">ما هي تطبيقات جافا سكريبت المتاحة؟</h2> + +<p>The Mozilla project provides two JavaScript implementations. The first <strong>ever</strong> 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 <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey" title="en-US/docs/SpiderMonkey">SpiderMonkey</a>, is implemented in C/C++. The <a href="/en-US/docs/Rhino" title="en-US/docs/Rhino">Rhino</a> 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.</p> + +<p>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.</p> + +<p>Besides the above implementations, there are other popular JavaScript engines such as:-</p> + +<ul> + <li>Google's <a class="external" href="https://code.google.com/p/v8/" title="https://code.google.com/p/v8/">V8</a>, which is used in the Google Chrome browser and recent versions of Opera browser. This is also the engine used by <a href="http://nodejs.org">Node.js</a>.</li> + <li>The <a class="external" href="https://www.webkit.org/projects/javascript/index.html" title="https://www.webkit.org/projects/javascript/index.html">JavaScriptCore</a> (SquirrelFish/Nitro) used in some WebKit browsers such as Apple Safari.</li> + <li><a class="external" href="http://my.opera.com/ODIN/blog/carakan-faq" title="http://my.opera.com/ODIN/blog/carakan-faq">Carakan</a> in old versions of Opera.</li> + <li>The <a class="external" href="http://en.wikipedia.org/wiki/Chakra_%28JScript_engine%29" title="http://en.wikipedia.org/wiki/Chakra_%28JScript_engine%29">Chakra</a> engine used in Internet Explorer (although the language it implements is formally called "JScript" in order to avoid trademark issues).</li> +</ul> + +<p>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 <strong>host objects</strong> responsible for reflecting the <a class="external" href="http://www.w3.org/DOM/">DOM</a> into JavaScript.</p> + +<p>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. <a href="http://nodejs.org">Node.js</a> is a popular example of this.</p> + +<h2 id="مصادر_جافا_سكريبت">مصادر جافا سكريبت</h2> + +<dl> + <dt><a href="/en-US/docs/Mozilla/Projects/SpiderMonkey" title="en-US/docs/SpiderMonkey">SpiderMonkey</a></dt> + <dd>Information specific to Mozilla's implementation of JavaScript in C/C++ engine (aka SpiderMonkey), including how to embed it in applications.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Rhino" title="en-US/docs/Rhino">Rhino</a></dt> + <dd>Information specific to the JavaScript implementation written in Java (aka Rhino).</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Language_Resources" title="en-US/docs/JavaScript_Language_Resources">Language resources</a></dt> + <dd>Pointers to published JavaScript standards.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript" title="en-US/docs/A_re-introduction_to_JavaScript">A re-introduction to JavaScript</a></dt> + <dd><a href="/en-US/docs/Web/JavaScript/Guide" title="en-US/docs/JavaScript/Guide">JavaScript guide</a> and <a href="/en-US/docs/Web/JavaScript/Reference" title="en-US/docs/JavaScript/Reference">JavaScript reference</a>.</dd> +</dl> + +<p>JavaScript® is a trademark or registered trademark of Oracle in the U.S. and other countries.</p> 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 +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}</div> + +<p class="summary" dir="rtl">جافاسكريبت تدعم مجموعة من البيانات المدمجة، وتحديدا التحكم في تدفق البيانات، التي يمكنك استخدامها لخلق قدرا كبيرا من التفاعل في التطبيق الخاص بك. يقدم هذا الفصل لمحة عامة عن هذه البيانات.</p> + +<div style="font-size: 15; font-family: 'tahoma';"> +<p dir="rtl">يحتوي هذا الفصل، <a href="/en-US/docs/Web/JavaScript/Reference/Statements">مرجع الجافاسكريبت</a> على تفاصيل شاملة عن التعليمات البرمجية. في جافاسكريبت، يتم استخدام رمز الفاصلة المنقوطة (<code>;</code>) لانهاء التعليمات البرمجية.</p> + +<div class="note"> +<p dir="rtl">ملحوظة: برامج الجافاسكريبت وبيانات الجافاسكريبت، غالباً ما تسمى تعليمات برمجية.</p> +</div> + +<p dir="rtl">أي تعبير جافا سكريبت، هو أيضا تعليمة برمجية. راجع <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators">Expressions and operators</a> للحصول على معلومات كاملة حول التعبيرات.</p> + +<h2 dir="rtl" id="Block_statement">Block statement</h2> + +<p dir="rtl">ابسط تعليمة برمجية هي التعليمة البرمجية بلوك block، التي تستخدم لاحتواء مجموعة من التعليمات البرمجية. البلوك محدد بواسطة الاقواس المتعرجة:</p> + +<pre class="syntaxbox">{ + statement_1; + statement_2; + . + . + . + statement_n; +} +</pre> + +<h3 dir="rtl" id="مثال"><strong>مثال</strong></h3> + +<p dir="rtl">اغلب استخدامات البلوك، تكون مع تعليمات التحكم في التدفق ( مثل <code>if</code>, <code>for</code>, <code>while</code> )</p> + +<pre class="brush: js">while (x < 10) { + x++; +} +</pre> + +<p dir="rtl">لدينا هنا، <code>{ ;++x }</code> التعليمة البرمجة block.</p> + +<p dir="rtl"><strong>هام</strong>: في جافا سكريبت قبل ECMAScript2015. البلوك لم يكن لديه نطاق. المتغيرات المستخدمة في البلوك، سيتم تغيير نطاقها الى النطاق العام وهو السكريبت، فتصبح متغيرات عامة متاحة لجميع التعليمات البرمجية في السكريبت، اما اذا وجد البلوك داخل دالة سيتم تغيير نطاقها لهذه الدالة، وبالتالي ستصبح متغيرات محلية متاحة لهذه الدالة فقط.</p> + +<p dir="rtl">في جافا سكريبت، البلوكات "المستقلة" يمكن أن ينتج عنها نتائج مختلفة تماما عما كان سينتج في C أو جافا. فمثلا</p> + +<pre class="brush: js">var x = 1; +{ + var x = 2; +} +console.log(x); // outputs 2 +</pre> + +<p dir="rtl">مخرجات التعليمة البرمجية اعلاه، ستكون 2 وذالك لان المتغير x المتواجد <strong>داخل </strong>البلوك والمتغير x المتواجد <strong>خارج</strong> البلوك لديهما <strong>نفس النطاق</strong>، او بمعنى اصح، كلاهما في النطاق العام وهو السكريببت. في C أو جافا. المخرجات ستكون 1.</p> + +<p dir="rtl">ابتداءا من ECMAScript2015. استخدام المتغير <code>let</code> داخل البلوك سينتج عنه سلوك مغاير. راجع {{jsxref("Statements/let", "let")}} صفحة المرجع للحصول على مزيد من المعلومات.</p> + +<h2 dir="rtl" id="التعليمات_الشرطية">التعليمات الشرطية</h2> + +<p dir="rtl">التعليمة الشرطية هي مجموعة من الأوامر التي ستنفذ إذا تحقق شرطا معيناً. تدعم الجافاسكريبت اثنين من التعليمات الشرطية: هما <code>if...else</code> و <code>switch</code>.</p> + +<h3 dir="rtl" id="التعليمة_if...else">التعليمة <code>if...else</code></h3> + +<p dir="rtl">ستنفذ التعليمة البرمجية المرتبطة بالتعليمة <code><strong>if</strong></code><strong> </strong>اذا كان الشرط المنطقي يساوي <code>true</code>. وكذالك ستنفذ التعليمة البرمجية المرتبطة بالتعليمة <code><strong>else</strong></code> اذا كان الشرط المنطقي يساوي <code>false</code>. استخدام التعليمة <code>else</code> اختياري. فيما تكون التعليمة <code>if</code> على الشكل التالي،</p> + +<pre class="syntaxbox">if (condition) { + statement_1; +} else { + statement_2; +}</pre> + +<p dir="rtl"><strong>الشرط</strong> <code>condition</code>، يمكن ان يكون اي تعبير لإختبار ما اذا كان الشرط <code>true</code> او <code>false </code>راجع <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean#Description">Boolean.</a> لتوضيح ما الذي سيتم تنفيذه: في حالة ما اذا كان الشرط صحيح سيتم تنفيذ <code>statement_1</code>، اما اذا كان الشرط غير صحيح سيتم تنفيذ <code>statement_2</code>، يمكن ل <code>statement_1</code> و <code>statement_2</code> ان تكون اي تعليمات برمجية، بما فيها تعليمة <code>if</code> اخرى.</p> + +<p dir="rtl">يمكنك أيضا توسيع مجال التعليمات الشرطية باستخدام <code><strong>else if</strong></code> لاختبار شروط متعددة في تسلسل، كما يلي:</p> + +<pre class="syntaxbox">if (condition_1) { + statement_1; +} else if (condition_2) { + statement_2; +} else if (condition_n) { + statement_n; +} else { + statement_last; +} + +</pre> + +<p dir="rtl">في حالة وجود شروط متعددة سيتم تنفيذ شرط واحد فقط، وهو الشرط المنطقي الذي سيتم اختباره ب <code>true</code>. لتنفيذ عدة تعليمات برمجية، قم بتضمينها في التعليمة بلوك ({ ... }). من الجيد دائماً استخدام التعليمة بلوك، لا سيما عند استخدام التعليمات الشرطية المتداخلة :</p> + +<pre class="syntaxbox">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; +} +</pre> + +<div dir="rtl">من المستحسن عدم استخدام التعيينات البسيطة في التعبير الشرطي، لأنه يمكن الخلط بين التعيين والمساواة، على سبيل المثال، لا تستخدم التالي:</div> + +<div dir="rtl"> </div> + +<pre class="example-bad brush: js">if (x = y) { + /* statements here */ +} +</pre> + +<p dir="rtl">إذا كنت بحاجة إلى استخدام تعيين بسيط في تعبير شرطي، استخدم أقواس إضافية حول التعيين. على سبيل المثال:</p> + +<pre class="brush: js">if ((x = y)) { + /* statements here */ +} +</pre> + +<h4 dir="rtl" id="القيم_Falsy">القيم Falsy</h4> + +<p dir="rtl">القيم التالية تُقَيًم إلى <code>false</code> عند اختباها في تعليمة شرطية (وتعرف ايضا بالقيم {{Glossary("Falsy")}}):</p> + +<ul> + <li><code>false</code></li> + <li><code>undefined</code></li> + <li><code>null</code></li> + <li><code>0</code></li> + <li><code>NaN</code></li> + <li>السلسلة النصية الفارغة (<code>""</code>)</li> +</ul> + +<p dir="rtl">كل القيم الأخرى، بما في ذلك جميع الكائنات، تقيم إلى <code>true</code> عندما يتم تمريرها إلى تعليمة شرطية.</p> + +<p dir="rtl">لا تخلط بين القيم المنطقية الاولية <code>true</code> و <code>false</code> مع القيم true و false للكائن {{jsxref("Boolean")}}. على سبيل المثال:</p> + +<pre class="brush: js">var b = new Boolean(false); +if (b) // this condition evaluates to true +if (b == true) // this condition evaluates to false +</pre> + +<h4 dir="rtl" id="مثال_2"><strong>مثال</strong></h4> + +<p dir="rtl">فى المثال التالى, الدالة checkData ستعود ب <code>true</code> ادا كان عدد الحروف في الكائن Text يساوي ثلاثة، بخلاف ذالك، سيظهر التنبيه (<code>alert</code>) وتعود ب <code>false</code>.</p> + +<pre class="brush: js">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; + } +} +</pre> + +<h3 dir="rtl" id="التعليمة_switch"><code>التعليمة</code> <code>switch</code></h3> + +<p dir="rtl">التعليمة <code>switch</code> تسمح للبرنامج <strong>باختبار</strong> التعبير، وذالك من خلال مطابقة قيمة التعبير مع الحالة <code>case</code>. إذا تم العثور على تطابق، البرنامج سينفذ التعليمة البرمجية المرتبطة بها. التعليمة <code>switch</code> تكون على الشكل التالي:</p> + +<pre class="syntaxbox">switch (expression) { + case label_1: + statements_1 + [break;] + case label_2: + statements_2 + [break;] + ... + default: + statements_def + [break;] +} +</pre> + +<p dir="rtl">بداية يقوم البرنامج بالبحث عن الحالة <code>case</code> التي تطابق قيمتها قيمة ال <code>expression</code>، اذا وجدت، يقوم البرنامج بتنفيذ التعليمة البرمجية المرتبطة بها، اذا لم يجد ما يبحث عنه في اي من الحالات <code>case</code>، سيقوم البرنامج بتنفيذ التعليمات البرمجية المرتبطة بالحالة <code>default</code> اذا وجدت، لان وجود الحالة <code>default</code> في التعليمة <code>switch</code> اختياري. اذا لم يجد البرنامج اي حالة <code>case</code> متطابقة ولا الحالة <code>default</code> سيقوم بتنفيذ التعليمات البرمجية التي تلي التعليمة <code>switch</code>.</p> + +<p dir="rtl">التعليمة <code>break</code> مرتبطة مع كل حالة <code>case</code>، مهمتها جعل البرنامج يقفز خارج التعليمة <code>switch</code> بمجرد تنفيذ التعليمة البرمجية، واستكمال تنفيذ التعليمات البرمجية التي تلي التعليمة <code>switch</code>. بما ان وجود التعليمة <code>break</code> اختياري، ففي حالة عدم وجودها سيقوم البرنامج بتنفيذ التعليمة التالية في <code>switch</code>.</p> + +<h4 dir="rtl" id="مثال_3">مثال</h4> + +<p dir="rtl">في المثال التالي، اذا كان <code>fruittype</code> يساوي "Bananas"، سيقوم البرنامج بتنفيذ التعليمات البرمجية المرتبطة بالحالة <code>'case: 'Banana</code>. عندما سسيجد <code>break</code>، سيقوم بايقاف <code>switch</code> وينفذ التعليمات البرمجية التي تليها. اذا لم يجد <code>break</code> سينفذ التعليمة البرمجية المرتبطة بالحالة '<code>case</code>: 'Cherries ايضا. </p> + +<pre class="brush: js">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?");</pre> + +<div class="note"> +<p dir="rtl"><strong>ملاحظة :</strong> لمزيد من التفاصيل حول التعليمة <code><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/switch">switch</a></code>.</p> +</div> + +<h2 dir="rtl" id="التعليمات_المعالجة_للاستثناءات">التعليمات المعالجة للاستثناءات</h2> + +<blockquote> +<p dir="rtl">من الثابت بقواعد الرياضيات انه لا يجوز القسمة على صفر بأي حال من الأحوال لذلك لن يتمكن البرنامج من تنفيذ العملية المطلوبة وستظهر للمستخدم رسالة خطا تنفيذي لا يمكنه تفاديها وعلى الأغلب أنها ستسبب بإغلاق البرنامج.<br> + <br> + ولمعالجة أخطاء التنفيذ هذه وتحجيمها فبل حدوثها وفرت لنا لغات البرمجة وعلى رأسها الجافاسكريبت آلية تتمثل بوضع جمل استثنائية خاصة يتوقع من خلالها المبرمج أنواع أخطاء التنفيذ التي قد تحدث ويقوم ببرمجة حدث برمجي بكل استثناء ليتم تنفيذه بدلا من الخطا التنفيذي.</p> + +<p dir="rtl">بصفة عامة، الاستثناءات هي عبارة عن آلية برمجية لمعالجة أخطاء التنفيذ المحتمل وقوعها.</p> + +<p dir="rtl"> </p> +</blockquote> + +<p dir="rtl">يمكنك قذف (توليد) الاستثناءات من خلال التعليمة <code>throw</code> والتعامل معها باستخدام التعليمة <code>try...catch</code></p> + +<ul> + <li><a href="#throw_statement"><code>throw</code> statement</a></li> + <li><a href="#try...catch_statement"><code>try...catch</code> statement</a></li> +</ul> + +<h3 dir="rtl" id="انواع_الاستثناءات">انواع الاستثناءات</h3> + +<p dir="rtl">في جافا سكريبت، يمكن استخدام الكائنات لقذف/توليد الاستثناءات. ومع ذلك، ليس كل الكائنات القاذفة هي نفسها. من الشائع إلى حد ما، قذف الاعداد أو السلاسل الحرفية كاخطاء، الا انه في كثير من الأحيان سيكون أكثر فعالية استخدام أحد أنواع الاستثناءات التالية، والتي أنشئت خصيصا لهذا الغرض:</p> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error#Error_types">ECMAScript exceptions</a></li> + <li>{{domxref("DOMException")}} و {{domxref("DOMError")}}</li> +</ul> + +<h3 dir="rtl" id="التعليمة_throw"><code>التعليمة throw</code></h3> + +<p dir="rtl">التعليمة <code>throw</code> تقذف الاخطاء. عند حدوث خطأ، عادة سوف تتوقف جافا سكريبت، وستولد رسالة للاعلان عن الخطأ. المصطلح التقني لهذه العملية هو : الجافاسكريبت ستقذف (throw) الخطأ. التعليمة <code>throw</code> تمكتك من انشاء خطأ حسب رغبتك. المصطلح التقني لهذه العملية هو: اقذف استثناءا (throw an exception).</p> + +<p dir="rtl">إستخدِم التعليمة <code>throw</code> لقذف الإستثناء، عنما تريد قذف إستثناءا، عليك تحديد التعبير (<code>expression</code>) الذي سيحتوي على القيمة التي ستقذف:</p> + +<pre class="syntaxbox">throw expression; +</pre> + +<p dir="rtl">يمكنك قذف اي استثناء، وليس مجرد تعبيرات من نوع معين. التعليمة البرمجية التالية تقذف استثناءات لمختلف انواع البيانات:</p> + +<pre class="brush: js">throw 'Error2'; // String type +throw 42; // Number type +throw true; // Boolean type +throw {toString: function() { return "I'm an object!"; } }; +</pre> + +<div class="note" dir="rtl"><strong>ملحوظة</strong> : يمكنك تحديد كائن عندما ستقوم بقذف الاستثناء. يمكنك بعد ذالك الاشارة إلى خصائص الكائن في البلوك catch. يقوم المثال التالي بإنشاء الكائن myUserException من النوع UserException واستحدامه في التعليمة throw.</div> + +<pre class="brush: js">// 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');</pre> + +<div class="note"> +<p dir="rtl">لمزيد من المعلومات حول هذه التعليمة، راجع صفحة مرجع الجافا سكريبت <code><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/throw">throw</a></code>.</p> +</div> + +<h3 dir="rtl" id="التعليمة_try...catch"><code>التعليمة </code> <code>try...catch</code></h3> + +<p dir="rtl">التعليمة <code>try...catch</code> تحدد بلوك من التعليمات البرمجية لتجربتها، و تنص على وجود واحد أو أكثر من الاستجابات التي ينبغي على الاستثناء ان يقذفها. إذا تم <strong>قذف</strong> الاستثناء، <strong>ستمسك</strong> به التعليمة <code>try...catch.</code></p> + +<p dir="rtl">التعليمة <code>try...catch </code>تتكون من البلوك <code>try</code> الذي سيحتوي على واحدة أو أكثر من التعليمات البرمجية، والبلوك <code>catch</code> سيحتوي على التعليمات البرمجية التي تحدد ما يجب فعله اذا تم قذف الاستثناء من البلوك <code>try</code>. بمعنى اخر، في معظم الحالات. نريد من التعليمات البرمجية داخل البلوك <code>try</code> ان تسير بشكل طبيعي، وفي حالة حدوث مشاكل يمرّر التحكم الى البلوك <code>catch</code>. إذا كانت هناك احدى التعليمات البرمجية داخل البلوك <code>try</code> تقذف استثناءا، سيتم نقل التحكم فورا إلى البلوك <code>catch</code>. وإذا لم يتم إرسال أي استثناء من داخل البلوك <code>try</code>، فالبلوك <code>catch</code> لن يقم باي شئ. هذه التعليمة البرمجية يمكن ان تحتوي على البلوك <code>finally</code> والذي سينفذ بعد تنفيذ البلوك <code>try</code> و <code>catch</code>، وايضا سينفذ قبل تنفيذ التعليمات البرمجية التي تلي التعليمة <code>try...catch</code>، اذا وجدت.</p> + +<p dir="rtl"><br> + المثال التالى يستخدم التعليمة <code>try...catch</code>. ويقوم باستدعاء دالة تعود باسم الشهر من مصفوفة بناء على القيمة التي تم تمريرها إلى الدالة. إذا كانت القيمة لا تتوافق مع رقم الشهر (1-12)، سيولّد استثناء مع القيمة "InvalidMonthNo" فيما تقوم التعليمة البرمجية في البلوك <code>catch</code> بتعين القيمة <code>unknown</code> إلى المتغير <code>monthName</code>.</p> + +<pre class="brush: js">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 +} +</pre> + +<h4 dir="rtl" id="The_catch_block">The <code>catch</code> block</h4> + +<p dir="rtl">يمكنك استخدام البلوك <code>catch</code> للامساك بجميع الاستثناءات التي سيتم قذفها من البلوك <code>try.</code></p> + +<pre class="syntaxbox">catch (catchID) { + statements +} +</pre> + +<p dir="rtl">البلوك <code>catch</code> يحدد الايدي <code>catchID</code> الذي سيمسك القيمة المحددة من طرف التعليمة <code>throw</code>، يمكنك استخدام هذا الايدي للحصول على معلومات حول الاستثناء الذي سيقذف. جافا سكريبت ستنشئ هذا الايدي عند دخوله الى البلوك <code>catch</code>. يبدا عمر هذا الايدي من لحظة دخوله الى البلوك <code>catch،</code> وينتهي عندما ينتهي البلوك <code>catch </code>من التنفيذ.</p> + +<p dir="rtl">على سبيل المثال، التعليمة البرمجية التالية ستقذف استثناءا. عند حدوث الاستثناء، سيتم نقل التحكم الى البلوك <code>catch</code>.</p> + +<pre class="brush: js">try { + throw 'myException'; // generates an exception +} +catch (e) { + // statements to handle any exceptions + logMyErrors(e); // pass exception object to error handler +} +</pre> + +<h4 dir="rtl" id="The_finally_block">The <code>finally</code> block</h4> + +<p dir="rtl">البلوك <code>finally</code> سيحتوي على التعليمات البرمجية التي سيقوم بتنفيذها بعدما تنفذ البلوكات <code>try</code> و <code>catch</code>، وايضا سينفذ قبل تنفيذ التعليمات البرمجية التي تلي التعليمة <code>try...catch</code>. سينفذ البلوك <code>finally</code> سواء تم قذف الاستثناء ام لا، اذا تم قذف الاستثناء، ستنفذ التعليمات البرمجية في البلوك <code>finally</code> حتى وان لم يتم معالجة الاستثناء في البلوك <code>catch</code>.</p> + +<p dir="rtl">يمكنك استخدام البلوك <code>finally</code> لجعل السكريبت الخاص بك يفشل بأمان عند حدوث استثناء، على سبيل المثال، اذا كنت في حاجة إلى تحرير مورد، او لغلق ال flux، الخ. المثال التالي يفتح ملف ثم ينفذ التعليمات البرمجية لهذا ملف (server-side JavaScript يسمح لك بالوصول الى الملفات). اذا تم قذف استثناء في حين أن الملف مفتوح، البلوك <code>finally</code> ستغلق هذا الملف قبل فشل السكريبت.</p> + +<pre class="brush: js">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 +} +</pre> + +<p dir="rtl">عندما سيقوم البلوك <code>finally</code> بارجاع قيمة، تصبح هذه القيمة قيمة الإرجاع من كامل المجموعة <code>try-catch-finally</code> بغض النظر عن التعليمات البرمجية العائدة من البلوكات <code>try</code> و <code>catch</code>.</p> + +<pre class="brush: js">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 +</pre> + +<p dir="rtl">الكتابة فوق القيم العائدة من قبل البلوك <code>finally</code> ينطبق أيضا على قذف الاستثناءات او اعادة القذف داخل البلوك <code>catch</code>:</p> + +<pre class="brush: js">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"</pre> + +<h4 dir="rtl" id="التعليمات_try...catch_المتداخلة">التعليمات try...catch المتداخلة</h4> + +<p dir="rtl">يمكن عمل واحدة او اكثر من التعليمات <code>try...catch</code> المتداخلة. شرط عدم توفر <code>try...catch</code> الداخلية على البلوك <code>catch</code>، تتطلب وجود البلوك <code>finally</code> والتعليمة <code>try...catch</code> الخارجية سوف تستخدم البلوك <code>catch</code> ليتم التحقق من المطابقة. راجع <a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch#Nested_try-blocks">nested try-blocks</a> في صفحة المرجع الخاص بالتعليمة <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code>.</p> + +<h3 dir="rtl" id="باستخدام_الكائنات_Error">باستخدام الكائنات <code>Error</code></h3> + +<p dir="rtl">اعتماداً على نوع الخطأ، من الممكن استخدام الخصائص <code>name</code> و <code>message</code> للحصول على رسالة أكثر دقة. عموما لدينا الخاصية <code>name</code> التي ستعرض نوع الخطا الذي حدث (مثلا: <code>DOMException</code> او <code>Error</code>). والخاصية <code>message</code> التي ستعرض رسالة الخطأ لوصف هذا الخطا (تستخدم عادة عندما نريد تحويل او عرض نص الخطأ). على سبيل المثال:</p> + +<pre class="brush: js">try { + throw new Error('Whoops!'); +} catch (e) { + if( e.message === 'Whoops!'){ + e.message = "Costume message"; + } + console.log(e.name + ': ' + e.message); // Error: Costume message +}</pre> + +<p dir="rtl">اذا كنت ترغب في انشاء اخطاء خاصة بك، يمكتك استخدام المنشئ <code>Error</code> من أجل الاستفادة من خصائصه. على سبيل المثال:</p> + +<pre class="brush: js">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) +}</pre> + +<h2 dir="rtl" id="Promises">Promises</h2> + +<p dir="rtl">ابتداءا من ECMAScript2015. اصبح لجافاسكريبت الكائن <code>Promise</code> والذي يسمح لك بالتحكم في التدفق والعمليات المتزامنة.</p> + +<p dir="rtl">Promise هو احد هذه الحالات:</p> + +<ul dir="rtl"> + <li><em>pending</em> (قيد الانتظار): الحالة الأولية، لم تَفِ أو تم رفضها.</li> + <li><em>fulfilled</em> (وفَّى): عملية ناجحة</li> + <li><em>rejected</em> (رُفِض): فشل العملية.</li> + <li><em>settled</em> (التسوية): إما وفى بوعد أو رفضه، ولكن ليس قيد الانتظار.</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8633/promises.png" style="height: 297px; width: 801px;"></p> + +<h3 dir="rtl" id="تحميل_صورة_ب_XHR">تحميل صورة ب XHR</h3> + +<p dir="rtl">مثال بسيط باستخدام <code>Promise</code> و <code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> في مستودع الاكواد MDN GitHub. راجع المثال <a href="https://github.com/mdn/js-examples/tree/master/promises-test"> js-examples</a>. يمكنك ايضا مراجعة <a href="https://mdn.github.io/js-examples/promises-test/">see it in action</a>. تم التعليق على كل خطوة لتمكينك من متابعة سير عملية Promise و XHR. هذا الإصدار من دون تعليقات، يعرض تدفق ال Promise:</p> + +<pre class="brush: js">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(); + }); +}</pre> + +<p dir="rtl">للحصول على معلومات أكثر تفصيلاً، راجع {{jsxref("Promise")}} في صفحة المرجع.</p> + +<div> +<div>{{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}</div> +</div> +</div> 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 +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}</div> + +<p class="summary" dir="rtl">يناقش هذا الفصل. القواعد الأساسية لجافا سكريبت، والإعلان عن المتغيرات، وأنواع البيانات الحرفية.</p> + +<h2 dir="rtl" id="الأساسيات"><strong>الأساسيات </strong></h2> + +<div style="font-size: 15; font-family: 'tahoma';"> +<p dir="rtl">معظم التعبيرات الخاصة بجافا سكريبت مشتقة من <code>Java</code>، ولكنها تاثرت أيضا ب <code>Awk</code>، بيرل وبايثون.</p> + +<p dir="rtl">الجافاسكريبت حساسة لحالة الاحرف <code>myName</code> ليس نفسه <code>myname</code>، الجافاسكريبت تستخدم مجموعة من رموز ال <code>Unicode</code>.</p> + +<p dir="rtl">في الجافاسكريبت، التعليمات البرمجية تسمى {{Glossary("Statement", "statements")}} وتكون مفصولة بفاصلة منقوطة<code> (؛)</code>. الفراغات، وعلامات التبويب <code>(tabs)</code> والأسطر الجديدة تسمى مساحة خالية. يتم تحليل نص شيفرة المصدر لجافا سكريبت من اليسار إلى اليمين ويتم تحويلها إلى سلسلة من العناصر والمدخلات، وهي الرموز المميزة <code>(tokens)</code>، رموز التحكم <code>(control characters)</code>، ونهايات الاسطر <code>(line terminators)</code>، والتعليقات والمسافات الخالية، ECMAScript تحدد ايضا الكلمات المحجوزة مثل<code> (<strong>if</strong> او <strong>var</strong> او <strong>return</strong> الخ)</code> والبيانات الحرفية، كما لها قواعد للإدراج التلقائي للفاصلة المنقوطة (<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">ASI</a>) لانهاء التعليمة البرمجية. ومع ذالك، من المستحسن دائماً إضافة الفاصلة المنقوطة (;) نهاية التعليمة البرمجية الخاصة بك لتجنب الاثار الجانبية، للحصول على مزيد من المعلومات، راجع <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">قاموس جافا سكريبت</a>.</p> + +<h2 dir="rtl" id="التعليقات"><span class="short_text" id="result_box" lang="ar"><span class="hps">التعليقات</span></span></h2> + +<p dir="rtl"><span id="result_box" lang="ar"><span class="hps">صيغة التعليقات</span> <span class="hps">هي نفسها</span> <span class="hps">كما هو الحال في </span><strong><code><span class="hps">++</span></code></strong></span><span lang="ar"><strong><code><span class="hps">C</span></code></strong> <span class="hps">و</span> <span class="hps">في</span> <span class="hps">العديد من اللغات الأخرى</span><span>:</span></span></p> + +<pre class="brush: js">// a one line comment + +/* this is a longer, + multi-line comment + */ + +/* You can't, however, /* nest comments */ SyntaxError */</pre> + +<h2 dir="rtl" id="الاعلانات">الاعلانات</h2> + +<p dir="rtl">هناك ثلاثة أنواع من الإعلانات في جافا سكريبت.</p> + +<dl> + <dt dir="rtl">{{jsxref("Statements/var", "var")}}</dt> + <dd dir="rtl">الاعلان عن متغير (اي، الكلمة المحجوزة <code>var</code> متبوعة باسم المتغير <code>var <strong>x</strong></code>)، تهيئته (اي، اسناد قيمة اولية له <code>var x <strong>= value</strong> </code>) / اختياري.</dd> + <dt dir="rtl">{{jsxref("Statements/let", "let")}}</dt> + <dd dir="rtl">الاعلان عن متغير محلي ضمن نطاق الكتلة <code>(ال <strong>block</strong></code> هو مجموعة من التعليمات البرمجية بين اقواس متعرجة<code> {})</code>، تهيئته / اختياري.</dd> + <dt dir="rtl">{{jsxref("Statements/const", "const")}}</dt> + <dd dir="rtl">الاعلان عن ثابت قابل للقراءة فقط.</dd> +</dl> + +<h3 dir="rtl" id="المتغيرات"><span class="short_text" id="result_box" lang="ar"><span class="hps">المتغيرات</span></span></h3> + +<p dir="rtl"><span id="result_box" lang="ar"><span>يمكنك استخدام المتغيرات كأسماء رمزية للقيم في التطبيق الخاص بك</span></span><span lang="ar"><span>.</span> <span class="hps">أسماء</span> <span class="hps">المتغيرات</span><span>، تسمى </span></span>{{Glossary("Identifier", "identifiers")}}, وتخضع <span id="result_box" lang="ar"><span class="hps">لقواعد معينة</span><span>.</span></span></p> + +<p dir="rtl">المتغير في جافاسكريبت، يجب أن يبدأ بحرف، أو رمز <strong><code>(_)</code></strong>، أو علامة الدولار <strong><code>($)</code></strong>. يمكن أيضا أن تكون الأحرف اللاحقة أرقاما <code><strong>(0-9)</strong>.</code> ولأن الجافاسكريبت حساسة لحالة الأحرف، فإن الحروف تشمل الأحرف من <code>"<strong>A</strong>"</code> الى <code>"<strong>Z</strong>"</code> (أحرف كبيرة) او أحرف من <code>"<strong>a</strong>"</code> الى <code>"<strong>z</strong>"</code> (أحرف صغيرة).</p> + +<p dir="rtl">يمكنك استخدام معظم أحرف ال <code>ISO 8859-1</code> أو <code>Unicode</code> مثل <code>å</code> و <code>ü</code> في المتغيرات. لمزيد من المعلومات راجع <a href="https://mathiasbynens.be/notes/javascript-identifiers-es6">مذه المدونة</a> كما يمكنك أيضا استخدام <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#String_literals">Unicode escape sequences</a> كرموز مع المتغيرات.</p> + +<p dir="rtl">بعض الامثلة عن اسماء المتغيرات الجائزة : <code> <strong>Number_hits, temp99, $credit, and_name</strong></code>. <span lang="ar"><span class="hps"> </span></span></p> + +<h3 dir="rtl" id="الاعلان_عن_المتغيرات"><span class="short_text" id="result_box" lang="ar"><span class="hps">الاعلان عن المتغيرات</span></span></h3> + +<p dir="rtl"><span class="short_text" id="result_box" lang="ar"><span class="hps">يمكنك</span> <span class="hps">تعريف متغير</span> ب<span class="hps">ثلاث طرق</span><span>:</span></span></p> + +<ul dir="rtl"> + <li>بواسطة الكلمة المحجوزة {{jsxref("Statements/var", "var")}}. على سبيل المثال، <strong><code>var x = 42</code></strong>. يمكن استخدام هذه الصيغة للاعلان عن متغير عام ومتغير محلي على حد سواء.</li> + <li>من دون الكلمة المجوزة <code>var</code>. على سبيل المثال <strong><code>x = 42</code></strong>. سيصبح متغيرا عاما. لاكن تذكر على انه سيولد تحذيرا اذا استخدمته مع الوضع الصارم لجافاسكريبت <strong><code>"use strict"</code></strong>.</li> + <li>بواسطة الكلمة المحجوزة {{jsxref("Statements/let", "let")}}. على سبيل المثال<strong><code> let y = 13</code></strong>. يمكن استخدام هذه الصيغة للاعلان عن متغير محلي داخل نطاق الكتلة. راجع <a href="#Variable_scope">Variable scope</a> ادناه.</li> +</ul> + +<h3 dir="rtl" id="اختبار_المتغيرات">اختبار المتغيرات</h3> + +<p dir="rtl">الاعلان عن متغير باستخدام <code><strong>var</strong></code> او <strong><code>let</code></strong> من دون تهيئته، سيتم تهيئته بالقيمة {{jsxref("undefined")}} (بشكل تلقائي من قبل الجافاسكريبت).</p> + +<div class="note"> +<p dir="rtl"><strong>ملاحظة</strong>: جافا سكريبت في الوضع الصارم ("use strict") لا تسمح باستخدام المتغيرات إذا لم يتم الإعلان عنها</p> +</div> + +<p dir="rtl">محاولة الوصول إلى متغير غير معلن عنه سيؤدي الى ال {{jsxref("ReferenceError")}}. وايضا محاولة الوصول الى متغير لم يتم تهيئته بعد سيعود ب <code>undefined</code> :</p> + +<pre class="brush: js">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 +</pre> + +<p dir="rtl">يمكنك استخدام <code>undefined</code> لاختبار ما إذا كان المتغير مهيأ ام لا. في التعليمة البرمجية التالية، المتغير input غير مهيأ، ستقوم التعليمة <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else" title="en-US/docs/JavaScript/Reference/Statements/if...else">if</a></code> باختبار ما اذا كان فعلا المتغير <code>input</code> غير مهيأ، بمعنى اخر (هل صحيح/<code>true</code> ان المتغير <code>input</code> غير مهيأ).</p> + +<pre class="brush: js">var input; +if(input === undefined){ + doThis(); +} else { + doThat(); +} +</pre> + +<p dir="rtl">القيمة <code>undefined</code> تتصرف ك <code>false</code> عندما تستخدم في السياق المنطقي. على سبيل المثال، التعليمة البرمجية التالية ستقوم بتنفيذ الدالة <code>myFunction</code> بسبب ان العنصر الاول في المصفوفة <code>myArray</code> غير مهيأ:</p> + +<pre class="brush: js">var myArray = []; +if (!myArray[0]) myFunction();</pre> + +<div class="note"> +<p dir="rtl"><strong>تذكير: </strong> تذكر ان "المتغير الغير مهيأ يتم تهيئته بشكل تلقائي بالقيمة undefined" كما ذكرنا اعلاه.</p> +</div> + +<p dir="rtl">القيمة <code>undefined</code> تتحول الى <code>NaN</code> (ليسا رقما) عندما تستخدم في السياق الرقمي.</p> + +<pre class="brush: js">var a; +a + 2 = NaN</pre> + +<p dir="rtl">عند اختبار متغير يحمل القيمة {{jsxref("null")}} ستتصرف القيمة <code>null </code>ك 0 في السياق الرقمي وك <code>false </code>في السياق المنطقي على سبيل المثال:</p> + +<pre class="brush: js">var n = null; +console.log(n * 32); // Will log 0 to the console +</pre> + +<h3 dir="rtl" id="نطاق_المتغيرات_-_Variable_scope">نطاق المتغيرات - Variable scope</h3> + +<p dir="rtl">عندما سنقوم بتعريف متغير خارج أي دالة/وظيفة سيسمى متغير عام، لأنه سيصبح متاحا لأية تعليمات برمجية أخرى في المستند الحالي. وعندما سنقوم بتعريف متغير داخل دالة/وظيفة، سيسمى متغير محلي، لأنه سيصبح متاحا فقط داخل هذه الدالة.</p> + +<p dir="rtl">في جافاسكريبت قبل ECMAScript 2015، لم يكن للتعليمة البرمجية <a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Block_statement" title="en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Block_statement">block statement</a> نطاق (<strong><code>scope</code></strong>) خاص بها، المتغير الذي يتم تعريفه داخل <code>block</code> هو اما متغير محلى للدالة او متغير محلي للنطاق العام حسب تواجد هذا البلوك.</p> + +<p dir="rtl">يبين المثال التالى كيف ان ال <code>block</code> ليس له نطاق خاص به، مخرجات التعليمة البرمجية التالية ستكون 5، بسبب ان المتغير <strong>x</strong> تم تعريفه في النطاق العام وليس في نطاق ال <code>block</code>، وفي هذه الحالة ال <code>block</code> هي التعليمة <strong><code>if</code></strong>.</p> + +<pre class="brush: js">if (true) { + var x = 5; +} +console.log(x); // 5 +</pre> + +<p dir="rtl">يتغير هذا السلوك، عند الاعلان عن متغير باستخدام <strong><code>let</code></strong> المعتمدة في ECMAScript 6، الان اصبح لل <code>block</code> نطاقا خاصا به: </p> + +<pre class="brush: js">if (true) { + let y = 5; +} +console.log(y); // ReferenceError: y is not defined +</pre> + +<h3 dir="rtl" id="رفع_المتغيرات_-_Variable_hoisting">رفع المتغيرات - Variable hoisting</h3> + +<p dir="rtl">الرفع هو السلوك الافتراضي لجافا سكريبت، تقوم جافاسكريبت برفع جميع المتغيرات او الدوال او اي شئ تم الاعلان عنه، إلى أعلى النطاق الحالي (في الجزء العلوي من التعليمة البرمجية الحالية أو الوظيفة الحالية بشكل اوتوماتيكي). في جافاسكريبت، يمكن الاعلان عن متغير بعد استخدامه. او بعبارة اخرى يمكن استخدام المتغير قبل الاعلان عنه.</p> + +<p dir="rtl">لو تاملت قليلا في التعليمة البرمجة التالية، ستتسائل ما الذي جعل المتغير <strong><code>x</code></strong> يعود ب <code>undefined</code> وليس ب <code>ReferenceError</code>. السبب هو ان الجافاسكريبت ترفع الاعلان <strong><code>(var x)</code></strong> فقط، ولا ترفع التهيئة <strong><code>(3=)</code></strong>. وبالتالي وبسبب الرفع الذي حدث "في الخفاء"، <strong><code>x</code></strong> اعلن عنه قبل استخدامه، لكن بسبب ان التهيئة لم ترفع، فقيمة <strong><code>x</code></strong> ستعود ب <code>undefined</code>. ونفس الشئ حصل مع المتغير <code>myvar</code>، بحيث تم رفعه الى اعلى نطاق الدالة. فيما تم رفع المتغير <strong><code>x</code></strong> الى اعلى النطاق العام.</p> + +<pre class="brush: js">/*---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"; +})(); +</pre> + +<p dir="rtl">الامثلة اعلاه، ستفسر بالشكل التالي:</p> + +<pre class="brush: js">/*---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"; +})(); +</pre> + +<p dir="rtl">لتجنب الكثير من الاخطاء، حاول دائما الاعلان عن المتغيرات اعلى اي نطاق. بما ان هذا هو السلوك الذي تعتمده جافاسكريبت لتفسير التعليمة البرمجية خاصتك (بخصوص هذه الجزئية)، فالسلوك المتوقع منك ايضا كمبرمج متمرس هو مجاراة الجافاسكريبت. وايضا هذا يجعل من التعليمات البرمجية خاصتك اكثر وضوحا واكثر قابلية للقراءة.</p> + +<p dir="rtl">في ECMAScript 2015، المتغير <strong><code>let</code></strong> سوف لن يتم رفعه الى اعلى نطاق ال <code>block</code>. واستخدام متغير داخل <code>block</code> قبل الاعلان عنه سينتج عنه <code>ReferenceError</code>. لان المتغير يعتبر في "منطقة زمنية ميتة" من بداية ال <code>block</code> حتى يتم معالجته بالإعلان.</p> + +<pre class="brush: js">console.log(x); // ReferenceError +let x = 3;</pre> + +<h3 dir="rtl" id="رفع_الدوال_-_Function_hoisting">رفع الدوال - Function hoisting</h3> + +<p dir="rtl">بالنسبة للدوال، فقط ال <strong><code>function declaration</code></strong> هي التي سترفع الى الاعلى وليست ال <strong><code>function expression</code></strong>.</p> + +<pre class="brush: js">/* Function declaration */ + +foo(); // "bar" + +function foo() { + console.log('bar'); +} + + +/* Function expression */ + +baz(); // TypeError: baz is not a function + +var baz = function() { + console.log('bar2'); +}; +</pre> + +<h3 dir="rtl" id="المتغيرات_العامة">المتغيرات العامة</h3> + +<p dir="rtl">المتغيرات العامة، في حقيقة الامر هي خصائص للكائن العام. في صفحات الويب الكائن العام هو <code>window</code>. لذا يمكنك انشاء او الوصول إلى المتغيرات العامة باستخدام الصيغة <code>window.<em>variable</em></code>.</p> + +<p dir="rtl">كما يمكنك ايضا الوصول إلى المتغيرات العامة المعلن عنها في نافذة أو frame من نافذة اخرى او frame عن طريق تحديد النافذة او اسم ال frame. على سبيل المثال، اذا كان لدينا متغير معلن عنه في الوثيقة، واسمه<code> phoneNumber</code>, يمكنك الوصول الى هذا المتغير من ال iframe باستخدام الصيغة <code>parent.phoneNumber</code></p> + +<h3 dir="rtl" id="الثوابت_-_Constants">الثوابت - Constants</h3> + +<p dir="rtl">يمكنك إنشاء ثابت للقراءة فقط، والمسمى بالكلمة المحجوزة {{jsxref("Statements/const", "const")}} طريقة التعبير عن الثابت هي نفسها طريقة التعبير عن المتغير: يجب ان يبدا بحرف او underscore او ($)dollar sign ويمكن يحتوي على alphabetic، ارقام، او underscore او رموز. </p> + +<pre class="brush: js">const prefix = '212'; +</pre> + +<p dir="rtl">الثابت، لا يمكن تغيير قيمته من خلال الاحالة او باعادة الاعلان عنه اثناء تشغيل السكريبت. ولا بد من تهيئته.</p> + +<p dir="rtl">قواعد نطاق الثابت هي نفسها قواعد المتغير <strong><code>let</code></strong> فيما يخص نطاق ال <code>block</code>. اذا لم يتم تعيين الكلمة المحجوزة <strong><code>const</code></strong> سيتم معاملته معاملة المتغير.</p> + +<p dir="rtl">اسم الثابت لا يجب ان يكون هو نفسه اسم دالة او متغير في نفس النطاق. على سبيل المثال:</p> + +<pre class="example-bad brush: js">// THIS WILL CAUSE AN ERROR +function f() {}; +const f = 5; + +// THIS WILL CAUSE AN ERROR ALSO +function f() { + const g = 5; + var g; + + //statements +} +</pre> + +<p dir="rtl">ومع ذلك، خصائص الكائنات التي يتم تعيينها إلى الثوابت غير محمية، حيث سيتم تنفيذ التعليمة التالية دون مشاكل.</p> + +<pre class="brush: js">const MY_OBJECT = {'key': 'value'}; +MY_OBJECT.key = 'otherValue';</pre> + +<h2 dir="rtl" id="هياكل_البيانات_والأنواع_-_Data_structures_and_types">هياكل البيانات والأنواع - Data structures and types</h2> + +<h3 dir="rtl" id="أنواع_البيانات">أنواع البيانات</h3> + +<p dir="rtl">المعيار الاحدث ل ECMAScript يحدد سبعة من انواع البيانات:</p> + +<ul dir="rtl"> + <li>ستة منها اولية {{Glossary("Primitive", "primitives")}}: + <ul> + <li>{{Glossary("Boolean")}}. <code>true</code> و <code>false</code>.</li> + <li>النوع {{Glossary("null")}}. من الكلمات المحجوزة، تعني قيمة خالية. ولان جافاسكريبت حساسة لحالة الاحرف case-sensitive، يجب كتابتها كما هي لان null ليست هي Null او NULL او اي تركيبة اخرى.</li> + <li>النوع {{Glossary("undefined")}}. يعبر عن القيم الغير معرفة، له قيمة واحدة فقط، وتسمى undefined.</li> + <li>النوع {{Glossary("Number")}}. رقمي مثل <code>42</code> او <code>3.14159</code>.</li> + <li>النوع {{Glossary("String")}}. سلسلة نصية مثل "Howdy"</li> + <li>النوع {{Glossary("Symbol")}} (new in ECMAScript 6). نوع البيانات الفريدة من نوعها والغير قابلة للتغيير.</li> + </ul> + </li> + <li>والنوع {{Glossary("Object")}}</li> +</ul> + +<p dir="rtl">على الرغم من أن هذه الكمية من أنواع البيانات صغيرة نسبيا، الا أنها تتيح لك القيام بمهام مفيدة مع التطبيقات الخاصة بك. الكائنات {{jsxref("Object", "Objects")}} والدوال {{jsxref("Function", "functions")}} هي العناصر الأساسية الأخرى في اللغة، يمكنك اعتبار الكائنات كحاويات لمجموعة من المتغرات المرتبطة بالكائن، والدوال هي الوظائف التي سيقوم التطبيق الخاص بك بتنفيذها.</p> + +<h3 dir="rtl" id="تحويل_نوع_البيانات_-_Data_type_conversion">تحويل نوع البيانات - Data type conversion</h3> + +<p dir="rtl">الجافاسكريبت لغة حيوية، وهذا يعني انك لست بحاجة لتحديد نوع البيانات للمتغير اثناء تعريفه، على غرار لغات برمجة اخرى (جافا مثلا)، لانه سيتم تحويل أنواع البيانات تلقائياً حسب الحاجة أثناء تنفيذ السكريبت. على سبيل المثال، يمكنك تعريف متغير كالتالي:</p> + +<pre class="brush: js">var answer = 42; +</pre> + +<p dir="rtl">وفي وقت لاحق، يمكنك تغيير نوع البيانات، من النوع <strong><code>Number</code></strong> الى النوع <strong><code>String</code></strong>، عن طريق تعيين سلسلة حرفية لنفس المتغير، على سبيل المثال:</p> + +<pre class="brush: js">answer = "Thanks for all the fish..."; +</pre> + +<p dir="rtl">بفضل حيوية الجافا سكريبت، فهذه التعليمة البرمجية لن تتسبب في اية رسالة خطأ.</p> + +<p dir="rtl">اثناء الجمع بين القيم الرقمية والسلاسل الحرفية باستخدام عامل التشغيل <strong><code>(+)</code></strong>، فجافاسكريب تحول القيم الرقمية الى سلاسل حرفية. على سبيل المثال، انظر في التعليمات البرمجية التالية:</p> + +<pre class="brush: js">x = "The answer is " + 42 // "The answer is 42" +y = 42 + " is the answer" // "42 is the answer" +</pre> + +<p dir="rtl">في التعبيرات التي تحتوي على عوامل أخرى، جافا سكريبت لا تقوم بتحويل القيم الرقمية إلى سلاسل حرفية. على سبيل المثال:</p> + +<pre class="brush: js">"37" - 7 // 30 +"37" + 7 // "377" +</pre> + +<h3 dir="rtl" id="تحويل_القيم_النصية_إلى_أرقام">تحويل القيم النصية إلى أرقام</h3> + +<p dir="rtl">في حالة أن لدينا قيمة تمثل عدد في الذاكرة وهي على شكل سلسلة حرفية <code>("10")</code>، ونريد تحويلها الى قيمة رقمية، سنحتاج الى وظائف جاهزة في الجافاسكريبت تقوم بعملية التحويل.</p> + +<ul> + <li id="parseInt()_and_parseFloat()">{{jsxref("parseInt", "()parseInt")}}</li> + <li>{{jsxref("parseFloat", "()parseFloat")}}</li> +</ul> + +<p dir="rtl">المثال التالي يبين كيفية استخدام الوظيفة <code>parseInt</code> ببارامتر واحد، لمزيد من المعلومات حول البرامتر الثاني واشياء اخرى، راجع {{jsxref("parseInt", "()parseInt")}}:</p> + +<pre class="brush: js">var str = "10"; +console.log( typeof str ) // string +var parse = parseInt(str) +console.log( typeof parse ) // number.</pre> + +<p dir="rtl">المثال التالي يبين كيفية استخدام الوظيفة <code>parseFloat</code>، لمزيد من المعلومات، راجع {{jsxref("parseFloat", "()parseFloat")}}</p> + +<pre class="brush: js">var str = "3.14"; +console.log( typeof str ) // string +var parse = parseInt(str) +console.log( typeof parse ) // number.</pre> + +<p dir="rtl">طريقة بديلة لتحويل قيمة رقمية على شكل سلسلة حرفية، باستخدام العامل (unary plus)+</p> + +<pre class="brush: js">"1.1" + "1.1" = "1.11.1" +(+"1.1") + (+"1.1") = 2.2 +// Note: the parentheses are added for clarity, not required.</pre> + +<h2 dir="rtl" id="البيانات_الحرفية_-_Literals">البيانات الحرفية - Literals</h2> + +<p dir="rtl">المقصود بالبيانات الحرفية، هو استخددام الكائن بالصيغة الاسهل، مثلا، بدلا من استخدام الكائن <code>new Array(elm1,elm2...)</code> نستخدم <code>[...elm1,elm2]</code> وهكذا مع جميع الكائنات الاخرى.</p> + +<p dir="rtl">يمكنك استخدام البيانات الحرفية لتمثيل القيم في جافا سكريبت. وهي قيم ثابتة، ليست متغيرات، والتي ترد حرفيا في السكريبت. يصف هذا القسم الأنواع التالية من البيانات الحرفية :</p> + +<ul> + <li>{{anch("Array literals")}}</li> + <li>{{anch("Boolean literals")}}</li> + <li>{{anch("Floating-point literals")}}</li> + <li>{{anch("Integers")}}</li> + <li>{{anch("Object literals")}}</li> + <li>{{anch("String literals")}}</li> +</ul> + +<h3 dir="rtl" id="بيانات_المصفوفة_الحرفية_-_Array_literals">بيانات المصفوفة الحرفية - Array literals</h3> + +<p dir="rtl">بيانات المصفوفة الحرفية، هي قائمة تتكون من صفر او اكثر من التعبيرات، كل تعبير فيها يمثل عنصر المصفوفة، محاطة بأقواس مربعة <code>([])</code>. عندما تقوم بإنشاء مصفوفة باستخدام البيانات الحرفية ، ستقوم بتهيئتها بقيم محددة لتكوين عناصرها، طول المصفوفة هو عدد البارامترات/العناصر المحددة لها.</p> + +<p dir="rtl">ينشئ المثال التالي مصفوفة القهوة مع ثلاثة عناصر وطولها ثلاثة:</p> + +<pre class="brush: js">var coffees = ["French Roast", "Colombian", "Kona"]; +</pre> + +<div class="note"> +<p dir="rtl"><strong>ملاحظة</strong>: بيانات المصفوفة الحرفية هي نوع من مهيئ الكائن. <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Using_object_initializers" title="en-US/docs/JavaScript/Guide/Working with Objects#Using Object Initializers">Using Object Initializers</a>.</p> +</div> + +<p dir="rtl">إذا تم إنشاء مصفوفة باستخدام البيانات الحرفية في سكريبت على أعلى مستوى (top-level script)، فجافاسكريبت ستفسر هذه المصفوفة في كل مرة يتم اختبار التعبير الذي يحتوي على المصفوفة. بالإضافة الى ذالك، البيانات الحرفية المستخدمة في دالة يتم إنشاءها كل مرة يتم فيها استدعاء الدالة. </p> + +<p dir="rtl"> البيانات الحرفية هي كذالك <code>Array objects</code> راجع {{jsxref("Array")}} و <a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections">Indexed collections</a> لمعرفة تفاصيل ال <code>Array</code> objects.</p> + +<h3 dir="rtl" id="فواصل_إضافية_في_ال_array_literals">فواصل إضافية في ال array literals</h3> + +<p dir="rtl">لست بحاجة لتحديد جميع العناصر في بيانات المصفوفة الحرفية. اذا قمت بوضع فاصلتات متتاليتان سيم انشاء المصفوفة مع <code>undefined</code> مكان العنصر الغير محدد.</p> + +<pre class="brush: js">var fish = ["Lion", , "Angel"]; +</pre> + +<p dir="rtl">تحتوي هذه المصفوفة على عنصرين بقيم، وعنصر واحد فارغ <code>(fish[0]</code> هو <code>"Lion"</code>، و <code>fish[1]</code> هو <code>undefined</code>، و <code>fish[2]</code> هو <code>"Angel")</code>.</p> + +<p dir="rtl">إذا قمت بتضمين فاصلة زائدة في نهاية قائمة العناصر، سيتم تجاهل تلك الفاصلة. في المثال التالي، طول المصفوفة هو ثلاثة. وليس هناك<code> myList[3]</code>. جميع الفواصل الأخرى في القائمة تشير الى عنصر جديد.</p> + +<pre class="brush: js">var myList = ['home', , 'school', ]; +</pre> + +<p dir="rtl">في المثال التالي، طول المصفوفة هو أربعة، و<code> myList[0]</code> و <code>myList[2]</code> في عداد المفقودين.</p> + +<pre class="brush: js">var myList = [ , 'home', , 'school']; +</pre> + +<p dir="rtl">في المثال التالي، طول المصفوفة أربعة، <code>myList[1]</code> و <code>myList[3]</code> في عداد المفقودين. وسيتم تجاهل الفاصلة الأخيرة فقط.</p> + +<pre class="brush: js">var myList = ['home', , 'school', , ]; +</pre> + +<p dir="rtl">فهم سلوك الفواصل الاضافية مهم لفهم جافا سكريبت كلغة، ولكن عند كتابة التعليمات البرمجية الخاصة بك: من الافضل الإعلان الصريح عن العناصر المفقودة ب <code>undefined</code>، مثل هذه الممارسات ستزيد من وضوح التعليمات البرمجية الخاصة بك ويصبح من السهل صيانتها.</p> + +<div class="note"> +<p dir="rtl"><strong>ملاحظة</strong>: يمكن للفواصل الزائدة ان تخلق أخطاءا في الاصدارات القديمة من المتصفحات. من الافضل إزالتها.</p> +</div> + +<h3 dir="rtl" id="Boolean_literals">Boolean literals</h3> + +<p dir="rtl">النوع Boolean يتكون من بيانين حرفيين وهما : <code>true</code> و <code>false</code>.</p> + +<p dir="rtl">لا ينبغي الخلط بين القيم المنطقية الاولية <code>true</code> و <code>false</code> مع القيم true و false لل Boolean object. الكائن Boolean هو من يحتضن انوع البيانات المنطقية الاولية. راجع {{jsxref("Boolean")}} لمزيد من المعلومات.</p> + +<h3 dir="rtl" id="الأعداد_الصحيحة_-_Integers">الأعداد الصحيحة - Integers</h3> + +<p dir="rtl">يمكن التعبير عن الأعداد الصحيحة بالنسبة لكل من العدد الصحيح العشري ب (base 10)، ونظام العد السداسي عشر ب (base 16) والرقم الثماني ب (base 8) والثنائي ب (base 2)<span style="display: none;"> </span><span style="display: none;"> </span>.</p> + +<ul dir="rtl"> + <li>البيانات الحرفية التي تمثل الأرقام العشرية هي عبارة عن سلسلة من الأرقام التي لا تبدأ ب 0 (صفر)</li> + <li>البادئة 0 (صفر) تشير إلى أن العدد الصحيح الحرفي في تدوين ثماني. هذه الاعداد الصحيحة يمكن أن تتكون من ارقام فقط من 0 (صفر) إلى 7 (سبعة).</li> + <li>البادئة 0x (أو 0X) تشير إلى نظام العد السداسي عشر. يمكن أن تتضمن أرقام نظام العد السداسي عشر والأحرف من A إلى F (حروف صغيرة وحروف كبيرة) وأرقام (0-9).</li> + <li> + <p>البادئة 0b (أو 0B) تشير إلى منهج ثنائي. يمكن أن تتكون من الأرقام الثنائية 0 أو 1 فقط.</p> + </li> +</ul> + +<p dir="rtl">بعض الأمثلة عن البيانات الحرفية لعدد صحيح :</p> + +<pre class="eval">0, 117 and -345 (decimal, base 10) +015, 0001 and -077 (octal, base 8) +0x1123, 0x00111 and -0xF1A7 (hexadecimal, "hex" or base 16) +</pre> + +<p dir="rtl">لمزيد من المعلومات، راجع <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Numeric_literals">Numeric literals in the Lexical grammar reference</a>.</p> + +<h3 dir="rtl" id="بيانات_العدد_الكسري_الحرفي">بيانات العدد الكسري الحرفي</h3> + +<p dir="rtl">البيانات الحرفية لعدد كسري يمكن أن تتكون من الأجزاء التالية:</p> + +<ul dir="rtl"> + <li>الاعداد الصحيحة العشرية التي يمكن توقيعها (مسبوقة ب "+" أو "-")،</li> + <li>النقطة العشرية <code>(".")</code>،</li> + <li> العدد الكسري (عدد عشري آخر)،</li> + <li>الأس.</li> +</ul> + +<p dir="rtl">الأس هو "e" أو "E" متبوعاً بعدد صحيح، والذي يمكن توقيعه (يسبقه "+" أو "-"). يجب أن يكون قيمة حرفية floating-point ويجب ان يحتوي على رقم واحد على الأقل والنقطة العشرية أو "e" (أو "E").</p> + +<pre class="eval">[(+|-)][digits][.digits][(E|e)[(+|-)]digits] +</pre> + +<p dir="rtl">على سبيل المثال:</p> + +<pre class="eval">3.14 +2345.789 +.3333333333333333333 +-.283185307179586 +</pre> + +<h3 dir="rtl" id="بيانات_الكائن_الحرفي_-_Object_literals">بيانات الكائن الحرفي - Object literals</h3> + +<p dir="rtl">بيانات الكائن الحرفية هي عبارة عن قائمة تتكون من صفر او اكثر من الازواج، كل زوجين عبارة عن اسم خاصية الكائن وقيمتها، محاطة بأقواس متعرجة <code>({})</code>. لا يجب استخدام البيانات الحرفية للكائن في بداية التعليمة البرمجية خاصتك. لان هذا سيؤدي إلى خطأ او سيقوم بسلوك عكس المتوقع منه، بسبب ان الجافاسكريبت ستفسر } على انه بداية ل <code>block</code>.</p> + +<p dir="rtl">في المثال التالي. العنصر الاول للكائن <strong><code>car</code></strong> يمثل الخاصية <code>myCar</code>، تحمل القيمة النصية <code>"Saturn"</code>، العنصر الثاني هي الخاصية <code>getCar</code>، قيمتها هو ناتج الدالة <code>carTypes("Honda")</code>، العنصر الثالث، هي الخاصية <code>special</code>، قيمتها متغير خارجي وهو <code>sales</code>.</p> + +<pre class="brush: js">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 +</pre> + +<p dir="rtl">بالإضافة إلى ذلك، يمكنك استخدام قيمة رقمية أو سلسلة حرفية كاسم للخاصية، كما يمكنك ايضا انشاء كائن داخل كائن آخر. يبين المثال التالي كيفية انشاء هذه الخيارات.</p> + +<pre class="brush: js">var car = { manyCars: {a: "Saab", "b": "Jeep"}, 7: "Mazda" }; + +console.log(car.manyCars.b); // Jeep +console.log(car[7]); // Mazda +</pre> + +<p dir="rtl">أسماء خصائص الكائن يمكن أن تكون أي سلسلة حرفية، بما في ذالك السلسلة الحرفية الفارغة, اذا كان اسم الخاصية عبارة عن احد المعرفات <a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Variables">identifier</a>، الغير مسموح بها (ما لا يمكن استخدامه كاسم للمتغر مثلا) او ان يكون اسم الخاصية عبارة عن رقم، فيجب إحاطتها بعلامات الاقتباس. اسماء الخاصية الغير مسموح بها كمعرفات لا يمكن الوصول اليها بطريقة نقطة التدوين <code>(.)</code>، وانما تستخدم طريقة الاقواس المربعة<code> ("[]")</code> للوصول اليها او التعديل عليها.</p> + +<pre class="brush: js">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!</pre> + +<p dir="rtl">ابتداءا من ES2015، اصبح من الممكن : تعيين ال <code>prototype</code> أثناء إنشاء الكائن. استخدام التعيين المختصر ك <code>foo: foo</code>، تعيين الوظائف، استدعاء وظائف الكائن الاب بواسطة <code>super</code>، استخدام أسماء الخصائص المحوسبة مع التعبيرات.</p> + +<pre class="brush: js">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 +};</pre> + +<p dir="rtl">يبين المثال التالي الطرق الصحيحة لكيفية الوصول الى الكائن:</p> + +<pre class="brush: js">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 +</pre> + +<h3 dir="rtl" id="بيانات_التعبير_القياسي_الحرفي_-_RegExp_literals">بيانات التعبير القياسي الحرفي - RegExp literals</h3> + +<p dir="rtl"><code>Regex</code> هو نمط <code>(pattern)</code> محصور بين خطوط مائلة. يبين المثال التالي كيفبة التعبير عن بيانات التعبيرات القياسية الحرفية.</p> + +<pre class="brush: js">var re = /ab+c/;</pre> + +<h3 dir="rtl" id="بيانات_السلاسل_النصية_الحرفية_-_String_literals">بيانات السلاسل النصية الحرفية - String literals</h3> + +<p dir="rtl">السلسلة النصية، هي عبارة عن صفر أو أكثر من الأحرف محاطة بعلامات اقتباس اما منفردة<code> (')</code> أو مزدوجة <code>(")</code>. يبين المثال التالي كيفية استخدام كل من الاقتباسات المنفردة والمزدوجة:</p> + +<pre class="brush: js">'foo' +"bar" +'1234' +'one line \n another line' +"John's cat" +</pre> + +<p dir="rtl">من الممكن استدعاء وظائف الكائن <code>String</code> على السلاسل الحرفية. تقوم الجافاسكريبت بتحويل السلاسل الحرفية الى الكائن <code>String</code> بشكل مؤقت، بعدما تستدعى الوظائف، يتم استبعاد/تدمير الكائن <code>String</code> المؤقت، يمكنك ايضا استخدام الخاصية <code>String.length</code> مع القيم النصية:</p> + +<pre class="brush: js">console.log("John's cat".length) +// Will print the number of symbols in the string including whitespace. +// In this case, 10. +</pre> + +<p dir="rtl">ابتداءا من ES2015، يمكنك استخدام البيانات الحرفية كقوالب (template literals)، هذه القوالب النصية هي نفسها المستخدمة في Perl ،Python، الخ. يمكنك استخدامها لانشاء سلسلة حرفية <strong>واحدة</strong> على <strong>عدة</strong> اسطر دون الحاجة لاستخدام اسلوب التهريب (اضافة "\" في نهاية كل سطر). يمكن من خلالها ايضا إنشاء سلاسل حرفية جديدة اعتمادا على مجموعة متقطعة من السلاسل الحرفية المحددة سلفا وذالك من خلال هذه الصيغة الجديدة <strong><code>{ result }$</code></strong>، القيمة الممرة <code>result</code> هي القيمة التي ستظهر مع السلسلة الحرفية الجديدة، وهي عبارة عن مخرجات لاي تعليمة برمجية اخرى مثل <strong><code>(function, literal object, var...)</code></strong>. وايضا يمكنك من خلالها تجنب هجمات الحقن (injection attacks). </p> + +<pre class="brush: js">// 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);</pre> + +<p dir="rtl">من الأفضل استخدام السلاسل الحرفية قدر الامكان، الا اذا كنت في حاجة ماسة لاستخدام الكائن <code>String</code>، وقتها يمكنك استخدامه ايضا. راجع الكائن {{jsxref("String")}} للاطلاع على كافة التفاصيل.</p> + +<h3 dir="rtl" id="استخدام_الرموز_الخاصة_مع_السلاسل_النصية">استخدام الرموز الخاصة مع السلاسل النصية</h3> + +<p dir="rtl">بالإضافة إلى الرموز العادية، يمكنك أيضا إدراج الرموز الخاصة مع السلاسل الحرفية، كما هو موضح في المثال التالي.</p> + +<pre class="brush: js">"one line \n another line" +</pre> + +<p dir="rtl">يبين الجدول التالي، الرموز الخاصة التي يمكنك استخدامها مع السلاسل الحرفية لجافاسكريبت.</p> + +<table class="standard-table"> + <caption>جدول الرموز الخاصة لجافاسكريبت</caption> + <thead> + <tr> + <th scope="col">Character</th> + <th scope="col">Meaning</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>0\</code></td> + <td>Null Byte - بايت فارغ</td> + </tr> + <tr> + <td><code>b\</code></td> + <td>Backspace - مسافة للخلف</td> + </tr> + <tr> + <td><code>f\</code></td> + <td>Form feed - نموذج تغذية</td> + </tr> + <tr> + <td><code>n\</code></td> + <td>New line - سطر جديد</td> + </tr> + <tr> + <td><code>r\</code></td> + <td>Carriage return - حرف الإرجاع</td> + </tr> + <tr> + <td><code>t\</code></td> + <td>Tab - علامة التبويب</td> + </tr> + <tr> + <td><code>v\</code></td> + <td>Vertical tab - علامة التبويب العمودي</td> + </tr> + <tr> + <td><code>'\</code></td> + <td>single quote - علامة اقتباس مفردة</td> + </tr> + <tr> + <td><code>"\</code></td> + <td>Double quote - علامة اقتباس مزدوجة</td> + </tr> + <tr> + <td><code>\\</code></td> + <td>Backslash character - حرف الخط المائل العكسي</td> + </tr> + <tr> + <td><code><em>XXX</em>\</code></td> + <td dir="rtl"><span style="display: none;"> </span><span style="display: none;"> </span>الحرف مع Latin-1 لتحديد ترميز من خلال الرجوع الى الوراء بثلاثة ارقام ثمانية <em>XXX</em> ما بين 0 و 377. على سبيل المثال, 251\ هو تسلسل ثماني لرمز حقوق النشر.<span style="display: none;"> </span><span style="display: none;"> </span></td> + </tr> + <tr> + </tr> + <tr> + <td><code>x<em>XX</em>\</code></td> + <td dir="rtl">الحرف مع Latin-1 لتحديد ترميز من خلال ارقام نظام العد السداسي عشر <em>XX</em> بين 00 و FF. على سبيل المثال , xA9\ هو تسلسل نظام العد السداسي عشر لرمز حقوق النشر.</td> + </tr> + <tr> + </tr> + <tr> + <td><code>u<em>XXXX</em>\</code></td> + <td dir="rtl">الحرف Unicode محدد من خلال اربعة ارقام من نظام العد السداسي عشر <em>XXXX</em>. على سبيل المثال , u00A9\ هو تسلسل Unicode لرمز حقوق النشر. راجع {{anch("Unicode escape sequences")}}.</td> + </tr> + <tr> + <td><code>u<em>{XXXXX}</em>\</code></td> + <td dir="rtl">كود ال Unicode لتهريب النقطة، على سبيل المثال، u{2F804}\ هي تماما مثل تهريب اليونيكود نفسه uD87E\uDC04\</td> + </tr> + </tbody> +</table> + +<h4 dir="rtl" id="تهريب_الرموز_-_Escaping_characters">تهريب الرموز - Escaping characters</h4> + +<p dir="rtl">الرموز الخاصة التي لم ترد في الجدول اعلاه، تم تجاهلها، لانها اصبحت مستنكرة وينبغي تجنبها.</p> + +<p dir="rtl">يمكنك إدراج علامة اقتباس داخل سلسلة حرفية شرط ان يسبقها الرمز backslash. وتعرف هذه العملية بتهريب علامة الاقتباس. على سبيل المثال:</p> + +<pre class="brush: js">var quote = "He read \"The Cremation of Sam McGee\" by R.W. Service."; +console.log(quote); +</pre> + +<p dir="rtl">ونتيجة لذالك سنحصل على السلسلة الحرفية التالية:</p> + +<pre class="eval">He read "The Cremation of Sam McGee" by R.W. Service. +</pre> + +<p dir="rtl">لتضمين الرمز backslash نفسه في سلسلة حرفية، يجب عليك تهريبه ايضا ب backslash ثانية. وبالتالي سيتحول الى رمز عادي، قابل للقراءة. على سبيل المثال، لتعيين مسار الملف <code>c:\temp</code> الى سلسلة حرفية، استخدم التالي:</p> + +<pre class="brush: js">var home = "c:\\temp"; +</pre> + +<p dir="rtl">يمكنك ايضا تهريب فواصل الأسطر (line breaks)، وذالك من خلال اضافة backslash في نهاية كل جزء من اجزاء السلسلة الحرفية. الغرض هذه العملية هو الحد من طول التعليمة البرمجية فقط، ولهذا فالسلسلة الحرفية الجديدة، لن تتضمن اي من هذه السلاشات، وكذالك لن تتضمن اية فواصل الأسطر (<line break = <br) المخفية.</p> + +<pre class="brush: js">var str = "this string \ +is broken \ +across multiple\ +lines." +console.log(str); // this string is broken across multiplelines. +</pre> + +<p dir="rtl">على الرغم من ان جافاسكريبت لا تتوفر عل التعبير<strong><code> "heredoc"</code></strong> المستخدم في كثير من لغات البرمجة الاخرى <strong><code>(php مثلا)</code></strong> والذي يمكتك من التعامل مع السلاسل الحرفية بطريقة مميزة. الا انه من من الممكن تحقيق ما يشبهها من خلال التعبير التالي:</p> + +<pre class="brush: js">var poem = +"Roses are red,\n\ +Violets are blue.\n\ +I'm schizophrenic,\n\ +And so am I." +</pre> + +<h2 dir="rtl" id="للمزيد_من_المعلومات">للمزيد من المعلومات</h2> + +<p dir="rtl">تم التركيز في هذا الفصل على اساسيات صياغة الاعلانات والانواع. لدراسة المزيد حول JavaScript language constructs. راجع أيضا الفصول التالية في هذا الدليل:</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling">Control flow and error handling</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">Loops and iteration</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions">Functions</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators">Expressions and operators</a></li> +</ul> + +<p dir="rtl">في الفصل التالي ان شاء الله، سنلقي نظرة على كيفية السيطرة على تدفق البيانات ( control flow constructs ) ومعالجه الأخطاء.</p> +</div> + +<p>{{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}</p> 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 +--- +<div>{{jsSidebar("JavaScript Guide")}}</div> + +<p class="summary" dir="rtl"><span id="result_box" lang="ar"><span class="hps">دليل</span> <span class="hps">جافا سكريبت</span> <span class="hps">يظهر لك</span> <span class="hps">كيفية استخدام</span> <span class="hps"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript">جافا سكريبت </a>و</span><span>يعطيك</span> <span class="hps">لمحة عامة عن</span> <span class="hps">اللغة.</span> <span class="hps">إذا كنت تريد أن</span> <span class="hps">تبدأ</span> <span class="hps">مع</span> <span class="hps">جافا سكريبت</span> <span class="hps">أو البرمجة</span> <span class="hps">بشكل عام</span><span>، راجع</span> <span class="hps">المقالات في</span> <a href="https://developer.mozilla.org/en-US/Learn">منطقة التعليم</a><span class="hps">.</span> <span class="hps">إذا</span> <span class="hps">أردت الحصول على معلومات</span> <span class="hps">شاملة حول</span> <span class="hps">ميزة</span> <span class="hps">اللغة</span><span>،</span> <span class="hps">ألقي نظرة على</span> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference">مرجع جافا سكريبت</a><span>.</span></span></p> + +<h2 dir="rtl" id="الفصول"><span class="short_text" id="result_box" lang="ar"><span class="hps">الفصول</span></span></h2> + +<p dir="rtl"><span class="short_text" id="result_box" lang="ar"><span class="hps">هذا الدليل</span> مقسم <span class="hps">إلى عدة</span> <span class="hps">فصول:</span></span></p> + +<ul class="card-grid"> + <li dir="rtl"><a href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Guide/Introduction">مقدمة</a> + + <p><a href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Guide/Introduction#Where_to_find_JavaScript_information" lang="ar-AR">حول هذا الدليل</a><br> + <a href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Guide/Introduction#What_is_JavaScript" lang="ar-AR">حول جافا سكريبت</a><br> + <a href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_Java" lang="ar-AR">جافا سكريبت وجافا</a><br> + <a href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_the_ECMAScript_Specification" lang="ar-AR">ECMAScript</a><br> + <a href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Guide/Introduction#Getting_started_with_JavaScript" lang="ar-AR">أدوات</a><br> + <a href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Guide/Introduction#Hello_world" lang="ar-AR">مرحبا بالعالم</a></p> + </li> + <li dir="rtl"><a href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Guide/Grammar_and_types" lang="ar-AR">قواعد اللغة وأنواع البيانات</a> + <p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Basics" lang="ar-AR">الجملة الأساسية و التعليقات</a><br> + <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Declarations">الأعلانات</a><br> + <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_scope">نطاق متغير</a><br> + <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_hoisting">رفع متغير</a><br> + <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Data_structures_and_types">أنواع وهياكل البيانات</a><br> + <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Literals">الحرفية</a></p> + </li> + <li><span><a href="/ar/docs/Web/JavaScript/Guide/Control_flow_and_error_handling">بنى التحكم ومعالجة الأخطاء</a></span> + <p><code><a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#if...else_statement">if...else</a></code><br> + <code><a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#switch_statement">switch</a></code><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Exception_handling_statements"><code>try</code>/<code>catch</code>/<code>throw</code></a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Utilizing_Error_objects">Error objects</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Promises">Promises</a></p> + </li> + <li dir="rtl"><span><a href="/ar/docs/Web/JavaScript/Guide/Loops_and_iteration">الحلقات والتكرار</a></span> + <p><code><a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#for_statement">for</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#while_statement">while</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#do...while_statement">do...while</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#break_statement">break</a>/<a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#continue_statement">continue</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#for...in_statement">for..in</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement">for..of</a></code> </p> + </li> + <li dir="rtl"><span><a href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Guide/%D8%A7%D9%84%D8%AF%D9%88%D8%A7%D9%84">الدوال</a></span> + <p dir="ltr"><a href="/en-US/docs/Web/JavaScript/Guide/Functions#Defining_functions">Defining functions</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Calling_functions">إستدعاء الدوال</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Function_scope">نطاق الدالة</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Closures">Closures</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Using_the_arguments_object">Arguments</a> & <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Function_parameters">parameters</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Arrow_functions">Arrow functions</a></p> + </li> + <li><span><a href="/ar/docs/Web/JavaScript/Guide/Expressions_and_Operators">Expressions and operators</a></span> + <p><a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment_operators">Assignment</a> & <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Comparison_operators">Comparisons</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Arithmetic_operators">Arithmetic operators</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Bitwise_operators">Bitwise</a> & <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Logical_operators">logical operators</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Conditional_(ternary)_operator">Conditional (ternary) operator</a></p> + </li> + <li><span><a href="/ar/docs/Web/JavaScript/Guide/Numbers_and_dates">Numbers and dates</a></span><a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates#Numbers"> Number literals</a> + <p><a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates#Number_object"><code>Number</code> object</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates#Math_object"><code>Math</code> object</a><br> + <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates#Date_object"><code>Date</code> object</a></p> + </li> + <li><span><a href="/ar/docs/Web/JavaScript/Guide/Text_formatting">تنسيق النص</a></span> + <p><a href="/en-US/docs/Web/JavaScript/Guide/Text_formatting#String_literals">String literals</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Text_formatting#String_objects"><code>String</code> object</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Text_formatting#Multi-line_template_strings">Template strings</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Text_formatting#Internationalization">Internationalization</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">Regular Expressions</a></p> + </li> + <li><span><a href="/ar/docs/Web/JavaScript/Guide/Indexed_collections">Indexed collections</a></span> + <p><a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections#Array_object">Arrays</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections#Array_comprehensions">Array comprehensions</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections#Typed_Arrays">Typed arrays</a></p> + </li> + <li><span><a href="/ar/docs/Web/JavaScript/Guide/Keyed_collections">Keyed collections</a></span> + <p><code><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections#Map_object">Map</a></code><br> + <code><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections#WeakMap_object">WeakMap</a></code><br> + <code><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections#Set_object">Set</a></code><br> + <code><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections#WeakSet_object">WeakSet</a></code></p> + </li> + <li><span><a href="/ar/docs/Web/JavaScript/Guide/Working_with_Objects">التعامل مع الكائنات</a></span> + <p><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties">Objects and properties</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Creating_new_objects">Creating objects</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_methods">Defining methods</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">Getter and setter</a></p> + </li> + <li><span><a href="/ar/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">Details of the object model</a></span> + <p><a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Class-based_vs._prototype-based_languages">Prototype-based OOP</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Creating_the_hierarchy">Creating object hierarchies</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Property_inheritance_revisited">Inheritance</a></p> + </li> +</ul> + +<ul class="card-grid"> + <li><span><a href="/ar/docs/Web/JavaScript/Guide/Iterators_and_Generators">Iterators and generators</a></span> + + <p><a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterators">Iterators</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterables">Iterables</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators#Generators">Generators</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators#Generator_comprehensions">Generator comprehensions</a></p> + </li> + <li><span><a href="/ar/docs/Web/JavaScript/Guide/Meta_programming">Meta programming</a></span> + <p><code><a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming#Proxies">Proxy</a></code><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming#Handlers_and_traps">Handlers and traps</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming#Revocable_Proxy">Revocable Proxy</a><br> + <code><a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming#Reflection">Reflect</a></code></p> + </li> +</ul> + +<p>{{Next("Web/JavaScript/Guide/Introduction")}}</p> 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 +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}</div> + +<p class="summary" dir="rtl"><span id="result_box" lang="ar"><span class="hps">يقوم</span> <span class="hps">هذا الفصل بتقديم </span><span class="hps">جافا سكريبت و</span><span>يناقش</span> <span class="hps">بعض</span> <span class="hps">مفاهيمها</span> <span class="hps">الأساسية.</span></span></p> + +<h2 dir="rtl" id="ما_يجب_أن_تعرفه_مسبقا"><span class="short_text" id="result_box" lang="ar"><span class="hps">ما يجب أن تعرفه مسبقا</span></span></h2> + +<div style="font-size: 15; font-family: 'tahoma';"> +<p dir="rtl"><span id="result_box" lang="ar"><span class="hps">يفترض</span> <span class="hps">أن تكون لديك</span> <span class="hps">خلفية حول المكونات</span><span class="hps"> التالية</span><span>:</span></span></p> + +<ul> + <li dir="rtl">معرفة عامة بشبكة الأنترنت و شبكة الويب العالمية ({{Glossary("WWW")}}).</li> + <li dir="rtl"><span id="result_box" lang="ar"><span class="hps">معرفة جيدة</span> <span class="hps">ب</span><span class="hps">لغة الترميز النص</span> <span class="atn hps">التشعبي </span></span>({{Glossary("HTML")}}).</li> + <li dir="rtl">بعض الخبرة في البرمجة. إذا كنت جديدا على البرمجة، يمكنك الأطلاع على أحد الدروس الموجودة على الصفحة الرئيسية حول <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript">جافا سكريبت</a>.</li> +</ul> + +<h2 dir="rtl" id="أين_تجد_المعلومات_عن_الجافا_سكربيت">أين تجد المعلومات عن الجافا سكربيت</h2> + +<p dir="rtl">وثائق جافا سكربيت على MDN تشتمل على مايلي:</p> + +<ul> + <li dir="rtl"><span id="result_box" lang="ar"><a href="https://developer.mozilla.org/en-US/Learn">تعلم الانترنت</a> <span class="hps">يقدم معلومات</span> <span class="hps">للمبتدئين و</span><span>يقدم</span> <span class="hps">المفاهيم</span> <span class="hps">الأساسية للبرمجة</span> <span class="hps">والإنترنت</span></span>.</li> + <li dir="rtl"><span id="result_box" lang="ar"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide">دليل جافا سكريبت </a><span class="atn hps">(</span><span>هذا الدليل)</span> <span class="hps">يقدم لمحة عامة</span> <span class="hps">عن</span> <span class="hps">لغة</span> <span class="hps">جافا سكريبت و</span><span>كائناتها</span><span>.</span></span></li> + <li dir="rtl"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference">مرجع جافا سكربيت </a> <span class="short_text" id="result_box" lang="ar"><span class="hps">يوفر</span> <span class="hps">مادة مرجعية</span> <span class="hps">مفصلة</span> <span class="hps">لل</span><span>جافا سكريبت</span><span>.</span></span></li> +</ul> + +<p dir="rtl"><span id="result_box" lang="ar"><span class="hps">إذا</span> <span class="hps">كنت جديدا على</span> <span class="hps">جافا سكريبت</span><span>، </span></span>أبدء مع المقالات في <a href="https://developer.mozilla.org/en-US/Learn">منطقة التعلم</a> و <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide">دليل جافا سكريبت</a>. حتى تصبح ملما بالأساسيات، ومن ثم يمكنك استخدام <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference">مرجع جافا سكربيت</a> للحصول على مزيد من التفاصيل حول الكائنات الفردية والبيانات.</p> + +<h2 dir="rtl" id="ما_هي_جافاسكريبت؟"><span class="short_text" id="result_box" lang="ar"><span class="hps">ما هي</span> جافا<span class="hps">سكريبت؟</span></span></h2> + +<p dir="rtl"><span id="result_box" lang="ar"><span class="hps">الجافاسكريبت</span> <span class="hps">هي لغة برمجة كائنية التوجة ومتعددة المنصات</span><span>. هي</span> <span class="hps">لغة</span> <span class="hps">صغيرة وخفيفة الوزن</span><span>.</span> <span class="hps">داخل</span> <span class="hps">بيئة</span> <span class="hps">المضيف (على</span> <span class="hps">سبيل المثال،</span> <span class="hps">متصفح ويب</span><span>)</span><span>،</span></span><span id="result_box" lang="ar"><span> في هذه البيئة</span></span><span lang="ar"><span> يمكنك استخدامها على الكائنات</span></span><span lang="ar"><span class="hps">.</span></span><span lang="ar"><span class="hps"> </span></span></p> + +<p dir="rtl">تحتوي جافاسكريبت على مكتبة قياسية من الكائنات، مثل <code>Array</code>، <code>Date</code>، <code>وMath</code>، ومجموعة أساسية من العناصر اللغوية مثل العوامل، بنى التحكم، والتصريحات. جوهر جافا سكريبت هو قابليتها للتعامل مع مجموعة متنوعة من الكائنات التي تكون مكملة مع كائنات إضافية. على سبيل المثال:</p> + +<ul> + <li dir="rtl">من جانب العميل جافا سكريبت تمتد إلى صميم اللغة الأساسية من خلال تمكين الكائنات من السيطرة على المتصفح وعلى نموذج الكائن (DOM). على سبيل المثال،<span id="result_box" lang="ar"><span> تتيح لك إضافات اللغة من جانب العميل وضع العناصر في النموذج </span></span> HTML <span lang="ar"><span>، والرد على الأحداث التي يتم تشغيلها بواسطة المستخدم (النقرات، وإدخال النموذج، وإجراءات التصفح، وما إلى ذلك).</span></span></li> + <li dir="rtl">من جانب الخادم جافا سكريبت تمتد إلى صميم اللغة الأساسية من خلال توفير الأشياء ذات الصلة إلى تشغيل الجافا سكريبت على الخادم. على سبيل المثال، الملحقات من جانب الخادم، تسمح للتطبيق الخاص بك، بالتواصل مع قاعدة البيانات، <span id="result_box" lang="ar"><span>والتعامل مع الملفات والتبديل من تطبيق إلى آخر وهكذا</span></span>.</li> +</ul> + +<h2 dir="rtl" id="JavaScript_and_Java" name="JavaScript_and_Java"><span class="short_text" id="result_box" lang="ar"><span class="hps">جافا سكريبت وجافا</span></span></h2> + +<p dir="rtl"><span id="result_box" lang="ar"><span>جافا سكريبت وجافا متشابهتان في بعض النواحي، ولكنها تختلف اختلافا جوهريا عن بعضها البعض في نواح اخرى.</span> <span>لغة جافا سكريبت تبدو وكأنها جافا، لكن لا يتم كتابتها بشكل ثابت، وطباعة جافا سكريبت ضعيفة (في حين أنها قوية في جافا).</span> <span>بناء الجملة في تعبيرات جافا سكريبت متشابهة جدا لجافا، في اصطلاحات التسمية والبنى الشرطية على سبيل المثال، وهذا احد الأسباب التي ادت الى إعادة تسمية لغة</span></span> LiveScript إلى JavaScript.</p> + +<p dir="rtl"><span id="result_box" lang="ar"><span>على عكس جافا التي لها نظام المترجم الزمني </span></span> compile-time system <span lang="ar"><span> للاعلان عن الكلاسات، فجافا سكريبت تدعم نظام وقت التشغيل </span></span> runtime system <span lang="ar"><span> ولها بعض أنواع البيانات لتمثيل الأرقام، القيم المنطقية، والسلاسل النصية (و أمور أخرى).</span> <span>تعتمد جافاسكريبت على النموذج الأولي </span></span> prototype-based object model <span lang="ar"><span>لعمل رابط بين الكائنات بينما تستخدم جافا نموذجا أكثر شيوعا يستند إلى الكلاسات </span></span> class-based object model. <span lang="ar"> <span>النماذج-البروتوتايبس تسمح بخلق ديناميكية عالية فيما يخص الوراثة.</span> <span>وبالتالي، فإن الخصائص التي يرثها كائن ما، قد تختلف مع مرور الوقت.</span> </span> <span id="result_box" lang="ar"><span>كما تدعم جافاسكريبت الوظائف دون متطلبات إعلانية خاصة.</span> <span>الوظائف يمكن أن تكون خصائص لكائن،</span></span></p> + +<p dir="rtl"><span id="result_box" lang="ar"><span>جافا سكريبت هي لغة "حرة" مقارنة بجافا.</span> لذا ف<span>ليس من الضروري، الاعلان عن نوع المتغيرات او الدوال او حتى الكلاسات.</span> و<span>ليس من الضروري معرفة ما إذا كانت الدالة/الوظيفة عامة أو خاصة أو محمية، ولا توجد واجهات لتنفيذها.</span> </span><span id="result_box" lang="ar"> <span>ولا يتم كتابة نوع المتغيرات والبارامترز والوظائف بشكل صريح.</span></span></p> + +<p dir="rtl"><span id="result_box" lang="ar"><span>جافا هي لغة برمجة، تستخدم الكلاسات، مصممة للتشغيل بسرعة وضمان أمن الكتابة.</span> <span>وهذا يعني، على سبيل المثال، أنه لا يمكن تحويل عدد صحيح إلى كائن أو أنه لا يمكنك </span></span> <span id="result_box" lang="ar"><span>الوصول إلى الذاكرة الخاصة </span></span> <span lang="ar"><span> عن طريق تحريف </span></span> Java bytecodes<span lang="ar"><span>.</span> <span>نموذج الكلاسات المستخدم من قبل جافا، يعني أن البرنامج يتكون فقط من الكلاسات والوظائف.</span> <span>هذا النوع من الميراث القائم على الكلاسات، مرتبط بالكتابة القوية، ينتج هياكل مقترنة بقوة وتسلسلات هرمية للكائن.</span> <span>لهذه الأسباب، يمكن أن تظهر جافا كلغة أكثر تعقيدا من جافا سكريبت.</span></span></p> + +<p dir="rtl"><span id="result_box" lang="ar"><span>على عكس جافا، فجافاسكريبت سليلة من لغات اخرى أخف وزنا، وديناميكية مثل </span></span> HyperTalk و dBASE. <span lang="ar"> <span>وتستهدف لغات البرمجة النصية هذه، جمهورا أكبر مع بنية أبسط، وخصائص محلية متخصصة، والحد الأدنى من المتطلبات المسبقة لإنشاء الكائنات.</span></span></p> + +<table class="standard-table"> + <caption> + <p dir="rtl"><span class="short_text" id="result_box" lang="ar"><span class="hps">جافا سكريبت</span> <span class="hps">مقارنة مع</span> <span class="hps">جافا</span></span></p> + </caption> + <thead> + <tr> + <th dir="rtl" scope="col">جافا سكربيت</th> + <th dir="rtl" scope="col">جافا</th> + </tr> + </thead> + <tbody> + <tr> + <td dir="rtl"><span id="result_box" lang="ar"><span>تعتمد على رابط البروتوتايب.</span> <span>لا يوجد تمييز بين أنواع الكائنات.</span> <span>تتم الوراثة من خلال آلية البروتوتايب، ويمكن إضافة الخصائص والوظائف إلى أي كائن حيوي</span></span></td> + <td dir="rtl">تعتمد على الكلاسات (Class-based). <span id="result_box" lang="ar"><span>وتنقسم الكائنات إلى فئات وحالات، يتم الإرث من خلال التسلسل الهرمي للكلاسات.</span> <span>لا يمكن إضافة الكلاسات والحالات ديناميكيا إلى الخصائص والوظائف.</span></span></td> + </tr> + <tr> + <td><span id="result_box" lang="ar"><span class="hps">لا يتم الاعلان عن</span> <span class="hps">نوع البيانات</span> <span class="atn hps">المتغيرة (</span><span>الكتابة</span> <span class="hps">ديناميكية</span><span>)</span><span>.</span></span></td> + <td dir="rtl"><span class="short_text" id="result_box" lang="ar"><span class="hps">يجب تعريف</span> <span class="hps">أنواع</span> <span class="hps">البيانات المتغيرة</span> <span class="atn hps">(</span><span>الكتابة</span> <span class="hps">ثابتة</span><span>)</span><span>.</span></span></td> + </tr> + <tr> + <td><span class="short_text" id="result_box" lang="ar"><span class="hps">لا يمكن الكتابة</span> <span class="hps">تلقائيا</span> <span class="hps">إلى القرص</span> <span class="hps">الثابت.</span></span></td> + <td> + <div id="gt-src-tools"> + <div id="gt-src-tools-l"> + <div id="gt-src-tools"> + <div> </div> + + <div id="tts_button"><span class="short_text" id="result_box" lang="ar"><span class="hps">يمكن الكتابة</span> <span class="hps">تلقائيا</span> <span class="hps">إلى القرص</span> <span class="hps">الثابت.</span></span></div> + </div> + </div> + </div> + + <div id="gt-input-tool" style="display: inline-block;"> + <div> </div> + </div> + </td> + </tr> + </tbody> +</table> + +<p><span id="result_box" lang="ar"><span class="hps">ل</span><span>مزيد من المعلومات حول</span> <span class="hps">الاختلافات بين</span> <span class="hps">جافا سكريبت وجافا</span><span>، انظر</span> <span class="hps">الفصل</span> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">تفاصيل عن الكائن</a><span>.</span></span></p> + +<h2 id="JavaScript_and_the_ECMAScript_Specification" name="JavaScript_and_the_ECMAScript_Specification"><span class="short_text" id="result_box" lang="ar"><span class="hps">جافا سكريبت وال</span><span>مواصفات</span> <span class="hps">ECMAScript</span></span></h2> + +<p dir="rtl"> جافا سكريبت موحدة عن طريق <a href="http://www.ecma-international.org/">Ecma International</a> - الجمعية الأوروبية لتوحيد النظم المعلوماتية والاتصالات (ECMA اختصارا لجمعية مصنعي الكمبيوتر الأوروبية تاريخيا) والتي تنص على لغة برمجة موحدة، <span id="result_box" lang="ar"><span>هذا الإصدار القياسي من جافا سكريبت، يسمى</span></span> ECMAScript. هذا الاصدار، <span id="result_box" lang="ar"><span>يتصرف بشكل متطابق في جميع التطبيقات المتوافقة مع المعايير.</span></span> يمكن للشركات استخدام هذه اللغة القياسية لتطوير طريقة تنفيذ جافا سكريبت. يتم توثيق ECMAScript القياسية مع ECMA-262. انظر رؤية <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript">جديد جافا سكريبت</a> لمعرفة المزيد عن الاصدارات المختلفة من جافا سكريبت وطبعات مختلفة من مواصفات ECMAScript.</p> + +<p dir="rtl"><span id="result_box" lang="ar"><span>كما إعتُمِدت</span></span> ECMA-262 <span id="result_box" lang="ar"><span>من قبل </span></span> <a href="http://www.iso.ch/">ISO</a> <span id="result_box" lang="ar"><span>المنظمة الدولية للتوحيد القياسي ك </span></span>ISO-16262. كما يمكنك أيضا العثور على المواصفات على <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">موقع Ecma International</a>. مواصفات ECMAScript <span id="result_box" lang="ar"><span>لا تصف نموذج الكائن المستند</span></span> (DOM)، <span id="result_box" lang="ar"><span>الذي يتم توحيده من قبل</span></span> <a href="http://www.w3.org/">اتحاد شبكة الويب العالمية (W3C)</a>. وDOM يحدد الطريقة التي تعرض بها كائنات المستند HTML في السكريبت الخاص بك. للحصول على فكرة أفضل حول التقنيات المختلفة التي يتم استخدامها عند البرمجة مع جافا سكريبت، راجع مقالة <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">جافا سكريبت نظرة عامة التكنولوجيات</a>.</p> + +<h3 id="JavaScript_Documentation_versus_the_ECMAScript_Specification" name="JavaScript_Documentation_versus_the_ECMAScript_Specification"><span class="short_text" id="result_box" lang="ar"><span class="hps">وثائق</span> <span class="hps">جافا سكريبت</span> <span class="hps">مقابل</span> <span class="hps">المواصفات</span> <span class="hps">ECMAScript</span></span></h3> + +<div id="gt-src-tools"> +<div dir="rtl" style="zoom: 1;"><span id="result_box" lang="ar"><span class="hps">مواصفات</span> <span class="hps">ECMAScript</span> <span class="hps">هي</span> <span class="hps">مجموعة من المتطلبات</span> <span class="hps">لتنفيذ</span> <span class="hps">ECMAScript</span><span>.</span> <span class="hps">من المفيد</span> <span class="hps">إذا كنت ترغب في</span> <span class="hps">تنفيذ</span> <span class="hps">ميزات اللغة المتوافقة</span> </span><span lang="ar"> مع <span class="hps">المعايير القياسية في </span><span class="hps">تنفيذ</span> <span class="hps">ECMAScript</span> <span class="hps"> أو</span> <span class="hps">في احدى المحركات</span> <span class="atn hps">(ك</span> <span class="hps">SpiderMonkey</span> <span class="hps">في فايرفوكس</span><span>،</span> <span class="hps">أو</span> <span class="hps">V8</span> <span class="hps">في</span> <span class="hps">كروم)</span><span>.</span></span></div> + +<div dir="rtl" style="zoom: 1;"> </div> +</div> + +<p dir="rtl"><span id="result_box" lang="ar"><span>ليس المقصود من مواصفات ال</span></span> ECMAScript هو <span id="result_box" lang="ar"><span>دعم برمجة السكريبت</span></span>. <span id="result_box" lang="ar"><span>توفر وثائق جافا سكريبت معلومات لكتابة النصوص البرمجية.</span></span></p> + +<p dir="rtl"><span id="result_box" lang="ar"><span class="hps">يستخدم</span> <span class="hps">مواصفات</span> <span class="hps">ECMAScript</span> </span> <span id="result_box" lang="ar"><span>أحيانا مصطلحات وصياغات قد تبدو غريبة لمطور جافا سكريبت</span></span><span lang="ar"><span>.</span></span> <span id="result_box" lang="ar"><span>على الرغم من أن وصف اللغة يختلف بين</span></span> <span lang="ar"> <span class="hps">ECMAScript</span><span>، </span></span> <span id="result_box" lang="ar"><span>وبين وثائق جافا سكريبت، اللغة نفسها لا تزال هي نفسها.</span> <span>تدعم جافاسكريبت جميع الميزات المميزة في مواصفات</span></span> <span lang="ar"> <span class="hps">ECMAScript</span><span>.</span></span></p> + +<p dir="rtl"><span id="result_box" lang="ar"><span>تصف وثائق جافا سكريبت جوانب اللغة التي يمكن استخدامها من قبل مطوري جافا سكريبت.</span></span></p> + +<h2 id="الشروع_في_العمل_مع_جافا_سكريبت"><span class="short_text" id="result_box" lang="ar"><span class="hps">الشروع في العمل</span> <span class="hps">مع</span> <span class="hps">جافا سكريبت</span></span></h2> + +<p dir="rtl"><span id="result_box" lang="ar"><span class="hps">الشروع في العمل</span> <span class="hps">مع</span> <span class="hps">جافا سكريبت</span> <span class="hps">سهل</span><span>:</span> <span class="hps">كل ما تحتاجه</span> <span class="hps">هو متصفح</span> <span class="hps">ويب</span> <span class="hps">حديث</span><span>.</span> </span> <span id="result_box" lang="ar"> <span>يتضمن هذا الدليل بعض ميزات جافا سكريبت المتوفرة فقط في أحدث إصدارات فايرفوكس، لذا يوصى باستخدام احدث إصدار من فايرفوكس لتجربة الأمثلة المقدمة.</span></span></p> + +<p dir="rtl"><span id="result_box" lang="ar"><span>هناك أداتان هما جزءا من فايرفوكس، وهي مفيدة لتجربة واختبار شفرة جافا سكريبت، هما: وحدة تحكم الويب</span></span> Console <span lang="ar"><span> وقائمة جافاسكريبت </span></span> Scratchpad <span lang="ar"><span>.</span></span></p> + +<h3 id="وحدة_تحكم_ويب"><span class="short_text" id="result_box" lang="ar"><span class="hps">وحدة تحكم ويب</span></span></h3> + +<p><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console">وحدة تحكم ويب</a> يعرض لك معلومات عن صفحة الويب التي تم تحميلها حاليا، ويشمل أيضا <a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console#The_command_line_interpreter">سطر الأوامر</a> الذي يمكنك استخدامه لتنفيذ اكواد الجافا سكربت في الصفحة الحالية.</p> + +<p dir="rtl"><span id="result_box" lang="ar"><span class="hps">لفتح</span> <span class="hps">وحدة تحكم الويب</span> <span class="atn hps">(</span></span>Ctrl+Shift+K<span lang="ar"><span class="hps">)</span><span class="atn"> او F12، </span> <span class="hps">في وحدة التحكم،</span> <span class="hps">هناك</span> <span class="hps">سطر الأوامر</span> <span class="hps">الذي يمكنك استخدامه</span> لادخال اكواد <span class="hps">جافا سكريبت،</span> <span class="hps">و</span><span>يظهر</span> <span class="hps">الناتج في</span> <span class="hps">الجزء</span> <span class="hps">أعلاه:</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7363/web-console-commandline.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h3 id="المسودة"><span class="short_text" id="result_box" lang="ar"><span class="hps">المسودة</span></span></h3> + +<p dir="rtl">تعتبر وحدة تحكم الويب كبيرة بالنسبة لتنفيذ سطر واحدة من جافا سكريبت، ولكن على الرغم من أنه يمكن تنفيذ عدة أسطر، الا انها ليست مريحة جدا، خصوصا، في تنفيذ التعليمات البرمجية الكبيرة نوعا ما والمعقدة، لذالك ننصح باستخدام المسودة Scratchpad كأداة أفضل.</p> + +<p dir="rtl"><span id="result_box" lang="ar"><span class="hps">لفتح</span> <span class="hps">المسودة</span> <span class="atn hps">(</span></span>Shift+F4<span lang="ar"><span class="hps">)</span><span class="atn">، او حدد "</span><span>المسودة</span><span>" من القائمة اختر</span> <span class="hps">"المطور</span><span>"، وهي</span> <span class="hps">ضمن القائمة</span> <span class="hps">في فايرفوكس</span><span>.</span> <span class="hps">ستفتح</span> <span class="hps">في نافذة منفصلة</span>، <span class="hps">يمكنك استخدامها</span> <span class="hps">لكتابة</span> <span class="hps">وتنفيذ</span> <span class="hps">جافا سكريبت</span> <span class="hps">في المتصفح</span><span>.</span> <span class="hps">يمكنك</span> <span class="hps">أيضا حفظ</span> <span class="hps">النصوص</span> <span class="hps">إلى القرص</span> <span class="hps">وتحميلها</span> <span class="hps">من القرص.</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7365/scratchpad.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h3 id="مرحبا_بالعالم"><span class="short_text" id="result_box" lang="ar"><span class="hps">مرحبا بالعالم</span></span></h3> + +<p dir="rtl">لتبدأ بكتابة جافا سكريبت، افتح المسودة واكتب "مرحبا بالعالم". كما يلي:</p> + +<pre class="brush: js">function greetMe(yourName) { + alert("Hello " + yourName); +} + +greetMe("World"); +</pre> + +<p dir="rtl">من قائمة "تنفيذ" واضغط على تنفيذ او Ctrl + R لمشاهدة ناتج الكود في المتصفح الخاص بك!</p> + +<p dir="rtl"><span id="result_box" lang="ar"><span>في الصفحات التالية، سيعرض هذا الدليل بناء الجملة في لغة جافا سكريبت وميزاتها.</span> <span>وسوف تكون ان شاء الله قادرا على كتابة تطبيقات أكثر تعقيدا.</span></span></p> +</div> + +<p>{{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}</p> 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 +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</div> + +<p class="summary" dir="rtl">الحلقات، وسيلة سريعة وسهلة لفعل شيئا ما، مرارا <strong>وتكرارا</strong>. يقدم هذا الفصل من <a href="/en-US/docs/Web/JavaScript/Guide">دليل الجافاسكريب</a> مختلف عبارات التكرار المتاحة لجافا سكريبت.</p> + +<div style="font-size: 15; font-family: 'tahoma';"> +<p dir="rtl">يمكنك التفكير في الحلقة كنسخة من لعبة في الكمبيوتر، حيث ستقوم بتحريك السوبر ماريو X من الخطوات الى الامام، على سبيل المثال، امر التحريك، " تَحرًك ب 5 خطوات إلى الامام". يمكن تطبيق مثل هذه الفكرة باستخدام الحلقة:</p> + +<pre class="brush: js">var step; +for (step = 0; step < 5; step++) { + // Runs 5 times, with values of step 0 through 4. + console.log('Walking east one step'); +} +</pre> + +<p dir="rtl">هناك أنواع مختلفة من الحلقات، والمهم هو انها تقوم بشئ واحد: وهو <strong>تكرار</strong> بعض الاجراءات عدة مرات. الحلقات بمختلف انواعها، تقدم طرقا مختلفة لتحديد نقطة البداية ونقطة النهاية للحلقة. يمكن استخدام نوع معين من الحلقات، لحل نوع معين من المشاكل.</p> + +<p dir="rtl">الحلقات المتوفرة في جافاسكريبت وهي :</p> + +<ul> + <li>{{anch("for statement")}}</li> + <li>{{anch("do...while statement")}}</li> + <li>{{anch("while statement")}}</li> + <li>{{anch("labeled statement")}}</li> + <li>{{anch("break statement")}}</li> + <li>{{anch("continue statement")}}</li> + <li>{{anch("for...in statement")}}</li> + <li>{{anch("for...of statement")}}</li> +</ul> + +<h2 dir="rtl" id="الحلقة_for"><code>الحلقة </code><code>for</code></h2> + +<p dir="rtl">الحلقة {{jsxref("statements/for","for loop")}} لاتتوقف عن التكرار حتى يتم تحقق الشرط المحدد ب <code>false</code>. الحلقة <strong><code>for </code></strong>لجافاسكريبت مشابه للحلقة <strong><code>for </code></strong>الخاصة ب Java و C. يوضح الشكل التالي التركيبة الاساسية للحلقة <strong><code>for</code></strong>:</p> + +<pre class="syntaxbox">for ([initialExpression]; [condition]; [incrementExpression]) + statement +</pre> + +<p dir="rtl">عند تنفيذ الحلقة، يحدث ما يلي:</p> + +<ol dir="rtl"> + <li> <strong><code>initialExpression </code></strong>: التعبير المستخدم لتهيئة الحلقة، سيتم تنفيذه، إذا كان موجوداً. يقوم هذا التعبير بتهيئة عداد حلقة واحدة أو أكثر، من الممكن استخدام تعبيرات أكثر تعقيدا إذا لزم الأمر. يمكن ايضا أن يتم تعريف المتغيرات في هذا التعبير.</li> + <li><strong><code>condition </code></strong>: تعبير الشرط الذي تتمحور حوله الحلقة. اذا كانت قيمته تساوي <code>true</code>، ستنفذ الحلقة من جديد، عندما ستصبح قيمته تساوي <code>false</code>، ستنتهي الحلقة، إذا تم حذف تعبير الشرط تماما. سيعتبر الشرط صحيحاً <code>true</code>.</li> + <li><strong><code>statement </code></strong>: التعليمة البرمجية التي ستنفذ ما دام الشرط يساوي <code>true</code>. لتنفيذ تعليمات برمجية متعددة، استخد التعليمة بلوك ({ ... }).</li> + <li><strong><code>incrementExpression </code></strong>: تحديث التعبير، إذا كان موجودا، ينفذ، ويعود التحكم إلى الخطوة رقم 2.</li> +</ol> + +<h3 dir="rtl" id="مثال"><strong>مثال</strong></h3> + +<p dir="rtl">تحتوي الدالة التالية على التعليمة <code><strong>for </strong></code>التي تقوم باحصاء عدد العناصر <code>options </code>المحددة في العنصر {{HTMLElement("select")}}. التعليمة <code><strong>for </strong></code>تعلن عن المتغير <strong><code>i</code></strong> وتقوم بتهيئته ب 0. وتتحقق من ان <strong><code>i</code></strong> اصغر من عدد العناصر في العنصر<code> <select>.</code> ستنفذ التعليمة <code>if</code> بنجاح، وستزيد قيمة <strong><code>i</code></strong> بواحد ما دامت الحلقة مستمرة بالتكرار.</p> + +<pre class="brush: html"><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> + +</pre> + +<h2 dir="rtl" id="الحلقة_do...while"><code>الحلقة </code><code>do...while</code></h2> + +<p dir="rtl">الحلقة {{jsxref("statements/do...while", "do...while")}} لاتتوقف عن التكرار حتى يتم تحقق الشرط المحدد ب <code>false</code> . يوضح الشكل التالي التركيبة الاساسية للحلقة <code>do...while</code></p> + +<pre class="syntaxbox">do + statement +while (condition); +</pre> + +<p dir="rtl"><strong><code>statement</code></strong>: تنفذ مرة واحدة قبل أن تبدا عملية التحقق من الشرط. عند البدا بعملية التحقق، اذا كان الشرط <strong><code>(condition) </code></strong>يساوي <code>true</code>، تنفذ التعليمة البرمجية (statement) مرة اخرى. بعد انهاء التنفيذ، يتم التحقق مرة اخرى من الشرط. الى ان يصبح الشرط يساوي <code>false</code>، عندها يتوقف التنفيذ ويتم انتقال التحكم الى التعليمة البرمجية التي تلي <strong><code>do...while</code></strong>. لتنفيذ تعليمات برمجية متعددة، استخدم التعليمة بلوك ({ ... }).</p> + +<h3 dir="rtl" id="مثال_2"><strong>مثال</strong></h3> + +<p dir="rtl">في المثال التالي، الحلقة <strong><code>do</code></strong>، تنفذ مرة واحدة على الاقل وتستمر بالتكرار حتى يصبح <strong><code>i</code></strong> ليس أقل من 5.</p> + +<pre class="brush: js">var i = 0; +do { + i += 1; + console.log(i); +} while (i < 5);</pre> + +<h2 dir="rtl" id="الحلقة_while"><code>الحلقة </code> <code>while</code></h2> + +<p dir="rtl">الحلقة {{jsxref("statements/while","while")}} ستستمر بتنفيذ التعليمة البرمجية المرتبطة بها طالما الشرط المحدد يساوي true. يوضح الشكل التالي التركيبة الاساسية للحلقة <strong><code>while</code></strong></p> + +<pre class="syntaxbox">while (condition) + statement +</pre> + +<p dir="rtl">عندما سيصبح الشرط يساوي <code>false</code>، ستتوقف التعليمة البرمجية (<code>statement</code>) المرتبطة بالحلقة عن التنفيذ وسينتقل التحكم الى التعليمة البرمجية التي تلي الحلقة <strong><code>while</code></strong>.</p> + +<p dir="rtl">يتم التحقق من شرط الاختبار قبل تنفيذ <strong><code> statement</code></strong>. كلما عاد الشرط ب <code>true</code>، ستنفذ <code>statement </code>ويتم الرجوع الى الشرط للتحقق منه مرة اخرى. عندما سيعود الشرط ب <code>false </code>سيتوقف التنفيذ وسينتقل التحكم الى التعليمة البرمجية التي تلي الحلقة <code>while</code>. لتنفيذ تعليمات برمجية متعددة، استخدم التعليمة بلوك ({ ... }).</p> + +<h3 dir="rtl" id="المثال_الاول"><strong>المثال الاول</strong></h3> + +<p dir="rtl">الحلقة <code>while</code> ستستمر بالتكرار طالما <code>n </code>أقل من ثلاثة:</p> + +<pre class="brush: js">var n = 0; +var x = 0; +while (n < 3) { + n++; + x += n; +} +</pre> + +<p dir="rtl">مع كل تكرار، ستقوم الحلقة بالزيادات على n وتضيف قيمته إلى x. لذالك x و n ستمتلك القيم التالية:</p> + +<ul dir="rtl"> + <li>بعد المرور الأول: n = 1 و x = 1</li> + <li>بعد المرور الثاني: n = 2 و x = 3</li> + <li>بعد المرور الثالث: n = 3 و x = 6</li> +</ul> + +<p dir="rtl">بعد الانتهاء من المرور الثالث، الشرط <code>( n < 3 </code>) لم يعد يساوي <code>true</code>، لذالك ستنتهي الحلقة.</p> + +<h3 dir="rtl" id="المثال_الثاني">المثال الثاني</h3> + +<p dir="rtl">لتجنب تكرار الحلقة الى ما لا نهاية. تأكد من أن الشرط في الحلقة، سيصبح في نهاية المطاف ب <code>false</code>، التعليمة البرمجية في الحلقة <code>while </code>التالية، لن تتوقف عن التنفيذ بسبب ان الشرط لن يصبح ب <code>false</code>:</p> + +<pre class="brush: js">while (true) { + console.log('Hello, world!'); +}</pre> + +<div class="warning" dir="rtl"> +<p><strong>تحذير</strong>: استمرار تكرار الحلقة الى ما لا نهاية سيتسبب في توقف المتصفحات عن العمل.</p> +</div> + +<h2 dir="rtl" id="التعليمة_label"><code>التعليمة label </code></h2> + +<p dir="rtl">تستخدم التعليمة {{jsxref("statements/label","label")}} لتوفير معرف <strong><code>(id)</code></strong> للتعليمة البرمجية المراد الرجوع اليها من موقع آخر في البرنامج. على سبيل المثال، يمكنك استخدام <code>label </code>لتحديد حلقة، ثم استخدام التعليمة <code><strong>break</strong> </code>او <code><strong>continue</strong> </code>للإشارة إلى ما إذا كان البرنامج ينبغي أن يوقف الحلقة أو الاستمرار في تنفيذها.</p> + +<p dir="rtl">التعبير الخاص بالتعليمة <code>label </code>يشبه ما يلي:</p> + +<pre class="syntaxbox">label : + statement +</pre> + +<p dir="rtl">قيمة <strong><code>label </code></strong>يمكن ان تكون أي معرف جافاسكريبت باستثناء الكلمات المحجوزة. التعليمة البرمجية <strong><code>(statement)</code></strong> التي سيشار اليها من طرف <code>label </code>يمكن ان تكون اي تعليمة برمجية.</p> + +<h3 dir="rtl" id="مثال_3"><strong>مثال</strong></h3> + +<p dir="rtl">في هذا المثال، <code>label markLoop</code> يعرف الحلقة <code>while</code>.</p> + +<pre class="brush: js">markLoop: +while (theMark == true) { + doSomething(); +}</pre> + +<div class="note" dir="rtl"> +<p>ملاحظة: لمزيد من التفاصيل حول التعليمة <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/label"><code>label</code></a>، راجع صفحة مرجع الجافا سكريبت</p> +</div> + +<h2 dir="rtl" id="التعليمة_break"><code>التعليمة </code> <code>break</code></h2> + +<p dir="rtl">تستخدم التعليمة {{jsxref("statements/break","break")}} لانهاء الحلقة، او <strong><code>switch</code></strong>، أو بالتزامن مع االتعليمة <code>label</code>.</p> + +<ul dir="rtl"> + <li>عند استخدام <code>break </code>من دون <code>label </code>ستقوم بانهاء الحلقة (<strong><code>while ،do-while ،for</code></strong> او <strong><code>switch</code></strong>). وانتقال التحكم الى التعليمة البرمجية التالية.</li> + <li>عند استخدام <code>break </code>مع <code>label س</code>يتم انهاء تنفيذ التعليمة البرمجية المحددة من طرف <code>label</code></li> +</ul> + +<p dir="rtl">يمكن التعبير عن التعليمة <code><strong>break</strong> </code>من خلال طريقتين:</p> + +<pre class="syntaxbox">break; +break <em>label</em>; +</pre> + +<p dir="rtl">تستخدم الطريقة الأولى لانهاء الحلقة المتواجدة بها، او لانهاء <strong><code>switch</code></strong>. الطريقة الثانية لانهاء تنفيذ التعليمات التي تم تحديدها من قبل <code>label</code>.</p> + +<h3 dir="rtl" id="المثال_الاول_2"><strong>المثال الاول</strong></h3> + +<p dir="rtl">يقوم المثال التالي بالتكرار على عناصر المصفوفة، وبمجرد الوصول الى العنصر المحدد في الشرط وهو <code>theValue </code>سيتم انهاء الحلقة،</p> + +<pre class="brush: js">for (var i = 0; i < a.length; i++) { + if (a[i] == theValue) { + break; + } +}</pre> + +<h3 dir="rtl" id="المثال_الثاني_2"><strong>المثال الثاني</strong></h3> + +<p dir="rtl">المثال التالي، يبين كيفية استخدام التعليمة <code><strong>break</strong> </code>بكلا الطريقتين:</p> + +<pre class="brush: js">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; + } + } +} +</pre> + +<h2 dir="rtl" id="التعليمة_continue"><code>التعليمة </code> <code>continue</code></h2> + +<p dir="rtl">يمكن استخدام التعليمة {{jsxref("statements/continue","continue")}} لاستئناف الحلقة <code><strong>while</strong>)</code> <strong><code>do-while</code> <code>،for</code></strong> ، مع <strong><code>labe</code></strong>)، بعد توقفها لغرض معين.</p> + +<ul dir="rtl"> + <li>عند استخدام <code><strong>continue</strong> </code>من دون <code>label</code>، ستقوم بانهاء <strong>التكرار الحالي</strong> للحلقة <code><strong>while</strong>) <strong>do-while</strong></code>، او <strong><code>for</code></strong>)<strong> وتنتقل</strong> الى <strong>التكرار التالي</strong>. على النقيض من التعليمة <code>break</code>، التعليمة <code>continue </code><strong>لا تنهي</strong> تنفيذ الحلقة تماما. عند استخدامها مع الحلقة <code>while </code>فحلقة البرنامج ستعود إلى الشرط. وعند استخدامها مع الحلقة <code>for </code>فحلقة البرنامج ستعود إلى تعليمة الزيادة (increment-expression)</li> + <li>عند استخدام <code>continue</code> مع <code>label</code>، سيتم تطبيقها على الحلقة المحددة بواسطة <code>label</code>.</li> +</ul> + +<p dir="rtl">يمكن التعبير عن التعليمة <code>continue</code> من خلال طريقتين:</p> + +<pre class="syntaxbox">continue; +continue <em>label</em>; +</pre> + +<h3 dir="rtl" id="المثال_الاول_3"><strong>المثال الاول</strong></h3> + +<p dir="rtl">في المثال التالي، لدينا الحلقة <code>while </code>مع التعليمة <code>continue </code>التي ستنفذ حينما تصبح <strong><code>i</code></strong> تساوي 3. ولدينا n الذي سيحتوي على القيم التالية: 1, 3, 7 و 12.</p> + +<pre class="brush: js">var i = 0; +var n = 0; +while (i < 5) { + i++; + if (i == 3) { + continue; + } + n += i; +} +</pre> + +<h3 dir="rtl" id="المثال_الثاني_3"><strong>المثال الثاني</strong></h3> + +<p dir="rtl">التعليمة <code>label checkiandj</code> تحتوي على التعليمة <code>label checkj</code>. عند مصادفة <code>continue </code>سيقوم البرنامج بانهاء التكرار الحالي ل <code>checkj </code>ويبدأ التكرار من جديد. وفي كل مرة يتم مصادفة <code>continue</code>، تستمر <code>checkj </code>بالتكرار حتى يعود الشرط ب <code>false</code>. عندما سيتم العودة ب <code>false</code>، ما تبقى من التعليمة <code>checkiandj </code>سيكتمل، و <code>checkiandj </code>ستستمر بالتكرار حتى يعود الشرط ب <code>false</code>. عندما سيتم العودة ب <code>false</code>، سينتقل البرنامج الى التعليمة البرمجية التي تلي <code>checkiandj</code>.</p> + +<pre class="brush: js">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); + }</pre> + +<p class="summary" dir="rtl">عموما: التعليمة <strong><code>break</code> </strong>تقوم بانهاء الحلقة نهائيا عندما يتم تحقق الشرط المحدد، فيما تقوم التعليمة <strong><code>continue</code> بتوقيف الحلقة للتحقق من</strong> الشرط المحدد، وعندما يتم تنفيذ الشرط، يتم استئناف الحلقة.</p> + +<h2 dir="rtl" id="التعليمة_for...in"><code>التعليمة </code> <code>for...in</code></h2> + +<p dir="rtl">تستخدم الحلقة {{jsxref("statements/for...in","for...in")}} للتكرار على جميع خصائص الكائن القابلة للتكرار <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">enumerable properties</a>. مقابل كل خاصية مميزة، ستنفذ الجافا سكريبت تعليمات برمجية محددة. يوضح الشكل التالي التركيبة الاساسية للحلقة <strong><code>for...in</code></strong></p> + +<pre class="syntaxbox">for (variable in object) { + statements +} +</pre> + +<h3 dir="rtl" id="مثال_4"><strong>مثال</strong></h3> + +<p dir="rtl">الدالة التالية تتضمن كائن واسم الكائن كبارامترات لها. تقوم بالتكرار على كل خصائص الكائن وترجع سلسلة نصية بأسماء الخصائص والقيم الخاصة بها.</p> + +<pre class="brush: js">function dump_props(obj, obj_name) { + var result = ''; + for (var i in obj) { + result += obj_name + '.' + i + ' = ' + obj[i] + '<br>'; + } + result += '<hr>'; + return result; +}</pre> + +<p dir="rtl">بالنسبة للكائن <code>car</code> مع الخصائص <code>make</code> و <code>model</code>، الناتج سيكون على الشكل التالي:</p> + +<pre class="brush: js">car.make = Ford +car.model = Mustang +</pre> + +<h3 dir="rtl" id="for...in_و_المصفوفات">for...in و<strong> المصفوفات</strong></h3> + +<p dir="rtl">على الرغم من كونه مغريا استخدام الحلقة <strong><code>for...in</code></strong> للتكرار على عناصر المصفوفة {{jsxref("Array")}} الا انها، يمكن أن تقوم بسلوك غير متوقع. في الواقع، الحلقة <strong><code>for...in</code></strong> ستقوم بإرجاع اسماء الخصائص المعرفة من قبل المستخدم بالإضافة إلى الفهارس الرقمية. فمثلا، إذا قمت بالتعديل على Array object، كإضافة خصائص او وظائف جديدة. فستقوم الحلقة <strong><code>for...in</code></strong> بالتكرار على هذه الخصائص او الوظائف بالإضافة إلى عناصر المصفوفة، وبالتالي فمن الأفضل استخدام الحلقة التقليدية {{jsxref("statements/for","for")}} لارجاع الفهارس الرقمية بشكل صحيح عند التكرار على المصفوفة. يبين المثال التالي كيفية حصول ذالك.</p> + +<pre class="brush: js">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 +}</pre> + +<h2 dir="rtl" id="الحلقة_for...of"><code>الحلقة </code> <code>for...of</code></h2> + +<p dir="rtl">التعليمة {{jsxref("statements/for...of","for...of")}} نوع جديد من الحلقات تم إضافتها الى الإصدار السادس من جافا سكربت ، وتستخدم للتكرار على العناصر الموجودة في أي مجموعة أو <a href="/en-US/docs/Web/JavaScript/Guide/iterable">iterable objects</a> (مثل {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}} والكائن {{jsxref("functions/arguments","arguments")}} الخ.), كما أن هذا الأسلوب يمكننا من تنفيذ تعليمة برمجية معينة على كل عنصر تم جلبه على حدة للتعديل على أي من خصائصه. يوضح الشكل التالي التركيبة الاساسية للحلقة<strong><code> for...of</code></strong></p> + +<pre class="syntaxbox">for (<em>variable</em> of <em>object</em>) { + <em>statement +</em>}</pre> + +<p dir="rtl">المثال التالي، يوضح الفرق بين الحلقة <code><strong>for...of</strong></code> والحلقة {{jsxref("statements/for...in","for...in")}} الحلقة <strong><code>for...in</code></strong> تقوم بارجاع اسماء الخصائص فيما الحلقة <code>for...of</code> تقوم بارجاع قيم الخصائص:</p> + +<pre class="brush:js">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 +} +</pre> +</div> + +<p>{{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</p> 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 +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Text_formatting", "Web/JavaScript/Guide/Indexed_collections")}}</div> + +<p class="summary" dir="rtl">التعبيرات القياسية (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")}}. يتناول هذا الفصل تعبيرات جافاسكربت القياسية.</p> + +<div id="mdnDiv" style="font-size: 16px;"> +<h2 id="انشاء_تعبير_قياسي_او_ريجكس" style="font-family: tahoma;">انشاء تعبير قياسي او ريجكس</h2> + +<p style="font-family: tahoma;">يمكنك انشاء ريجكس من خلال احدى الطرق التالية:</p> + +<p dir="rtl" style="font-family: tahoma;">الطريقة الاولى، باستخدام التعبير القياسى الحرفي regular expression literal، ويتضمن الباترن pattern بين سلاشين، كما يلي:</p> + +<pre class="brush: js line-numbers language-js" dir="rtl" style="font-family: tahoma;"><code class="language-js"><span class="keyword token">var</span> re <span class="operator token">=</span> <span class="regex token">/ab+c/</span><span class="punctuation token">;</span></code></pre> + +<p dir="rtl" style="font-family: tahoma;">يقوم ال Regular expression literals بتجهيز التعبير القياسي عند تحميل السكريبت. شرط ان يظل التعبير القياسي ثابتا، في هذه الحالة، استخدام هذا الشكل المختصر يمكن أن يحسن من الأداء.</p> + +<p dir="rtl" style="font-family: tahoma;">الطريقة الثانية، من خلال استدعاء <code>constructor</code> الكائن <code>RegExp</code>، كما يلي:</p> + +<pre class="brush: js line-numbers language-js" dir="rtl" style="font-family: tahoma;"><code class="language-js"><span class="keyword token">var</span> re <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">RegExp</span><span class="punctuation token">(</span><span class="string token">'ab+c'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p dir="rtl" style="font-family: tahoma;">استخدام ال constructor، يقلل من وقت تشغيل الريجكس. إسْتخدِم ال constructor عندما تريد ان يكون الريجكس قابلا للتغيير، او في حالة عدم علمك بالريجكس الذي ستحصل عليه من طرف اخر. كحقل المدخلات مثلا.</p> + +<h2 dir="rtl" id="انشاء_باترن_الريجكس" style="font-family: tahoma;">انشاء باترن الريجكس</h2> + +<p dir="rtl" style="font-family: tahoma;">يتكون الباترن البسيط اما من رموز عادية، مثل <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">/abc/</code>، او خليط من الرموز العادية والرموز الخاصة، مثل <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">/ab*c/</code> او <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">/Chapter (\d+)\.\d*/</code>. يحتوي هذا الباترن على اقواس هلالية، هذه الاقواس ستقوم بدور ذاكرة الجهاز، بحيث ستقوم بتخزين قيمة المطابقة الناتجة عن هذا الجزء من الباترن وفهرستها ليتم استدعاؤها لاحقا. للمزيد من التفاصيل حول <a href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Guide/Regular_Expressions#Using_parenthesized_substring_matches">مطابقة السلسلة النصية الجزئية بين قوسين</a>.</p> + +<h3 class="highlight-spanned" dir="rtl" id="استخدام_الباتر_البسيط" style="font-family: tahoma;"><span class="highlight-span">استخدام الباتر البسيط</span></h3> + +<p dir="rtl" style="font-family: tahoma;">تتكون الباترنز البسيطة، من رموز صريحة ومباشرة، تصف فيها ما تريد مقارنته مباشرة. مثلا، الباترن <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">/abc/</code> سيطابق مجموعة من الرموز في سلسلة نصية، شرط تواجد هذه الرموز جنبا الى جنب بشكل مرتب. لذالك، ستنجح المطابقة في هذه السلسلة النصية <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"Hi, do you know your abc's?"</code> وكذالك في السلسلة النصية التالية <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"The latest airplane designs evolved from slabcraft."</code>، نجحت المطابقة في كلتا الحالتين لان السلسلة الفرعية <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'abc'</code> هي المطلوبة. وهذا لايتطابق مع هذه السلسلة النصية <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'Grab crab'</code> لانها تحتوي على سلسلة نصية غير تلك المطلوبة <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'ab c'</code>.</p> + +<h3 class="highlight-spanned" dir="rtl" id="استخدام_الرموز_الخاصة" style="font-family: tahoma;"><span class="highlight-span">استخدام الرموز الخاصة</span></h3> + +<p dir="rtl" style="font-family: tahoma;">عندما يتطلب الامر عملية بحث، أكثر من مطابقة صريحة ومباشرة، مثل البحث عن واحد او اكثر من ال <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'b'</code>، او البحث عن مسافة فارغة، عندها سيتوجب على الباترن ان يحتوي على الرموز الخاصة. مثلا، الباترن <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">/ab*c/</code> سيطابق مجموعة من الرموز، حيث ستكون <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'a'</code> متبوعة بصفر او اكثر من ال <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'b'</code>، الرمز الخاص نجمة <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">*</code> يرصد وجود العنصر المطلوب صفر او اكثر من المرات، متبوعا مباشرة ب <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'c'</code>. بعد فحص السلسلة النصية <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"cbbabbbbcdebc,"</code> قام الباترن بمطابقة السلسلة الجزئية <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'abbbbc'</code>.</p> + +<p style="font-family: tahoma;">يحتوي الجدول التالي على قائمة مكتملة من رموز الريجكس الخاصة وشرحها.</p> + +<table class="standard-table" style="font-family: tahoma;"> + <caption> + <p>الرموز الخاصة بالريجكس.</p> + </caption> + <thead> + <tr> + <th dir="rtl" scope="col">الرمز</th> + <th dir="rtl" scope="col">شرح الاستخدام</th> + </tr> + </thead> + <tbody> + <tr> + <td dir="rtl"><code><strong><a href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Guide/Regular_Expressions#special-backslash" id="special-backslash" name="special-backslash">\</a></strong></code></td> + <td> + <p dir="rtl"> </p> + + <p dir="rtl">مطابقات وفقا للقواعد التالية:<br> + <br> + الباكسلاش الذي يسبق الرمز العادي يشير الى ان الرمز التالي هو رمز من الرموز الخاصة ولا ينبغي تفسيره حرفيا. مثلا <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'b'</code> من دون باكسلاش<code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;"> \ </code>، ستطابق <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'b'</code> بحروف صغيرة. لكن <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">\b</code> في حد داتها لا تطابق اي حرف، لانها من الرموز الخاصة وتعني حصر او تحديد حدود للرموز المطلوبة <a href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Guide/Regular_Expressions#special-word-boundary" title="#special-word-boundary">word boundary character</a>.<br> + <br> + الباكسلاش الذي يسبق الرموز الخاصة، يشير الى ان الرمز التالي هو ليس من الرموز الخاصة وينبغي تفسيره حرفيا. مثلا، الباترن <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">/a*/</code> يحتوي على احد الرموز الخاصة <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">*</code> وهو لمطابقة صفر او اكثر من a، بعد اضافة الباكسلاش له، كما في الباترن <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">/a\*/</code> تم الغاء رمزيتة، وبالتالي اصبح الباترن <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">/a\*/</code> يطابق السلسلة الحرفية <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'a*'</code>.<br> + <br> + لا تنس تهريب الباكسلاش نفسه، بينما تستخدم الكونستراكتر <code>RegExp( "\\s", "g" )</code>، لانه يعمل ايضا، كمهرب للرموز الخاصة في السلسلة النصية.</p> + + <p dir="rtl"> </p> + </td> + </tr> + <tr> + <td><code><strong><a href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Guide/Regular_Expressions#special-caret" id="special-caret" name="special-caret">^</a></strong></code></td> + <td> + <p dir="rtl"> </p> + + <p dir="rtl">مطابقة بداية المدخلات. ادا كان البند <code>multiline</code> ب <code>true</code>، اي ان <strong><code>m</code></strong> موجودة في الباترن <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">/^a/gm</code> سيبدا البحث عن المطابقة في بداية اي سطر جديد.<br> + <br> + مثلا الباترن <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">/^a/gm</code> سيطابق اثنان من <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'a'</code>، في <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"a special char\nacter"</code>، لاحظ وجود السطر الجديد <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">\n</code> في السلسلة النصية.<br> + <br> + الرمز <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">^</code> سيصبح له معنى اخر عندما يستخدم مع المجموعة. <a href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Guide/Regular_Expressions#special-negated-character-set" title="#special-negated-character-set">توجه الى مجموعة الرموز</a> لمعرفة المزيد من التفاصيل.</p> + + <p dir="rtl"> </p> + </td> + </tr> + <tr> + <td><strong><code><a href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Guide/Regular_Expressions#special-dollar" id="special-dollar" name="special-dollar">$</a></code></strong></td> + <td> + <p dir="rtl"> </p> + + <p dir="rtl">مطابقة نهاية المدخلات. ادا كان البند <code>multiline</code> ب <code>true</code>، اي ان <strong><code>m</code></strong> موجودة في الباترن <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">/r$/gm</code> سيبدا البحث عن المطابقة في نهاية اي سطر جديد.<br> + <br> + مثلا الباترن <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">/r$/gm</code> سيطابق اثنان من <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'r'</code>، في <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"a special char\nacter"</code>، لاحظ وجود السطر الجديد <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">\n</code> في السلسلة النصية.</p> + </td> + </tr> + <tr> + <td><strong><code><a href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Guide/Regular_Expressions#special-asterisk" id="special-asterisk" name="special-asterisk">*</a></code></strong></td> + <td> + <p dir="rtl"> </p> + + <p dir="rtl">مطابقة التعبير الذي سيسبق الرمز <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">*</code> صفر او اكثر من المرات، وهو مكافئ ل <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">{0,}</code>.</p> + + <p dir="rtl">مثلا، <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">/bo*/</code> سيطابق <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'boooo'</code> في <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"A ghost booooed"</code> و <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'b'</code> في <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"A bird warbled"</code> لكن لا شئ بالنسبة ل <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"A goat grunted"</code>.</p> + + <p dir="rtl"> </p> + </td> + </tr> + <tr> + <td><strong><code><a href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Guide/Regular_Expressions#special-plus" id="special-plus" name="special-plus">+</a></code></strong></td> + <td> + <p dir="rtl"> </p> + + <p dir="rtl">مطابقة التعبير الذي سيسبق الرمز <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">+</code> مرة واحدة على الاقل او اكثر من المرات، وهو مكافئ ل <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">{1,}</code>.</p> + + <p dir="rtl">مثلا، <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">/a+/</code> ستطابق <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'a'</code> في <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"candy"</code> ومجموعة ال <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'a'</code> في <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"caaaaaaandy"</code> لكن لا شئ بالنسبة ل <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"cndy"</code>.</p> + + <p dir="rtl"> </p> + </td> + </tr> + <tr> + <td><strong><code><a href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Guide/Regular_Expressions#special-questionmark" id="special-questionmark" name="special-questionmark">?</a></code></strong></td> + <td dir="rtl"> + <p> </p> + + <p>مطابقة التعبير الذي سيسبق الرمز <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">?</code> صفر او واحد من المرات، وهو مكافئ ل <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">{0,1}</code>.<br> + <br> + مثلا، الباترن <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">/e?le?/</code> سيطابق <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'el'</code> في <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"angel"</code> و <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'le'</code> في <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"angle"</code> وكذالك <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'l'</code> في <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"also"</code>.<br> + <br> + اذا استخدم الرمز <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">?</code> مباشرة بعد احد هذه المحددات <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">*</code>، <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">+</code>، <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">?</code>، او <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">{}</code>، سيؤثر على سلوكها الافتراضي، فيجعلها<strong> غير</strong> <strong>طماعة</strong> <code>non-greedy</code> او<strong> غير</strong> <strong>جشعة</strong> (تطابق عدد محدود من الاحرف) بخلاف سلوكها الافتراضي، وهو التصرف <strong>بجشع</strong> (تطابق اكثر عدد ممكن من الاحرف)، مثلا، باستخدام الباترن الجشع، <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">/\d+/</code> ستطابق كل السلسلة <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"123"</code> في <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"123abc"</code> . اما باستخدام الباترن الغير جشع، <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">/\d+?/</code> وعلى نفس السلسلة ستطابق <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"1"</code> فقط.<br> + <br> + مثال اكثر دقة حول <code>non-greedy</code> و <code>greedy</code>، فرضا، نريد مطابقة تاجات الاتش تي ام ال، باستخدام الباترن الجشع <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;"> /<(.+)>/g</code> سيتم مطابقة كل السلسلة النصية <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"<div>fCh<p>elema</p>lCh</div>"</code>، اما باستخدام الباترن الغير شجع <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;"> /<(.+?)>/g</code> فسيتم مطابقة التاجات ومحتواها فقط. بمعنى، ان العملية ستسير بالشكل التالي: مع بداية البحث، عندما سيجد التاج الاول <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'<div>'</code> سييكتفي به ولا يطمع في ما يليه، ثم ينتقل مباشرة نحو الهدف الثاني <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'<p>'</code> فيطابقه ويكتفي به دون ان يطمع في ما يليه، وهكذا. مع العلم ان الباترن عبارة عن البحث <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">(.+?)</code> في كل شئ، لكن من دون طمع.<br> + الرمز <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">?</code> يصبح له معنى اخر مع <em><code>lookahead assertions</code></em>، النظر الى الامام <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">x(?=y)</code> ومنع النظر الى الامام <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">x(?!y)</code> سيتم شرحها في هذا الجدول.</p> + + <p> </p> + </td> + </tr> + <tr> + <td><strong><code><a href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Guide/Regular_Expressions#special-dot" id="special-dot" name="special-dot">.</a></code></strong></td> + <td> + <p> </p> + + <p>النقطة الكسرية تطابق اي شئ، ما عدا السطر الجديد</p> + + <p dir="rtl">مثلا، <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">/.n/</code> ستطابق <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'an'</code> و <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'on'</code> في <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"nay, an apple is on the tree"</code>, لكن ليس <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'nay'</code>.</p> + + <p dir="rtl"> </p> + </td> + </tr> + <tr> + <td><strong><code><a href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Guide/Regular_Expressions#special-capturing-parentheses" id="special-capturing-parentheses" name="special-capturing-parentheses">(x)</a></code></strong></td> + <td> + <p dir="rtl"> </p> + + <p dir="rtl">مطابقة <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'x'</code> وانشاء فهرسة جزئية. كما يبين المثال التالى. اقواس المجموعة المفهرسة تسمى <code><em>capturing parentheses</em></code>.<br> + <br> + مثلا،<code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">'(foo)'</code> و <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">'(bar)'</code> في الباترن <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">/(foo) (bar) \1 \2/</code> تطابق وتفهرس الكلمة الاولى والكلمة الثانية في السلسلة الحرفية <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"foo bar foo bar"</code>. والفهرسة الرقمية <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">\1</code> و <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">\2</code> تولد الكلمة الثالثة والكلمة الرابعة بناءا على الاقواس المحيطة بكل منهما. تذكر ان هذه الفهرسة الرقمية تستخدم داخل الباترن فقط. فيما تستخدم المتغيرات السحررية <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">$1</code>, <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">$2</code>, ..., <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">$n</code> خارج الباترن، وتستخدم في عملية الاستبدال فقط، مثلا، <code>'bar foo'.replace(/(...) (...)/, '$2 $1')</code>. <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">$&</code> يطابق هذا المتغير السحري <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">$&</code> السلسلة النصية بالكامل، او بمعنى اصح، ينقل ناتج الباترن بالكامل.</p> + + <p dir="rtl"> </p> + </td> + </tr> + <tr> + <td dir="rtl"><strong><code><a href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Guide/Regular_Expressions#special-non-capturing-parentheses" id="special-non-capturing-parentheses" name="special-non-capturing-parentheses">(x:?)</a></code></strong></td> + <td dir="rtl"> + <p> </p> + + <p>مطابقة ال <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'x'</code> لكن دون انشاء جزئية مفهرسة، اقواس المجموعة هنا تسمى <code><em>non-capturing parentheses</em></code></p> + + <p>انشاء جزئية مفهرسة وعدم استخدامها، يبطئ من سرعة محرك الريجكس، لانه يتسبب له في عمل زائد، يمكنك جعل محرك الريجكس اسرع قليلا باستخدام <code><em>non-capturing</em></code>.</p> + + <p>علامة الاستفهام والنقطتين بعد قوس الافتتاح هما من الرموز الخاصة، استخدامهما جنبا الى جنب يخبر محرك الريجكس بان هذه المجموعة لا ينبغي ان تعامل كجزئية مفهرسة. وبالتالي لا يمكن، استدعاء المطابقة من خلال الفهرسة الرقمية<code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">\1...</code> او عناصر المصفوفة <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">[1]...</code> او اعادة استخدام المطابقة من خلال المتغيرات السحرية <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">$1...$9</code>.</p> + + <p> </p> + </td> + </tr> + <tr> + <td><strong><code><a href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Guide/Regular_Expressions#special-lookahead" id="special-lookahead" name="special-lookahead">=</a>?</code></strong></td> + <td> + <p dir="rtl"> </p> + + <p dir="rtl">مطابقة ال <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'x'</code> فقط اذا كانت <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'x'</code> متبوعة ب <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'y'</code>. وهذا يسمى النظر الى الامام<code> <em>lookahead</em></code>.</p> + + <p dir="rtl">مثلا، <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">/Jack(?=Sprat)/</code> سيطابق <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'Jack'</code> فقط اذا كان متبوعا ب <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'Sprat'</code>. وكذالك بالنسبة ل <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">/Jack(?=Sprat|Frost)/</code> سيطابق <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'Jack'</code> فقط اذا كان متبوعا ب <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'Sprat'</code> او <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'Frost'</code>. ومع ذالك، لا <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'Sprat'</code> ولا <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'Frost'</code> جزء من ناتج المطابقة.</p> + + <p dir="rtl"> </p> + </td> + </tr> + <tr> + <td><strong><code>!?</code></strong></td> + <td> + <p dir="rtl"> </p> + + <p dir="rtl">مطابقة ال <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'x'</code> فقط اذا كانت <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'x'</code> غير متبوعة ب <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'y'</code>. وهذا يسمى منع او ابطال النظر الى الامام <code><em>negated lookahead</em></code>.</p> + + <p dir="rtl">مثلا، <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">/\d+(?!\.)/</code> سيطابق عدد فقط اذا كان غير متبوعا بفاصلة كسرية. الريجكس <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">/\d+(?!\.)/.exec("3.141")</code> سيطابق <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'141'</code> لكن لن يطابق <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'3.141'</code>.</p> + + <p dir="rtl"> </p> + </td> + </tr> + <tr> + <td><strong><code><a href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Guide/Regular_Expressions#special-or" id="special-or" name="special-or">x|y</a></code></strong></td> + <td> + <p dir="rtl"> </p> + + <p dir="rtl">مطابقة <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'x'</code> أو <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'y'</code>.</p> + + <p dir="rtl">مثلا، <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">/green|red/</code> سيطابق <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'green'</code> في <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"green apple"</code> و <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'red'</code> في <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"red apple."</code>.</p> + + <p dir="rtl"> </p> + </td> + </tr> + <tr> + <td><strong><code><a href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Guide/Regular_Expressions#special-quantifier" id="special-quantifier" name="special-quantifier">{n}</a></code></strong></td> + <td dir="rtl"> + <p> </p> + + <p>مطابقة n تحديدا، بناءا على التعبير الذي سيسبقه. n يجب ان يكون عددا صحيحا.<br> + <br> + مثلا، <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">/a{2}/</code> لن يطابق <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'a'</code>في <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"candy,"</code> لكنه سيطابق جميع ال a في <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"caandy,"</code> كما سيطابق اثنان من ال a الاولى في <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"caaandy."</code>.</p> + + <p> </p> + </td> + </tr> + <tr> + <td><strong><code><a href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Guide/Regular_Expressions#special-quantifier" id="special-quantifier" name="special-quantifier">{n,}</a></code></strong></td> + <td> + <p dir="rtl"> </p> + + <p dir="rtl">مطابقة n او اكثر، بناءا على التعبير الذي سيسبقه. n يجب ان يكون عددا صحيحا.</p> + + <p dir="rtl">مثلا، <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">/a{2,}/</code> سيطابق <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"aa"</code> ، <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"aaaa"</code> و <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"aaaaa"</code> لكن ليس <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"a"</code>.</p> + + <p dir="rtl"> </p> + </td> + </tr> + <tr> + <td><strong><code><a href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Guide/Regular_Expressions#special-quantifier-range" id="special-quantifier-range" name="special-quantifier-range">{n,m}</a></code></strong></td> + <td> + <p dir="rtl"> </p> + + <p dir="rtl">حيث ان <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">n</code> و <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">m</code> من الاعداد الصحيحة الموجبة، و <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">n <= m</code>. فستكون المطابقة من <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">n</code> الى <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">m</code>، بناءا على التعبير الذي سيسبقها.</p> + + <p dir="rtl">مثلا، <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">/a{1,3}/</code> لن يطابق شئ في <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"cndy"</code> لكنه سيطابق <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'a'</code> في <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"candy,"</code> وكذاك اثنان من ال <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'a'</code> الاولى في <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"caandy,"</code> وايضا الثلاثة <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"a"</code> الاولى في <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"caaaaaaandy"</code>. لاحظ عند مطابقة <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"caaaaaaandy"</code> تم مطابقة <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"aaa"</code> فقط، بالرغم من احتواء السلسة النصية على اكثر من ذالك.</p> + + <p dir="rtl"> </p> + </td> + </tr> + <tr> + <td><strong><code><a href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Guide/Regular_Expressions#special-character-set" id="special-character-set" name="special-character-set">[xyz]</a></code></strong></td> + <td dir="rtl"> + <p> </p> + + <p>المجموعة، او مجموعة الرموز، هذا النوع من الباترن يطابق اي رموز داخل الاقواس المعقوفة، بما فيها المهربات المتتالية <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Values,_variables,_and_literals#Unicode_escape_sequences" title="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Values,_variables,_and_literals#Unicode_escape_sequences">escape sequences</a>. الرموز الخاصة مثل النقطة (<code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">.</code>) والنجمة (<code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">*</code>) تصبح رموز عادية شانها شان اي حرف في سلسلة نصية، لذالك فهي لا تحتاج لباكسلاش. يمكنك تحديد منظم الرموز وفصله بشرطة، كما يبين المثال التالي:<br> + <br> + الباترن<code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;"> [a-d]</code> سيطابق نفس ما سيطابقه الباترن <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">[abcd]</code> سيطابقان <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'b'</code> في <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"brisket"</code> و <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'c'</code> في <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"city"</code>. وكذالك بالنسبة للباترن <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">/[a-z.]+/</code> و <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">/[\w.]+/</code> بامكانهما مطابقة كامل السلسلة النصية <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"test.i.ng"</code>.</p> + + <p> </p> + </td> + </tr> + <tr> + <td><strong><code><a href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Guide/Regular_Expressions#special-negated-character-set" id="special-negated-character-set" name="special-negated-character-set">[xyz^</a><a href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Guide/Regular_Expressions#special-negated-character-set" name="special-negated-character-set">]</a></code></strong></td> + <td> + <p dir="rtl"> </p> + + <p dir="rtl">منع مجموعة من الرموز او رموز معينة. سيتم مطابقة اي شئ ما عد ما ورد داخل الاقواس المعقوفة، يمكنك تحديد منظم الرموز وفصله بشرطة، جميع ما يمكن استخدامه في المجموعة او مجموعة الرموز العادية يمكن استخدامه هنا.</p> + + <p dir="rtl">مثلا، الباترن <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">[^abc]</code> هو نفسه <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">[^a-c]</code>. سيطابقان <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'r'</code> في <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"brisket"</code> و <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'h'</code> في <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"chop."</code></p> + + <p dir="rtl"> </p> + </td> + </tr> + <tr> + <td><strong><code><a href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Guide/Regular_Expressions#special-backspace" id="special-backspace" name="special-backspace">[b\</a><a href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Guide/Regular_Expressions#special-backspace" name="special-backspace">]</a></code></strong></td> + <td dir="rtl"> + <p> </p> + + <p>سيطابق backspace (U+0008). اذا كنت ترغب بمطابقة الرمز النصي: رجوع الى الخلف literal backspace character. فمن الضروري استخدام الاقواس المعقوفة، حتى لا تتعارض مع <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">\b</code>.</p> + + <p> </p> + </td> + </tr> + <tr> + <td><strong><code><a href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Guide/Regular_Expressions#special-word-boundary" id="special-word-boundary" name="special-word-boundary">b\</a></code></strong></td> + <td> + <p dir="rtl"> </p> + + <p dir="rtl">مطابقة حدود الكلمة <em><code>word boundary</code></em>.</p> + + <p dir="rtl"><code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">\b</code>، ستطابق الكلمة التي لايسبقها ولا يليها اي من، ما ورد في هذه المجموعة <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">[A-Za-z0-9_]</code> او في مثيلتها <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">\w</code>، بمعنى ادق، ستقبل بوجود المسافة الفارغة والرموز النصية الخاصة مثل <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"&=)é'?*-"</code> ، اي، كل ما يمكن ان ينتج عن هذه المجموعة <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">[^A-Za-z0-9_]</code> او عن مثيلتها <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">\W</code>، اما من قبل او من بعد المطابقة، او من كلا الجانبين، او ان تكون في بداية السلسلة او نهايتها. لاحظ ان ال <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">\b</code> ليست جزءا من المطابقة. بل للدلالة فقط. وايضا لا تتعارض مع <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">[\b]</code>.</p> + + <p dir="rtl">امثلة مختلفة:<br> + <br> + <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">/\bm/</code> ستطابق <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'m'</code> في <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"moon"</code>.<br> + <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">/oo\b/</code> لن تطابق <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'oo'</code> في <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"moon"</code> لان <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'oo'</code> متبوعة بالكلمة الرمزية <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'n'</code>.<br> + <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">/oon\b/</code> ستطابق <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'oon'</code> في <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"moon"</code>، لان <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'oon'</code> هو نهاية السلسلة النصية، وبالتالي ليست متبوعة باية كلمة رمزية.<br> + <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">/\w\b\w/</code> لن يطابق اي شئ، لان <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">\w</code> لايمكنها ابدا ان تكون متبوعة ب <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">\b</code> و <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">\w</code>.</p> + + <div class="note" dir="rtl"> + <p><strong>ملاحظة:</strong> محرك الريجكس في الجافاسكريبت حدد بالتدقيق <a class="external external-icon" href="http://www.ecma-international.org/ecma-262/5.1/#sec-15.10.2.6" rel="noopener">مجموعة الرموز</a> على ان تكون <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"كلمات"</code> رمزية. أي حرف ليس في تلك المجموعة يعتبر كلمة مكسورة. هذه المجموعة من الأحرف محدودة إلى حد ما: وهي تتألف فقط من الأبجدية الرومانية في كلتا الحروف الصغيرة والحروف الكبيرة، والاعداد العشرية، والرمز underscore. الحروف المعلمة مثل <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"é"</code> او <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"ü"</code> ، لسوء الحظ عوملت ككلمات مكسورة.</p> + + <p> </p> + </div> + </td> + </tr> + <tr> + <td><strong><code><a href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Guide/Regular_Expressions#special-non-word-boundary" id="special-non-word-boundary" name="special-non-word-boundary">B\</a></code></strong></td> + <td> + <p dir="rtl"> </p> + + <p dir="rtl">ال <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">non-word boundary</code><code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">\B</code>. عكس ما يمكن لل <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">\b</code> ان تقوم به.</p> + + <p dir="rtl">مثلا، <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">/\B../</code> ستطابق <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'oo'</code> في <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"noonday"</code>، <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">/y\B./</code> ستطابق <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'ye'</code> في <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"possibly yesterday"</code>.</p> + + <p dir="rtl"> </p> + </td> + </tr> + <tr> + <td><strong><code><a href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Guide/Regular_Expressions#special-control" id="special-control" name="special-control">cX\</a></code></strong></td> + <td> + <p dir="rtl"> </p> + + <p dir="rtl">حيث ان <em>X</em> هو منظم الرموز من A الى Z. يطابق رمز عنصر التحكم في سلسلة نصية. مثلا،</p> + + <p dir="rtl">مثلا، <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">/\cM/</code> سيطابق control-M (U+000D) في السلسلة النصية.</p> + + <p dir="rtl"> </p> + </td> + </tr> + <tr> + <td><strong><code><a href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Guide/Regular_Expressions#special-digit" id="special-digit" name="special-digit">d\</a></code></strong></td> + <td> + <p dir="rtl"> </p> + + <p dir="rtl">مطابقة الاعداد. ويكافئ الباترن <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">[0-9]</code>.</p> + + <p dir="rtl">مثلا، <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">/\d/</code> او <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">/[0-9]/</code> ستطابق <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'2'</code> في <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"B2 is the suite number."</code>.</p> + + <p dir="rtl"> </p> + </td> + </tr> + <tr> + <td><strong><code><a href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Guide/Regular_Expressions#special-non-digit" id="special-non-digit" name="special-non-digit">D\</a></code></strong></td> + <td> + <p> </p> + + <p>مطابقة كل شئ ما عدا الاعداد. ويكافئ الباترن <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">[^0-9]</code>.</p> + + <p dir="rtl">مثلا، <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">/\D/</code> او <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">/[^0-9]/</code> سيطابق <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'B'</code> في <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"B2 is the suite number."</code>.</p> + + <p dir="rtl"> </p> + </td> + </tr> + <tr> + <td><code><strong><a href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Guide/Regular_Expressions#special-form-feed" id="special-form-feed" name="special-form-feed">f\</a></strong></code></td> + <td>سيطابق نموذج التلقيم form feed (U+000C).</td> + </tr> + <tr> + <td><strong><code><a href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Guide/Regular_Expressions#special-line-feed" id="special-line-feed" name="special-line-feed">n\</a></code></strong></td> + <td>سيطابق سطر التلقيم line feed (U+000A).</td> + </tr> + <tr> + <td><strong><code><a href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Guide/Regular_Expressions#special-carriage-return" id="special-carriage-return" name="special-carriage-return">r\</a></code></strong></td> + <td> + <p>سيطابق carriage return (U+000D).</p> + </td> + </tr> + <tr> + <td><strong><code><a href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Guide/Regular_Expressions#special-white-space" id="special-white-space" name="special-white-space">s\</a></code></strong></td> + <td> + <p> </p> + + <p>مطابقة رمز المسافة الفارغة، بما في ذالك المسافة، التاب، نمودج التلقيم، سطر التلقيم، ويكافئ <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">[ \f\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code>.</p> + + <p>مثلا، <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">/\s\w*/</code> سيطابق <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">' bar'</code> في <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"foo bar."</code></p> + + <p> </p> + </td> + </tr> + <tr> + <td><strong><code><a href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Guide/Regular_Expressions#special-non-white-space" id="special-non-white-space" name="special-non-white-space">S\</a></code></strong></td> + <td> + <p> </p> + + <p>مطابقة اي شئ ما عدا رمز المسافة الفارغة، ويكافئ <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">[^ \f\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code>.</p> + + <p>مثلا، <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">/\S*/</code> سيطابق <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'foo'</code> في <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"foo bar."</code></p> + + <p> </p> + </td> + </tr> + <tr> + <td><strong><code><a href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Guide/Regular_Expressions#special-tab" id="special-tab" name="special-tab">t\</a></code></strong></td> + <td>سيطابق tab (U+0009).</td> + </tr> + <tr> + <td><strong><code><a href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Guide/Regular_Expressions#special-vertical-tab" id="special-vertical-tab" name="special-vertical-tab">v\</a></code></strong></td> + <td> + <p>سيطابق vertical tab (U+000B).</p> + </td> + </tr> + <tr> + <td><strong><code><a href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Guide/Regular_Expressions#special-word" id="special-word" name="special-word">w\</a></code></strong></td> + <td> + <p> </p> + + <p>مطابقة الحروف الابجدية بما في ذالك ال underscore. ويكافي <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">[A-Za-z0-9_]</code>.</p> + + <p>مثلا، <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">/\w/</code> سيطابق <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'a'</code>في <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"apple,"</code> و <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'5'</code> في <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"$5.28,"</code> و <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'3'</code> في <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"3D."</code></p> + </td> + </tr> + <tr> + <td><strong><code><a href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Guide/Regular_Expressions#special-non-word" id="special-non-word" name="special-non-word">W\</a></code></strong></td> + <td> + <p> </p> + + <p>مطابقة اي شئ غير الحروف الابجدية والاندرسكور، ويكافئ <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">[^A-Za-z0-9_]</code>.</p> + + <p>مثلا، <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">/\W/</code> او <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">/[^A-Za-z0-9_]/</code> سيطابق <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'%'</code> في <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"50%."</code>.</p> + + <p> </p> + </td> + </tr> + <tr> + <td><strong><code><a href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Guide/Regular_Expressions#special-backreference" id="special-backreference" name="special-backreference">n\</a></code></strong></td> + <td> + <p> </p> + + <p>حيث ان <em>n</em> عدد صحيح موجب، سيشير الى المجموعة المفهرسة <em>capturing parentheses</em> .</p> + + <p>مثلا، <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">/apple(,)\sorange\1/</code> سيطابق <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'apple, orange,'</code> في <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"apple, orange, cherry, peach."</code>.</p> + + <p> </p> + </td> + </tr> + <tr> + <td><strong><code><a href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Guide/Regular_Expressions#special-null" id="special-null" name="special-null">0\</a></code></strong></td> + <td> + <p> </p> + + <p>مطابقة الرمز NULL (U+0000). لا تتبع هذا برقم آخر، بسبب ان <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">\0<digits></code> هو <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Values,_variables,_and_literals#Unicode_escape_sequences" title="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Values,_variables,_and_literals#Unicode_escape_sequences">تسلسل التهريب الثماني</a> استخدم <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">\x00</code> بدلا منه.</p> + + <p> </p> + </td> + </tr> + <tr> + <td><strong><code><a href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Guide/Regular_Expressions#special-hex-escape" id="special-hex-escape" name="special-hex-escape">xhh\</a></code></strong></td> + <td>مطابقة الرمز مع الكود hh (two hexadecimal digits).</td> + </tr> + <tr> + <td><strong><code><a href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Guide/Regular_Expressions#special-unicode-escape" id="special-unicode-escape" name="special-unicode-escape">uhhhh\</a></code></strong></td> + <td>مطابقة الرمز مع الكود hhhh (four hexadecimal digits).</td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Guide/Regular_Expressions#special-unicode-escape-es6" id="special-unicode-escape-es6" name="special-unicode-escape-es6"><strong><code>u{hhhh</code></strong><code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">}</code></a></td> + <td>( فقط عندما يستخدم u flag ) سيطابق الرمز مع ال Unicode بالقيمة hhhh (hexadecimal digits).</td> + </tr> + </tbody> +</table> + +<p dir="rtl" style="font-family: tahoma;"> لتهريب تعابير الريجكس في المدخلات النصية، يمكنك<span id="result_box" lang="ar"><span> استخدام دالة الاستبدال التالية:</span></span></p> + +<pre class="brush: js line-numbers language-js" dir="rtl" style="font-family: tahoma;"><code class="language-js"><span class="keyword token">function</span> <span class="function token">escapeRegExp</span><span class="punctuation token">(</span>string<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">return</span> string<span class="punctuation token">.</span><span class="function token">replace</span><span class="punctuation token">(</span><span class="regex token">/[.*+?^${}()|[\]\\]/g</span><span class="punctuation token">,</span> <span class="string token">'\\$&'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// $& means the whole matched string</span> +<span class="punctuation token">}</span></code></pre> + +<p dir="rtl" style="font-family: tahoma;">يستخدم البند <strong><code>g</code></strong> بعد الباترن، لاجراء بحث عام، ينظر في كل السلسلة النصية ويعود بكل المطابقات. تم شرحه بالتفصيل ادناه. <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#Advanced_searching_with_flags">البحث المتقدم باستخدام البنود</a>.</p> + +<h3 class="highlight-spanned" dir="rtl" id="استخدام_الاقواس" style="font-family: tahoma;"><span class="highlight-span">استخدام الاقواس</span></h3> + +<p dir="rtl" style="font-family: tahoma;">الاقواس المحيطة باي جزء من الباترن، تجعل هذا الجزء قابل للتخزين والفهرسة. بمجرد ما يتم تخزينه وفهرسته، يصبح قابلا لاعادة الاستخدام من اطراف اخرى، كما تم شرحه في<a href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Guide/Regular_Expressions#Using_parenthesized_substring_matches"> استخدام مطابقة الاقواس الجزئية</a>.</p> + +<p dir="rtl"><font face="tahoma">مثلا، الباترن </font><code dir="ltr" style="font-family: consolas; color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; background: none 0% 0% repeat scroll transparent;">/Chapter (\d+)\.\d*/</code><font face="tahoma"> يطابق بدقة، الرموز </font><code dir="ltr" style="font-family: consolas; color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; background: none 0% 0% repeat scroll transparent;">'Chapter '</code><font face="tahoma"> متبوعة بواحد او اكثر من الارقام (</font><code dir="ltr" style="font-family: consolas; color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; background: none 0% 0% repeat scroll transparent;">\d</code><font face="tahoma"> تشير الى اي رقم و </font><code dir="ltr" style="font-family: consolas; color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; background: none 0% 0% repeat scroll transparent;">+</code><font face="tahoma"> تشير الى واحد او اكثر من المرات، بالاضافة الى الاقواس المستخدمة خصيصا </font><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);"><strong>لتخزين وفهرسة ما سينتج عنه</strong></span></font><font face="tahoma"> )، متبوعا بنقطة او فاصلة عشرية التي هي نفسها من الرموز الخاصة، يسبقها الباكسلاش </font><strong style="font-family: tahoma;">\</strong><font face="tahoma"> الذي بدوه يخبر الباترن بان يعاملها كنقطة عادية، متبوعا باي رقم يكرر صفر او اكثر من المرات (</font><code dir="ltr" style="font-family: consolas; color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; background: none 0% 0% repeat scroll transparent;">\d</code><font face="tahoma"> تشير الى اي رقم والنجمة </font><code dir="ltr" style="font-family: consolas; color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; background: none 0% 0% repeat scroll transparent;">*</code><font face="tahoma"> تشير الى صفر او اكثر من المرات).</font></p> + +<p dir="rtl" style="font-family: tahoma;">هذا الباترن سيطابق <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"Chapter 4.3"</code> في <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"Open Chapter 4.3, paragraph 6"</code>، وايضا سيقوم بتخزين وفهرسة الجزئية <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'4'</code>. بينما الباترن لا يطابق شئ في <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"Chapter 3 and 4"</code> بسبب ان السلسلة الحرفية لاتحتوي على النقطة بعد الرقم <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'3'</code>.</p> + +<p dir="rtl" style="font-family: tahoma;">لمطابقة سلسلة فرعية من دون التسبب في فهرسة الجزء المتطابق (راجع non-capturing)، ضمن الاقواس ابدا الباترن ب <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">?:</code>. مثلا <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">(?:\d+)</code> ستطابق واحد او اكثر من الارقام من دون ان تفهرس الرموز المتطابقة.</p> + +<h2 id="العمل_مع_الريجكس" style="font-family: tahoma;">العمل مع الريجكس</h2> + +<p dir="rtl" style="font-family: tahoma;">تستخدم التعابير القياسية مع اثنين من الاوبجكت. الاوبجكت الاول هو <strong><code>RegExp</code></strong> ويحتوي على الوظيفتين <strong><code>test</code></strong> و <strong><code>exec</code></strong> والاوبجكت الثاني وهو <strong><code>String</code></strong> ويحتوي على الوظائف التالية: <strong><code>match</code></strong>، <strong><code>replace</code></strong>، <strong><code>search</code></strong>، و <code><strong>split</strong></code>. تم شرح هذه الوظائف بالتفصيل في <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference" title="en-US/docs/JavaScript/Reference">JavaScript reference</a>.</p> + +<table class="standard-table" style="font-family: tahoma;"> + <caption> + <p>الوظائف المملوكة للكائن RegExp</p> + </caption> + <thead> + <tr> + <th scope="col">الوظيفة</th> + <th scope="col">وصفها</th> + </tr> + </thead> + <tbody> + <tr> + <td><a class="new" href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>exec</code></a></td> + <td dir="rtl"> تقوم هذه الوظيفة بتنفيذ بحث لمطابقة سلسلة نصية. وتعود بمصفوفة تحتوي على نتيجة البحث، او تعود ب null في حالة عدم المطابقة.</td> + </tr> + <tr> + <td><a class="new" href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>test</code></a></td> + <td dir="rtl"> تقوم هذه الوظيفة بعمل فحص لمطابقة سلسلة نصية. وتعود اما ب true او false.</td> + </tr> + <tr> + <td><a class="new" href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Reference/Global_Objects/String/match" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>match</code></a></td> + <td dir="rtl"> تقوم هذه الوظيفة بتنفيذ بحث لمطابقة سلسلة نصية. وتعود بمصفوفة تحتوي على نتيجة البحث، او تعود ب null في حالة عدم المطابقة. (نفس ما تقوم به الوظيفة exec).</td> + </tr> + <tr> + <td><a class="new" href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Reference/Global_Objects/String/search" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>search</code></a></td> + <td dir="rtl"> تقوم هذه الوظيفة بعمل فحص لمطابقة سلسلة نصية. وتعود برقم المكان الذي يتواجد فيه ما تمت مطابقته. او ب -1 في حالة لم يتم العثور على المطلوب.</td> + </tr> + <tr> + <td><a class="new" href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Reference/Global_Objects/String/replace" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>replace</code></a></td> + <td dir="rtl"> تقوم هذه الوظيفة بتنفيذ بحث لمطابقة سلسلة نصية. ويحل محل السلسلة الجزئية المتطابقة، السلسلة الجزئية البديلة.</td> + </tr> + <tr> + <td><a class="new" href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Reference/Global_Objects/String/split" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>split</code></a></td> + <td dir="rtl"> هذه الوظيفة تستخدم الريجكس او سلسلة نصية ثابتة لتقسيم السلسلة الى مصفوفة من السلاسل الجزئية.</td> + </tr> + </tbody> +</table> + +<p dir="rtl" style="font-family: tahoma;">عندما تريد معرفة ما اذا كان الباترن موجود في سلسلة نصية ام لا، استخدم اما الوظيفة <strong><code>test</code></strong> او الوظيفة <strong><code>search</code></strong> ، اما لمعرفة المزيد من المعلومات (ولكن أبطأ قليلا في التنفيذ)، استخدم اما الوظيفة <strong><code>exec</code></strong> او الوظيفة <strong><code>match</code></strong> اذا استخدمت <strong><code>exec</code></strong> او <strong><code>match</code></strong> ونجحت المطابقة، فان هاتان الوظيفتان ستعود بمصفوفة، وفي نفس الوقت ستقوم بتحديث خصائص الريجكس المرتبطة به وكذلك خصائص الريجكس <strong><code>RegExp</code></strong>. اذا فشلت المطابقة, ستعود الوظيفة <strong><code>exec</code></strong> ب <strong><code>null</code></strong> ( <span class="short_text" id="result_box" lang="ar"><span>التي تفرض</span></span> <span lang="ar"><span>:</span></span> <code><strong>false</strong></code>).</p> + +<p dir="rtl" style="font-family: tahoma;">في المثال التالي، السكريبت يستخدم الوظيفة <strong><code>exec</code></strong> للبحث عن مطابقة في السلسلة النصية:</p> + +<pre class="brush: js line-numbers language-js" dir="rtl" style="font-family: tahoma;"><code class="language-js"><span class="keyword token">var</span> myRe <span class="operator token">=</span> <span class="regex token">/d(b+)d/g</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> myArray <span class="operator token">=</span> myRe<span class="punctuation token">.</span><span class="function token">exec</span><span class="punctuation token">(</span><span class="string token">'cdbbdbsbz'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p dir="rtl" style="font-family: tahoma;">إذا كنت لا تحتاج إلى الوصول إلى خصائص الريجكس، هناك طريقة بديلة لإنشاء <code>myArray</code>، كالتلي:</p> + +<pre class="brush: js line-numbers language-js" dir="rtl" style="font-family: tahoma;"><code class="language-js"><span class="keyword token">var</span> myArray <span class="operator token">=</span> <span class="regex token">/d(b+)d/g</span><span class="punctuation token">.</span><span class="function token">exec</span><span class="punctuation token">(</span><span class="string token">'cdbbdbsbz'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// similar to "cdbbdbsbz".match(/d(b+)d/g); however,</span> + <span class="comment token">// the latter outputs Array [ "dbbd" ], while</span> + <span class="comment token">// /d(b+)d/g.exec('cdbbdbsbz') outputs Array [ "dbbd", "bb" ].</span> + <span class="comment token">// See below for further info (CTRL+F "The behavior associated with the".)</span></code></pre> + +<p dir="rtl" style="font-family: tahoma;">إذا كنت ترغب في بناء ريجكس من سلسلة نصية، هناك بديل آخر، كالتالي:</p> + +<pre class="brush: js line-numbers language-js" dir="rtl" style="font-family: tahoma;"><code class="language-js"><span class="keyword token">var</span> myRe <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">RegExp</span><span class="punctuation token">(</span><span class="string token">'d(b+)d'</span><span class="punctuation token">,</span> <span class="string token">'g'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> myArray <span class="operator token">=</span> myRe<span class="punctuation token">.</span><span class="function token">exec</span><span class="punctuation token">(</span><span class="string token">'cdbbdbsbz'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p dir="rtl" style="font-family: tahoma;">مع هذا السكريبت، تنجح المطابقة، ويتم ارجاع مصفوفة وتحديث الخصائص معروض في الجدول التالي.</p> + +<table class="standard-table" id="jumbIt" style="font-family: tahoma;"> + <caption> + <p>نتائج تنفيذ الريجكس</p> + </caption> + <thead> + <tr> + <th scope="col">الكائن</th> + <th scope="col">الخاصية او الفهرس</th> + <th scope="col">الوصف</th> + <th scope="col">في هذا المثال</th> + </tr> + </thead> + <tbody> + <tr> + <td rowspan="4"><code>myArray</code></td> + <td> </td> + <td dir="rtl">السلسلة النصية التي جرى مطابقتها وجميع السلاسل النصية الجزئية المفهرسة.</td> + <td><code>['dbbd', 'bb', index: 1, input: 'cdbbdbsbz']</code></td> + </tr> + <tr> + <td><code>index</code></td> + <td>فهرس بداية المُطابَقة في السلسلة النصية، والفهرسة تبتدئ من 0.</td> + <td><code>1</code></td> + </tr> + <tr> + <td><code>input</code></td> + <td>السلسلة النصية الأصلية.</td> + <td><code>"cdbbdbsbz"</code></td> + </tr> + <tr> + <td><code>[0]</code></td> + <td>الرموز الاخيرة التي جرى مطابقتها</td> + <td><code>"dbbd"</code></td> + </tr> + <tr> + <td rowspan="2"><code>myRe</code></td> + <td><code>lastIndex</code></td> + <td dir="rtl">الفهرس الذي ستبدأ عنده عملية البحث عن المطابقة التالية. وإذا لم يتم ضبط البند "<code>g</code>" فستبقى قيمته مساويةً للصفر. للمزيد حول <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#Advanced_searching_with_flags">البحث المتقدم باستخدام البنود</a>.</td> + <td><code>5</code></td> + </tr> + <tr> + <td><code>source</code></td> + <td dir="rtl">نص الباترن. تم تحديثه في الوقت الذي تم فيه إنشاء الريجكس، وليس وقت تنفيذه.</td> + <td><code>"d(b+)d"</code></td> + </tr> + </tbody> +</table> + +<p dir="rtl" style="font-family: tahoma;">كما شاهدنا في المثال الثاني، تستطيع استخدام ريجكس منشا من خلال معد الاوبجكت <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"object initializer"</code>، من دون اسناده الى متغير. اذا قمت بعمل ذالك، كل ما سيحدث هو ظهور ريجكس جديد. لهذا السبب، لا يمكن الوصول الى خصائص الريجكس. يوضح المثال التالي كيفية الوصول الى خصائص الكائن بالطريقة الصحيحة:</p> + +<pre class="brush: js line-numbers language-js" dir="rtl" style="font-family: tahoma;"><code class="language-js"><span class="keyword token">var</span> myRe <span class="operator token">=</span> <span class="regex token">/d(b+)d/g</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> myArray <span class="operator token">=</span> myRe<span class="punctuation token">.</span><span class="function token">exec</span><span class="punctuation token">(</span><span class="string token">'cdbbdbsbz'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'The value of lastIndex is '</span> <span class="operator token">+</span> myRe<span class="punctuation token">.</span>lastIndex<span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// "The value of lastIndex is 5"</span></code></pre> + +<p style="font-family: tahoma;">بينما يوضح المثال التالي كيفية الوصول الى خصائص الكائن بالطريقة الخاطئة:</p> + +<pre class="brush: js line-numbers language-js" dir="rtl" style="font-family: tahoma;"><code class="language-js"><span class="keyword token">var</span> myArray <span class="operator token">=</span> <span class="regex token">/d(b+)d/g</span><span class="punctuation token">.</span><span class="function token">exec</span><span class="punctuation token">(</span><span class="string token">'cdbbdbsbz'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'The value of lastIndex is '</span> <span class="operator token">+</span> <span class="regex token">/d(b+)d/g</span><span class="punctuation token">.</span>lastIndex<span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// "The value of lastIndex is 0"</span></code></pre> + +<p dir="rtl" style="font-family: tahoma;">حاصل الباترن <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">/d(b+)d/g</code> في كلتا التعليمات البرمجية، عبارة عن كائنان مختلفان، لذالك هما مختلفان في قيمة الخاصية <code>lastIndex</code> اذا كنت ترغب في الوصول الى خصائص الريجكس المنشا من طرف معد او مهيئ الاوبجكت، يلزمك اولا اسناده لمتغير.</p> + +<h3 class="highlight-spanned" id="Using_parenthesized_substring_matches_2" style="font-family: tahoma;"><span class="highlight-span"><a id="Using_parenthesized_substring_matches" name="Using_parenthesized_substring_matches">Using parenthesized substring matches</a></span></h3> + +<p dir="rtl" style="font-family: tahoma;">بمجرد تضمين جزء من الباترن داخل الاقواس الهلالية، سيصبح جزءا مفهرسا قابل لاعادة الاستخدام، مثلا، الباترن <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">/a(b)c/</code> سيطابق <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'abc'</code> في <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">"abcd"</code> ويفهرس المطابقة الجزئية <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">(b)</code> برقم <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">1</code>، ناتج المطابقة الجزئية <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">(b)</code> هو السلسلة الحرفية الجزئية <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'b'</code>. لاستدعاء هذا الجزء المفهرس خارج الباترن، استخدم عناصر المصفوفة <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">[1]...</code>. ولاعادة استخدامها داخل الباترن استخدم الفهرسة الرقمية <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">\1 ...</code>.<br> + - كيفية استدعائها خارج الباترن:</p> + +<pre class="brush: js line-numbers language-js" dir="rtl" style="font-family: tahoma;"><code class="language-js"><span class="keyword token">var</span> myRe <span class="operator token">=</span> <span class="regex token">/a(b)c/</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> myArray <span class="operator token">=</span> myRe<span class="punctuation token">.</span><span class="function token">exec</span><span class="punctuation token">(</span><span class="string token">'abcb'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'The result of submatch N1: '</span> <span class="operator token">+</span> myArray<span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">]</span> <span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// log: The result of submatch N1: b</span></code></pre> + +<p dir="rtl" style="font-family: tahoma;">يمكنك استخدام عدد لا متناهي من هذه الاجزاء المفهرسة، تبتدئ الفهرسة من واحد، عائد المصفوفة سيتضمن جميع الاجزاء المفهرسة في الباترن.<br> + كيفية اعادة استخدامها داخل الباترن:</p> + +<pre class="brush: js line-numbers language-js" dir="rtl" style="font-family: tahoma;"><code class="language-js"><span class="keyword token">var</span> myRe <span class="operator token">=</span> <span class="regex token">/a(b)c\s\1/g</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> myArray <span class="operator token">=</span> myRe<span class="punctuation token">.</span><span class="function token">exec</span><span class="punctuation token">(</span><span class="string token">'abc b'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'The result of submatch N1: '</span> <span class="operator token">+</span> myArray<span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">]</span> <span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// log: The result of submatch N1: b</span></code></pre> + +<p dir="rtl" style="font-family: tahoma;">يستخدم السكريبت التالي الوظيفة <a class="new" href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Reference/Global_Objects/String/replace" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>()replace</code></a> لعكس الكلمتين John و Smith في السلسلة النصية <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">'John Smith'</code>. ويستخدم في نص الاستبدال، المتغيرات السحرية <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">$1</code> و <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-family: consolas; font-weight: bold; background: transparent none repeat scroll 0% 0%;">$2</code> لاستدعاء المطابقة الجزئية المفهرسة الاولى والثانية. مثال:</p> + +<pre class="brush: js line-numbers language-js" dir="rtl" style="font-family: tahoma;"><code class="language-js"><span class="keyword token">var</span> re <span class="operator token">=</span> <span class="regex token">/(\w+)\s(\w+)/</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> str <span class="operator token">=</span> <span class="string token">'John Smith'</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> newstr <span class="operator token">=</span> str<span class="punctuation token">.</span><span class="function token">replace</span><span class="punctuation token">(</span>re<span class="punctuation token">,</span> <span class="string token">'$2, $1'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>newstr<span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// "Smith, John"</span></code></pre> + +<div class="note" style="font-family: tahoma;"> +<p dir="rtl">ملاحظة: يسمح باستخدام المتغيرات السحرية، 9 مرات فقط، في العملية الواحدة.</p> +</div> + +<h3 class="highlight-spanned" dir="rtl" id="البحث_المتقدم_باستخدام_البنود" style="font-family: tahoma;"><span class="highlight-span"><a name="Advanced_searching_with_flags">البحث المتقدم باستخدام البنود</a></span></h3> + +<p dir="rtl" style="font-family: tahoma;">التعبيرات القياسية في الجافاسكريبت لها خمسة بنود ، وجودها اختياريا، تسمح لنا بعمل بحثا عاما او بحثا دون مراعات لحالة الاحرف. يمكن استخدامها اما منفردة او مجتمعة وكذالك في اي ترتيب، حسب الطلب، وهي جزء من الريجكس.</p> + +<table class="standard-table" style="font-family: tahoma;"> + <caption> + <p>بنود الريجكس</p> + </caption> + <thead> + <tr> + <th scope="col">Flag</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><strong><code>g</code></strong></td> + <td dir="rtl">بحث عام، عدم وجوده = النتيجة الاولى فقط.</td> + </tr> + <tr> + <td><strong><code>i</code></strong></td> + <td dir="rtl">عدم مراعاة حالة الاحرف، سواء كانت صغيرة او كبيرة.</td> + </tr> + <tr> + <td><strong><code>m</code></strong></td> + <td dir="rtl">البحث في السطور المتعدد = كامل النص.</td> + </tr> + <tr> + <td><strong><code>u</code></strong></td> + <td dir="rtl">سلسلة يونيكود، أي معاملة الباترن على أنه سلسلة من رموز يونيكود (Unicode code points).</td> + </tr> + <tr> + <td><strong><code>y</code></strong></td> + <td dir="rtl">المطابقة ستبدأ من الفهرس المُشار إليه بالخاصية <code>lastIndex</code> لكائن التعابير النمطية في السلسلة الهدف، ولن تتم محاولة مطابقة ما قبل هذا الفهرس. للمزيد من المعلومات <a class="new" href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Reference/Global_Objects/RegExp/sticky" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>sticky</code></a></td> + </tr> + </tbody> +</table> + +<p dir="rtl" style="font-family: tahoma;">لتضمين بند مع الريجكس استخدم التعبير التالي:</p> + +<pre class="brush: js line-numbers language-js" dir="rtl" style="font-family: tahoma;"><code class="language-js"><span class="keyword token">var</span> re <span class="operator token">=</span> <span class="operator token">/</span>pattern<span class="operator token">/</span>flags<span class="punctuation token">;</span></code></pre> + +<p dir="rtl" style="font-family: tahoma;">او</p> + +<pre class="brush: js line-numbers language-js" dir="rtl" style="font-family: tahoma;"><code class="language-js"><span class="keyword token">var</span> re <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">RegExp</span><span class="punctuation token">(</span><span class="string token">'pattern'</span><span class="punctuation token">,</span> <span class="string token">'flags'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p dir="rtl" style="font-family: tahoma;"><span id="result_box" lang="ar"><span>البنود، جزء لا يتجزأ من الريجكس.</span> <span>لا يمكن إزالتها أو إضافتها لاحقا.</span></span></p> + +<p dir="rtl" style="font-family: tahoma;">مثلا، <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">re = /\w+\s/g</code> يقوم بانشاء ريجكس يبحث على واحد او اكثر من الرموز متبوعة بمسافة واحدة، يقوم بتنفيذ هذا الاجراء على السلسلة الحرفية (كاملة = <code>g</code>):</p> + +<pre class="brush: js line-numbers language-js" dir="rtl" style="font-family: tahoma;"><code class="language-js"><span class="keyword token">var</span> re <span class="operator token">=</span> <span class="regex token">/\w+\s/g</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> str <span class="operator token">=</span> <span class="string token">'fee fi fo fum'</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> myArray <span class="operator token">=</span> str<span class="punctuation token">.</span><span class="function token">match</span><span class="punctuation token">(</span>re<span class="punctuation token">)</span><span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>myArray<span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// ["fee ", "fi ", "fo "]</span></code></pre> + +<p dir="rtl" style="font-family: tahoma;">يمكنك استبدال هذا السطر:</p> + +<pre class="brush: js line-numbers language-js" dir="rtl" style="font-family: tahoma;"><code class="language-js"><span class="keyword token">var</span> re <span class="operator token">=</span> <span class="regex token">/\w+\s/g</span><span class="punctuation token">;</span></code></pre> + +<p dir="rtl" style="font-family: tahoma;">ب:</p> + +<pre class="brush: js line-numbers language-js" dir="rtl" style="font-family: tahoma;"><code class="language-js"><span class="keyword token">var</span> re <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">RegExp</span><span class="punctuation token">(</span><span class="string token">'\\w+\\s'</span><span class="punctuation token">,</span> <span class="string token">'g'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p dir="rtl" style="font-family: tahoma;">وستحصل على نفس النتيجة.</p> + +<p dir="rtl" style="font-family: tahoma;">يستخدم البند <strong><code>m</code></strong> لاخبار محرك الريجكس، بان المدخلات النصية، المتعددة السطور، يجب ان تعامل كسطور متعددة. اذا تم استخدام البند <strong><code>m</code></strong> فسيتطابق الرمزان الخاصان <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">^</code> و <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">$</code> ، <span id="result_box" lang="ar"><span>مع بداية أو نهاية كل سطر من المدخلات،</span></span> بدلا من المدخل بالكامل. مثال:</p> + +<pre class="brush: js line-numbers language-js" dir="rtl" style="font-family: tahoma;"><code class="language-js"><span class="keyword token">var</span> re <span class="operator token">=</span> <span class="regex token">/^Multi\s*line$/gm</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> str <span class="operator token">=</span> <span class="string token">'Multi line\n or \nMultiline'</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> myArray <span class="operator token">=</span> str<span class="punctuation token">.</span><span class="function token">match</span><span class="punctuation token">(</span> re <span class="punctuation token">)</span><span class="punctuation token">;</span> + +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span> myArray <span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="comment token">// log: [ "Multi line", "Multiline" ]</span></code></pre> + +<p dir="rtl" style="font-family: tahoma;"> </p> + +<h2 id="امثلة" style="font-family: tahoma;">امثلة</h2> + +<p style="font-family: tahoma;">تبين الامثلة التالية بعض استخدامات الريجكس</p> + +<h3 class="highlight-spanned" dir="rtl" id="اعادة_صياغة_المدخلات_النصية." style="font-family: tahoma;"><span class="highlight-span">اعادة صياغة المدخلات النصية.</span></h3> + +<p dir="rtl" style="font-family: tahoma;">يوضح المثال التالي كيف يمكن للريجكس ان يتلاعب في بنية السلسلة النصية، وايضا كيفية استخدام <strong><code>()string.split</code></strong> و <strong><code>()string.replace</code></strong>. سيقوم السكريبت التالي بتنظيف واعادة صياغة السلسلة النصية، التي تحتوي على اسماء مفصولة بمسافات فارغة، تابات، وبالظبط فاصلة منقوطة واحدة. واخيرا سيقوم بعكس هذه الاسماء وترتيبها من a الى z.</p> + +<pre class="brush: js line-numbers language-js" dir="rtl" style="font-family: tahoma;"><code class="language-js"><span class="comment token">// The name string contains multiple spaces and tabs,</span> +<span class="comment token">// and may have multiple spaces between first and last names.</span> +<span class="keyword token">var</span> names <span class="operator token">=</span> <span class="string token">'Orange Trump ;Fred Barney; Helen Rigby ; Bill Abel ; Chris Hand '</span><span class="punctuation token">;</span> + +<span class="keyword token">var</span> output <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">'---------- Original String\n'</span><span class="punctuation token">,</span> names <span class="operator token">+</span> <span class="string token">'\n'</span><span class="punctuation token">]</span><span class="punctuation token">;</span> + +<span class="comment token">// Prepare two regular expression patterns and array storage.</span> +<span class="comment token">// Split the string into array elements.</span> + +<span class="comment token">// pattern: possible white space then semicolon then possible white space</span> +<span class="keyword token">var</span> pattern <span class="operator token">=</span> <span class="regex token">/\s*;\s*/</span><span class="punctuation token">;</span> + +<span class="comment token">// Break the string into pieces separated by the pattern above and</span> +<span class="comment token">// store the pieces in an array called nameList</span> +<span class="keyword token">var</span> nameList <span class="operator token">=</span> names<span class="punctuation token">.</span><span class="function token">split</span><span class="punctuation token">(</span>pattern<span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// new pattern: one or more characters then spaces then characters.</span> +<span class="comment token">// Use parentheses to "memorize" portions of the pattern.</span> +<span class="comment token">// The memorized portions are referred to later.</span> +pattern <span class="operator token">=</span> <span class="regex token">/(\w+)\s+(\w+)/</span><span class="punctuation token">;</span> + +<span class="comment token">// Below is the new array for holding names being processed.</span> +<span class="keyword token">var</span> bySurnameList <span class="operator token">=</span> <span class="punctuation token">[</span><span class="punctuation token">]</span><span class="punctuation token">;</span> + +<span class="comment token">// Display the name array and populate the new array</span> +<span class="comment token">// with comma-separated names, last first.</span> +<span class="comment token">//</span> +<span class="comment token">// The replace method removes anything matching the pattern</span> +<span class="comment token">// and replaces it with the memorized string—the second memorized portion</span> +<span class="comment token">// followed by a comma, a space and the first memorized portion.</span> +<span class="comment token">//</span> +<span class="comment token">// The variables $1 and $2 refer to the portions</span> +<span class="comment token">// memorized while matching the pattern.</span> + +output<span class="punctuation token">.</span><span class="function token">push</span><span class="punctuation token">(</span><span class="string token">'---------- After Split by Regular Expression'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="keyword token">var</span> i<span class="punctuation token">,</span> len<span class="punctuation token">;</span> +<span class="keyword token">for</span> <span class="punctuation token">(</span>i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">,</span> len <span class="operator token">=</span> nameList<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i <span class="operator token"><</span> len<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + output<span class="punctuation token">.</span><span class="function token">push</span><span class="punctuation token">(</span>nameList<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + bySurnameList<span class="punctuation token">[</span>i<span class="punctuation token">]</span> <span class="operator token">=</span> nameList<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span><span class="function token">replace</span><span class="punctuation token">(</span>pattern<span class="punctuation token">,</span> <span class="string token">'$2, $1'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="comment token">// Display the new array.</span> +output<span class="punctuation token">.</span><span class="function token">push</span><span class="punctuation token">(</span><span class="string token">'---------- Names Reversed'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">for</span> <span class="punctuation token">(</span>i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">,</span> len <span class="operator token">=</span> bySurnameList<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i <span class="operator token"><</span> len<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + output<span class="punctuation token">.</span><span class="function token">push</span><span class="punctuation token">(</span>bySurnameList<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="comment token">// Sort by last name, then display the sorted array.</span> +bySurnameList<span class="punctuation token">.</span><span class="function token">sort</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +output<span class="punctuation token">.</span><span class="function token">push</span><span class="punctuation token">(</span><span class="string token">'---------- Sorted'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">for</span> <span class="punctuation token">(</span>i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">,</span> len <span class="operator token">=</span> bySurnameList<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i <span class="operator token"><</span> len<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + output<span class="punctuation token">.</span><span class="function token">push</span><span class="punctuation token">(</span>bySurnameList<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +output<span class="punctuation token">.</span><span class="function token">push</span><span class="punctuation token">(</span><span class="string token">'---------- End'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>output<span class="punctuation token">.</span><span class="function token">join</span><span class="punctuation token">(</span><span class="string token">'\n'</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<h3 class="highlight-spanned" id="استخدام_الرموز_الخاصة_للتحقق_من_صحة_المدخلات." style="font-family: tahoma;"><span class="highlight-span">استخدام الرموز الخاصة للتحقق من صحة المدخلات.</span></h3> + +<p dir="rtl" style="font-family: tahoma;">في المثال التالي، يتوقع من المستخدم ادخال رقم الهاتف. عندما سينقر المستخدم على زر "الفحص" سيقوم السكريبت بفحص صحة الرقم. اذا كان الرقم صحيحا، سيقوم السكريبت باظهار رسالة تشكر المستخدم وتظهر الرقم المدخل. اذا كان الرقم غير صحيح، سيقوم السكريبت باخبار المستخدم بان الرقم المدخل غير صحيح.</p> + +<p dir="rtl" style="font-family: tahoma;">بعد <em>non-capturing parentheses</em> <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">(?:</code> سينظر الريجكس الى الثلاثة ارقام <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">\d{3}</code> او <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">|</code> الى القوس اليساري <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">\(</code> متبوعا بثلاثة ارقام<code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;"> \d{3}</code> متبوعة بقوس الاغلاق <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">\)</code>, (نهاية <em>non-capturing parenthesis</em> <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">)</code>)، متبوعة بشرطة واحدة تليها الباكسلاش او النقطة الكسرية، اذا وجدت قم بفهرستها <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">([-\/\.])</code>، متبوعة بثلاث ارقام <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">\d{3}</code>، متبوعة باستدعاء الجزء المفهرس <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">\1</code>, متبوعا باربعة ارقام <code dir="ltr" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: bold; font-family: consolas; background: transparent none repeat scroll 0% 0%;">\d{4}</code>.</p> + +<p dir="rtl" style="font-family: tahoma;"><span id="result_box" lang="ar"><span>يتم تنشيط حدث التغيير عندما يقوم المستخدم بالضغط على إنتر وملأ القيمة </span></span><code>RegExp.input</code><span lang="ar"><span>.</span></span></p> + +<pre class="brush: html line-numbers language-html" dir="rtl" style="font-family: tahoma;"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>meta</span> <span class="attr-name token">http-equiv</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Content-Type<span class="punctuation token">"</span></span> <span class="attr-name token">content</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/html; charset<span class="punctuation token">=</span>ISO-8859-1<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>meta</span> <span class="attr-name token">http-equiv</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Content-Script-Type<span class="punctuation token">"</span></span> <span class="attr-name token">content</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="language-javascript script token"> + <span class="keyword token">var</span> re <span class="operator token">=</span> <span class="regex token">/(?:\d{3}|\(\d{3}\))([-\/\.])\d{3}\1\d{4}/</span><span class="punctuation token">;</span> + <span class="keyword token">function</span> <span class="function token">testInfo</span><span class="punctuation token">(</span>phoneInput<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">var</span> OK <span class="operator token">=</span> re<span class="punctuation token">.</span><span class="function token">exec</span><span class="punctuation token">(</span>phoneInput<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span>OK<span class="punctuation token">)</span> + window<span class="punctuation token">.</span><span class="function token">alert</span><span class="punctuation token">(</span>phoneInput<span class="punctuation token">.</span>value <span class="operator token">+</span> <span class="string token">' isn\'t a phone number with area code!'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">else</span> + window<span class="punctuation token">.</span><span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">'Thanks, your phone number is '</span> <span class="operator token">+</span> OK<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + </span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Enter your phone number (with area code) and then click "Check". + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span>The expected format is like ###-###-####.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>form</span> <span class="attr-name token">action</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>#<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>phone<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>button</span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>testInfo(document.getElementById(<span class="punctuation token">'</span>phone<span class="punctuation token">'</span>));<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Check<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>button</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>form</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> +</div> + +<p>{{PreviousNext("Web/JavaScript/Guide/Text_formatting", "Web/JavaScript/Guide/Indexed_collections")}}</p> 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 +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}</div> + +<p class="summary" dir="rtl">تم تصميم جافا سكريبت على نموذج بسيط يستند إلى الكائنات. الكائن هو عبارة عن مجموعة من الخصائص، كل خاصية لها اسم وقيمة key/value يمكن أن تكون قيمة هذه الخاصية عبارة عن دالة، وفي هذه الحالة يمكن ان تسمى بالوظيفة « method ». بالإضافة إلى الكائنات الأصلية التي توفرها بيئة المتصفحات، يمكنك انشاء كائنات خاصة بك. يصف هذا الفصل كيفية استخدام الكائنات، والخصائص والدوال او الوظائف، وايضا كيفية إنشاء الكائنات الخاصة بك.</p> + +<h2 dir="rtl" id="نظرة_عامة_حول_الكائنات">نظرة عامة حول الكائنات</h2> + +<div style="font-size: 15px; font-family: 'tahoma';"> +<p dir="rtl">الكائنات في جافا سكريبت: كما هو الحال في العديد من لغات البرمجة الأخرى، يمكن مقارنة الكائنات بالحياة الحقيقية. ويمكن تشبيه مفهوم الكائنات في جافا سكريبت بالأشياء الملموسة في واقع الحياة.</p> + +<p dir="rtl">في الجافاسكريبت، الكائن هو كيان مستقل بخصائصه وانواعه، يمكن مقارنته بكوب، على سبيل المثال.الكوب هو كائن له خصائصه، الكوب له لون، له شكل، له وزن، صنع بمواد معينة، واشياء اخرى. بنفس الطريقة، كائنات الجافا سكريبت لها ايضا خصائصها التي تميزها.</p> + +<h2 dir="rtl" id="الكائنات_والخصائص">الكائنات والخصائص</h2> + +<p dir="rtl">كائنات الجافاسكريبت لها خصائص مرتبطة بها. يمكن تشبيه خاصية الكائن بمتغير مرتبط به. خصائص الكائن هي في الأساس نفس متغيرات جافا سكريبت العادية. خصائص الكائن تحدد مميزات الكائن، يمكنك الوصول إلى خصائص الكائن من خلال نقطة التدوين :</p> + +<pre class="brush: js">objectName.propertyName +</pre> + +<p dir="rtl">ككل متغيرات جافاسكريبت، اسم الكائن واسم الخاصية حساسة تجاه الاحرف (case sensitive). يمكنك تعيين خاصية ومنحها قيمة اولية. على سبيل المثال، لنقم بانشاء كائن باسم myCar وتعين خصائص له بالاسماء التالية : make, model و year كما في المثال التالي :</p> + +<pre class="brush: js">var myCar = new Object(); +myCar.make = 'Ford'; +myCar.model = 'Mustang'; +myCar.year = 1969; +</pre> + +<p>خصائص الكائن الغير معرفة هي {{jsxref("undefined")}} (وليست {{jsxref("null")}}).</p> + +<pre class="brush: js">myCar.color; // undefined</pre> + +<p dir="rtl">يمكن الوصول الى خصائص الكائنات عن طريق الاقواس المربعة بدلا من نقطة التدوين، في بعض الاحيان يكون من الضروري استخدام الاقواس المربعة للوصول الى خصائص الكائن (لمزيد من المعلومات شاهد <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors">property accessors</a>). في بعض الاحيان تسمى الكائننات بمصفوفات مترابطة (associative arrays)، نظرا للشبه الكبير بينهما، حيث يمكن استخدام اسم الخاصية للوصول إلى قيمتها، الامر الذي تعتمده ايضا المصفوفات الترابطية. على سبيل المثال يمكن الوصول إلى خصائص الكائن myCar على النحو التالي:</p> + +<pre class="brush: js">myCar['make'] = 'Ford'; +myCar['model'] = 'Mustang'; +myCar['year'] = 1969; +</pre> + +<p dir="rtl">اسم خاصية الكائن يمكن ان يكون اي نوع من انواع النصوص الصحيحة لجافاسكريبت او اي شئ يمكن تحويله الى سلسلة نصية، بما في ذالك النص الفارغ، والنصوص التي تحتوي على رموز او اسماء محجوزة لجافاسكريبت والغير مسموح بها كمعرفات سواء بالنسبة لخصائص الكائن او للمتغيرات العادية على سبيل المثال، اسم خاصية يحتوي على مسافة او اسمين موصولين بواصلة (-) او الاسم الذي يبتدئ برقم. كل هذه الاشياء يمكن الوصول اليها عن طريق الاقواس المربعة فقط. هذه الاقواس فعالة جدا خصوصا مع اسماء الخصائص التي يتم تعينها بشكل ديناميكي (عندما لا يتم تحديد اسم الخاصية الا عند وقت التشغيل ). انظر الامثلة ادناه :</p> + +<pre class="brush: js">// 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); +</pre> + +<p dir="rtl">يرجى ملاحظة أن كافة المفاتيح في الاقواس المربعة تم تحويلها إلى سلسلة نصية (string type)، لان الكائنات في جافاسكريبت تتطلب بان يكون نوع المفتاح سلسلة نصية فقط، على سبيل المثال، في المثال اعلاه، عندما تم اضافة المفتاح rand الى ال myObj، الجافاسكريبت استدعت الوظيفة ()obj.toString بشكل اوتوماتيكي، واستخدمت ناتج السلسلة النصية كمفتاح جديد. <br> + مع العلم ان ("typeof rand === "number ).</p> + +<p dir="rtl">يمكنك أيضا الوصول إلى الخصائص باستخدام قيمة نصية تم تخزينها في متغير :</p> + +<pre class="brush: js">var propertyName = 'make'; +myCar[propertyName] = 'Ford'; + +propertyName = 'model'; +myCar[propertyName] = 'Mustang'; +</pre> + +<p dir="rtl">يمكنك استخدام <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code> لعمل تكرار على خصائص الكائن القابلة للتصفح ( لمزيد من المعلومات حول <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">enumerable properties</a> ). لتوضيح ما نعنيه : تقوم الدالة التالية باظهار خصائص الكائن، عندما سيمرر لها الكائن واسم الكائن كبارامترات :</p> + +<pre class="brush: js">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; +} +</pre> + +<p dir="rtl">وهكذا، باستدعاء الدالة على هذا النحو showProps(myCar, "myCar") سينتج عنها النتائج التالية :</p> + +<pre class="brush: js">myCar.make = Ford +myCar.model = Mustang +myCar.year = 1969</pre> + +<h2 dir="rtl" id="تصفح_خصائص_الكائن">تصفح خصائص الكائن</h2> + +<p dir="rtl">ابتداءا من <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla" title="en-US/docs/JavaScript/ECMAScript 5 support in Mozilla">ECMAScript 5</a>، هناك ثلاثة طرق لتصفح/المرور على خصائص الكائن :</p> + +<ul dir="rtl"> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in" title="en-US/docs/JavaScript/Reference/Statements/for...in">for...in</a></code> loops<br> + هذه الوظيفة تمر على جميع خصائص الكائن القابلة للتصفح و ال prototype chain.</li> + <li>{{jsxref("Object.keys", "Object.keys(o)")}}<br> + تعود هذه الوظيفة بمصفوفة بجميع اسماء مفاتيح الخصائص القابلة للتصفح في الكائن o، باستثناء الموجودة في ال prototype chain.</li> + <li>{{jsxref("Object.getOwnPropertyNames", "Object.getOwnPropertyNames(o)")}}<br> + تعود هذه الوظيفة بمصفوفة بجميع اسماء الخصائص الموجودة في الكائن o، سواء القابلة للتصفح ام لا.</li> +</ul> + +<p dir="rtl">قبل ECMAScript 5، لم يكن هناك أية طريقة لتصفح كافة خصائص الكائن. الا انه، يمكن تحقيق ذلك باستخدام الدالة التالية:</p> + +<pre class="brush: js">function listAllProperties(o) { + var objectToInspect; + var result = []; + + for(objectToInspect = o; objectToInspect !== null; objectToInspect = Object.getPrototypeOf(objectToInspect)) { + result = result.concat(Object.getOwnPropertyNames(objectToInspect)); + } + + return result; +} +</pre> + +<p dir="rtl">يمكن لهذه الدالةان تكون مفيدة في الكشف عن الخصائص "المخفية" (الخصائص الموجودة في ال prototype chain والتي لا يمكن الوصول إليها من خلال الكائن، بسبب وجود خاصية اخرى لها نفس الاسم في ال prototype chain. لجدولة الخصائص الظاهرة فقط، عليك إزالة التكرار في المصفوفة.</p> + +<h2 dir="rtl" id="إنشاء_كائنات_جديدة">إنشاء كائنات جديدة</h2> + +<p dir="rtl">جافا سكريبت لديها العديد من الكائنات المحددة مسبقاً. وبالإضافة إلى ذلك، يمكنك إنشاء كائنات خاصة بك. يمكنك إنشاء كائن باستخدام <a href="/ar/docs/Web/JavaScript/Reference/Operators/Object_initializer">مهيئ الكائن</a> (من المهم مراجعة هذا الموضوع حتي يمكنك فهم هذه الجزئية. كما انصح وبشدة مراجعة الفصل الخاص ب <a href="https://developer.mozilla.org/ar/docs/Learn/JavaScript/Objects/Basics">اساسيات الكائن في جافاسكريبت</a> ).</p> + +<p dir="rtl">كما يمكنك ايضا انشاء كائن بواسطة <a href="https://developer.mozilla.org/ar/docs/Learn/JavaScript/Objects/Object-oriented_JS">منشئ الوظيفة</a> ( constructor function ) ومن ثم انشاء مثيل/نسخة له، من خلال الكلمة المحجوزة new.</p> + +<h3 dir="rtl" id="استخدام_object_initializers"><a id="استخدام object initializers" name="استخدام object initializers">استخدام object initializers</a></h3> + +<p dir="rtl">بالإضافة إلى إنشاء كائنات باستخدام constructor function، يمكنك إنشاء كائنات باستخدام <a href="/ar/docs/Web/JavaScript/Reference/Operators/Object_initializer">مهيئ الكائن</a>. هذا النوع من الكائنات يشار إليه في بعض الأحيان ب object literal notation . وهو يتسق مع المصطلحات المستخدمة من قبل ++C.</p> + +<p dir="rtl">التعبير عن كائن باستخدام object initializers:</p> + +<pre class="brush: js">var obj = { property_1: value_1, // property_# may be an identifier... + 2: value_2, // or a number... + // ..., + 'property n': value_n }; // or a string +</pre> + +<p dir="rtl">حيث ان obj هو اسم الكائن الجديد، وكل property_i هو معرف الخاصية، يمكن ان يكون (اما اسما أو رقما أو سلسلة نصية)،في حين ان كل value_i هي تعليمة برمجية سيتم تعيينها كقيمه إلى الخاصية property_i يمكن (تعينها مباشرة او عن طريق اسنادها الى متغير خارجي).</p> + +<p dir="rtl">تعريف ال obj هو اختياري، اذا لم تكن تريد الرجوع الى هذا الكائن فى اماكن اخرى، فلا حاجة لتعريفه إلى متغير. لاحظ انك ستحتاج الى احاطة object literal بين قوسين. حتى يعمل بشكل سليم. مثال:</p> + +<pre class="brush: js">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 + +</pre> + +<p dir="rtl">مهيئات الكائن، هي تعليمات برمجية، وكل مهئ سيخلق كائن جديد في التعليمة البرمجية التي سيتم تنفيذها. مهيآت الكائنات المتطابقة تنشئ كائنات مميزة والتي لا يمكن مقارنتها ببعضها البعض. يتم إنشاء الكائنات بنفس طريقة انشاء كائن جديد ()new Object، الكائنات المنشاة من خلال ال object literal هي مثيلات الكائن Object.</p> + +<p dir="rtl">تقوم التعليمة البرمجية التالية، بانشاء كائن وتعيينه للمتغير x في حالة ما اذا كان الشرط صحيح:</p> + +<pre class="brush: js">if (cond) var x = {greeting: 'hi there'}; +</pre> + +<p dir="rtl">ينشئ المثال التالي، الكائن myHonda مع ثلاث خصائص. لاحظ أن الخاصية engine هي أيضا كائن له خصائصه.</p> + +<pre class="brush: js">var myHonda = {color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}}; +</pre> + +<p dir="rtl">يمكنك أيضا استخدام مهيئات الكائن لإنشاء المصفوفات. شاهد <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Array_literals">array literals</a>.</p> + +<h3 dir="rtl" id="استخدام_ال_constructor_function">استخدام ال constructor function</h3> + +<p dir="rtl">كبديل، يمكنك إنشاء كائن مع هاتين الخطوتين:</p> + +<ol dir="rtl"> + <li>تعريف نوع الكائن بانشاء constructor function. هناك عرف متفق عليه، وهو كتابة الحرف الاول من اسم الكائن بحروف كبيرة Capital. بهدف تمييزه عن باقي الاسماء.</li> + <li>انشاء مثيل/نسخة للكائن بواسطة الكلمة المحجوزة new.</li> +</ol> + +<p dir="rtl">لتحديد نوع الكائن، سنقوم بإنشاء دالة لتحديد اسم لهذا الكائن وخصائصه، ووظائفه، على سبيل المثال، فرضا انك تريد انشاء كائن للسيارات. سيتوجب عليك تسميته ب Car، وايضا يجب ان يمتلك خصائص مثل make، model, و year. للقيام بذلك، سيتوجب عليك انشاء الدالة التالية:</p> + +<pre class="brush: js">function Car(make, model, year) { + this.make = make; + this.model = model; + this.year = year; +} +</pre> + +<p dir="rtl">لاحظ اننا استخدمنا this لتعيين قيم لخصائص الكائن استناداً إلى القيم التي سيتم تمريرها إلى بارامترات الدالة.</p> + +<p dir="rtl">الآن يمكنك إنشاء كائن باسم mycar على النحو التالي:</p> + +<pre class="brush: js">var mycar = new Car('Eagle', 'Talon TSi', 1993); +</pre> + +<p dir="rtl">تقوم هذه التعليمة البرمجية بانشاء mycar، واسناد القيم المحددة لخصائصه. وبالتالي قيمة mycar.make هي قيمة نصية "Eagle"، و mycar.year قيمة رقمية 1993، وهلم جرا.</p> + +<p dir="rtl">يمكنك إنشاء اي عدد من الكائنات من النوع Car واستدعاؤها عن طريق الكلمة المحجوزة new. مثال:</p> + +<pre class="brush: js">var kenscar = new Car('Nissan', '300ZX', 1992); +var vpgscar = new Car('Mazda', 'Miata', 1990); +</pre> + +<p dir="rtl">يمكن للكائن ان يحتوي على خاصية تكون هي نفسها كائن اخر، على سبيل المثال، فرضا انك تريد انشاء كائن تحت الاسم person كما يلي:</p> + +<pre class="brush: js">function Person(name, age, sex) { + this.name = name; + this.age = age; + this.sex = sex; +} +</pre> + +<p dir="rtl">ومن ثم إنشاء مثيلين/نسختين للكائن person كما يلي:</p> + +<pre class="brush: js">var rand = new Person('Rand McKinnon', 33, 'M'); +var ken = new Person('Ken Jones', 39, 'M'); +</pre> + +<p dir="rtl">ثم، يمكنك إعادة تعريف ال Car لتضمين الخاصية owner التي ستمتلك الكائن person كما يلي:</p> + +<pre class="brush: js">function Car(make, model, year, owner) { + this.make = make; + this.model = model; + this.year = year; + this.owner = owner; +} +</pre> + +<p dir="rtl">بعد ذلك يمكنك إنشاء مثيلات/نسخ للكائنات الجديدة، باستخدام ما يلي:</p> + +<pre class="brush: js">var car1 = new Car('Eagle', 'Talon TSi', 1993, rand); +var car2 = new Car('Nissan', '300ZX', 1992, ken); +</pre> + +<p dir="rtl">لاحظ أنه بدلاً من تمرير سلسلة نصية أو قيمة رقمية عند إنشاء الكائنات الجديدة، في البيانات الواردة أعلاه تم تمرير الكائنان rand و ken كبرامترات خاصة بال owner. إذا كنت ترغب في معرفة الاسم الخاص ب car2، يمكنك الوصول إلى الخاصية بالطريقة التالية:</p> + +<pre class="brush: js">car2.owner.name +</pre> + +<p dir="rtl">يمكنك إضافة خاصية جديدة لكائن منشأ مسبقاً. على سبيل المثال، كما في التعليمة البرمجية التالية:</p> + +<pre class="brush: js">car1.color = 'black'; +</pre> + +<p dir="rtl">قمنا باضافة الخاصية color لل car1، وقمنا بتعيين القيمة "black." لها، ومع ذالك فهذا لن يجعلها متاحة لجميع الكائنات من النوع Car. لإضافة خاصية جديدة لكافة الكائنات من نفس النوع Car، يتوجب عليك اضافة هذه الخاصية لل constructor. الخاص بالكائن Car.</p> + +<h3 dir="rtl" id="استخدام_الوظيفة_Object.create">استخدام الوظيفة Object.create</h3> + +<p dir="rtl">يمكن أيضا إنشاء كائنات باستخدام الوظيفة {{jsxref("()Object.create")}} هذه الوظيفة يمكن أن تكون مفيدة للغاية، لأنها تتيح لك أن تختار ال prototype object للكائن الذي تريد إنشاء، دون الحاجة إلى تعريف ال constructor function (بواسطة new).</p> + +<pre class="brush: js">// 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</pre> + +<h2 dir="rtl" id="الوراثة">الوراثة</h2> + +<p dir="rtl">في جافا سكريبت جميع الكائنات ترث من كائن واحد على الأقل. الكائن الذي ترث منه يسمى prototype، والخصائص الموروثة يمكن العثور عليها في ال prototype object لل constructor. شاهد <a href="/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Inheritance and the prototype chain</a> لمزيد من المعلومات.</p> + +<h2 dir="rtl" id="فهرسة_خصائص_الكائن">فهرسة خصائص الكائن</h2> + +<p dir="rtl">يمكنك الاشارة/الوصول إلى خاصية الكائن إما عن طريق الاسم الخاص بها أو عن طريق المؤشر الترتيبي لها (index). إذا قمت في البداية بتعريف خاصية باسمها، سيتوجب عليك دائما الاشارة اليها باسمها، وكذالك اذا قمت في البداية بتعريف خاصية بمؤشرها الترتيبي، ايضا سيتوجب عليك الاشارة اليها بمؤشرها الترتيبي.</p> + +<p dir="rtl">ينطبق هذا الشرط عند إنشاء الكائن وخصائصه داخل ال constructor (كما فعلنا سابقا مع الكائن من النوع Car) وكذالك عند تحديد خصائص فردية بشكل واضح (على سبيل المثال، "myCar.color = "red). اذا قمت في البداية بتعريف خاصية بمؤشرها الترتيبي، مثل "myCar[5] = "25 mpg، وتريد بعد ذالك الوصول اليها سيتوجب عليك استخدام المؤشر الترتيبي على هذا النحو myCar[5].</p> + +<p dir="rtl">والاستثناء لهذه القاعدة هي كائنات ال HTML، مثل forms array. يمكنك الاشارة دائما إلى الكائنات في هذه المصفوفات إما عن طريق مؤشرهم الترتيبي (حسب وجودها في الوثيقة) او عن طريق اسمائها (إذا كانت معرفة). فمثلا، اذا كان الوسم الثاني <FORM> في الوثيقة له السمة (attribute ) باسم "myForm"، يمكنك الاشارة الى هذا الفورم ب document.forms[1] او ب document.forms["myForm"] او ب document.forms.myForm.</p> + +<h2 dir="rtl" id="التحكم_في_خصائص_الكائن">التحكم في خصائص الكائن</h2> + +<p dir="rtl">يمكنك إضافة خاصية إلى كائن محدد سابقا باستخدام الخاصية prototype. هذا النمط سيجعل هذه الخاصية متاحة لكافة الكائنات من النوع المحدد، بدلاً من تحديدها لمثيل واحد فقط. التعليمة البرمجية التالية تضيف الخاصية color الى جميع الكائنات من نوع Car، وبعد ذالك تقوم بتعيين القيمة الجديدة للخاصية color الخاصة بالكائن car1.</p> + +<pre class="brush: js">Car.prototype.color = null; +car1.color = 'black'; +</pre> + +<p dir="rtl">شاهد <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype" title="en-US/docs/JavaScript/Reference/Global Objects/Function/prototype"><code>prototype</code> property</a> لل Function object وايضا <a href="/en-US/docs/Web/JavaScript/Reference">JavaScript reference</a> لمزيد من المعلومات.</p> + +<h2 dir="rtl" id="تعريف_الوظائف">تعريف الوظائف</h2> + +<p dir="rtl">الوظيفة هي دالة مرتبطة مع الكائن، أو، ببساطة، هي خاصية في الكائن قيمتها دالة، يتم تعريف الوظيفة بنفس الطريقة التي يتم بها تعريف الدالة العادية، باستثناء ان هذه الاخيرة يجب أن يتم تعيينها كخاصية لكائن. شاهد ايضا <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">method definitions</a> لمزيد من المعلومات، وكمثال على ما تم ذكره:</p> + +<pre class="brush: js">objectName.methodname = function_name; + +var myObj = { + myMethod: function(params) { + // ...do something + } + + // OR THIS WORKS TOO + + myOtherMethod(params) { + // ...do something else + } +}; +</pre> + +<p dir="rtl">حيث ان ال objectName كائن موجود، وال methodname هو الاسم المعين إلى الوظيفة، و function_name هو اسم الدالة.</p> + +<p dir="rtl">ثم يمكنك استدعاء الوظيفة في سياق الكائن كما يلي:</p> + +<pre class="brush: js">object.methodname(params); +</pre> + +<p dir="rtl">يمكنك تعريف وظائف الكائن باستدعاء وظيفة معرفة في constructor الكائن. على سبيل المثال، يمكنك القيام بتعريف الدالة التي من شأنها تهيئة وعرض خصائص الكائن Car المعرف مسبقا، على سبيل المثال:</p> + +<pre class="brush: js">function displayCar() { + var result = 'A Beautiful ' + this.year + ' ' + this.make + + ' ' + this.model; + pretty_print(result); +} +</pre> + +<p dir="rtl">يمكنك استخدام الدالة pretty_print لاظهار الناتج على شكل نص افقي، تذكر ايضا على ان الكلمة المحجوزة this ستشير الى السياق الذي تنتمي اليه الدالة نفسها وفي هذه الحالة هو ال constructur Car</p> + +<p dir="rtl"> يمكننا بعد ذالك تعيين هذه الدالة كوظيفة في ال constructeur Car على النحو التالي:</p> + +<pre class="brush: js">this.displayCar = displayCar; +</pre> + +<p dir="rtl">التعليمة البرمجية النهائية:</p> + +<pre class="brush: js">function Car(make, model, year, owner) { + this.make = make; + this.model = model; + this.year = year; + this.owner = owner; + this.displayCar = displayCar; +} +</pre> + +<p dir="rtl">الان يمكنك استدعاء الوظيفة displayCar لكلا الكائنين على النحو التالي:</p> + +<pre class="brush: js">car1.displayCar(); +car2.displayCar(); +</pre> + +<h2 dir="rtl" id="استخدام_this_كمرجع_للكائنات">استخدام this كمرجع للكائنات</h2> + +<p dir="rtl">جافاسكريبت لديها الكلمة المحجوزة لها <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code>، يمكنك استخدامها مع الوظائف للرجوع/الاشارة إلى الكائن الحالي. على سبيل المثال، لنفترض ان لديك دالة تسمى validate تقوم بالتحقق من صحة المدخلات:</p> + +<pre class="brush: js">function validate(obj, lowval, hival) { + if ((obj.value < lowval) || (obj.value > hival)) { + alert('Invalid Value!'); + } +} +</pre> + +<p dir="rtl">يمكن استدعاء هذه الدالة عن طريق معالج الحدث onchange، وستشير الكلمة المحجوزة this الى العنصر المتواجدة به (تنفيذ الدالة على هذا العنصر). كما في المثال التالي:</p> + +<pre class="brush: html"><input type="text" name="age" size="3" + onChange="validate(this, 18, 99)"> +</pre> + +<p dir="rtl">بشكل عام this تشير الى الكائن الذي يطلب الوظيفة.</p> + +<p dir="rtl">يمكن ايضا استخدام this مع معالج الحدث بشكل مباشر، كما في المثال التالي:</p> + +<pre class="brush: html"><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></pre> + +<h2 id="Defining_getters_and_setters">Defining getters and setters</h2> + +<p dir="rtl"> <a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">getter</a> هي الوظيفة التي تقوم بجلب قيمة خاصية معينة. <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setter</a> هي الوظيفة التي تقوم بتعيين قيمة لخاصية معينة. يمكنك تعيينها سواء للكائنات الاساسية المعرفة مسبقا أو الى الكائنات المعرف من قبل المستخدم والتي تدعم إضافة خصائص جديدة. وتستخدم مع ال object literal.</p> + +<p dir="rtl">يبين المثال التالي كيفية انشاء getters و setters من طرف المستخدم :</p> + +<pre class="brush: js">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 +</pre> + +<p dir="rtl">خصائص الكائن هي :</p> + +<ul dir="rtl"> + <li><code>o.a</code> — a number</li> + <li><code>o.b</code> — a getter سيعود ب <code>o.a</code> زائد 1</li> + <li><code>o.c</code> — a setter سيقوم بتعيين القيمة <code>o.a</code> بنصف القيمة الاتية من <code>o.c</code></li> +</ul> + +<p dir="rtl">يمكنك استخدام getters و setters مع الوظائف المنشاة مسبقا، لتحقيق ذالك يمكننا استخدام الوظيفة <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperty" title="en-US/docs/Core JavaScript 1.5 Reference/Global +Objects/Object/defineProperty">Object.defineProperty</a></code> او الوظيفة القديمة <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineGetter" title="en-US/docs/Core JavaScript 1.5 Reference/Global +Objects/Object/defineGetter">Object.prototype.__defineGetter__</a></code></p> + +<p dir="rtl">يبين الكود التالي كيف ان getters و setters بامكانها ان ترث ال {{jsxref("Date")}} prototype لاضافة الخاصية year الى جميع ال instances الخاص بالكائن Date المنشا مسبقا، ولهذا سنقوم باستخدام بعض الوظائف الخاصة ب Date ك getFullYear و setFullYear :</p> + +<pre class="brush: js">var d = Date.prototype; +Object.defineProperty(d, 'year', { + get: function() { return this.getFullYear(); }, + set: function(y) { this.setFullYear(y); } +}); +</pre> + +<p dir="rtl">تبين التعليمة البرمجية التالية كيفية استخدام الخاصية year الجديدة التي تم انشاؤها عن طريق getters و setters:</p> + +<pre class="brush: js">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 +</pre> + +<p dir="rtl">بصفة عامة، getters و setters يمكن ان تكون:</p> + +<ul dir="rtl"> + <li>معرفة باستخدام <a href="#استخدام object initializers">object initializers</a>, او</li> + <li>ان تضاف في وقت لاحق إلى أي كائن في أي وقت باستخدام getters او setters.</li> +</ul> + +<p dir="rtl">عندما سنقوم بانشاء getters و setters باستخدام ال استخدام <a href="#استخدام object initializers">object initializers</a> كل ما عليك القيام به هو البذء بانشاء الوظيفة getter اولا ومن تم تعريفها ب get وتليها الوظيفة setter وتعريفها ب set، وبالطبع، الوظيفة getter لا تحتاج الى اي باراميتر، فيما ستحتاج الوظيفة setter لبراميتر واحد وهو القيمة الجديدة ل set. فعلى سبيل المثال:</p> + +<pre class="brush: js">var o = { + a: 7, + get b() { return this.a + 1; }, + set c(x) { this.a = x / 2; } +}; +</pre> + +<p dir="rtl">getters او setters. يمكن أيضا أن تضاف إلى كائن ما في أي وقت بعد انشائه باستخدام الوظيفة Object.defineProperties، البراميتر الأول لهذه الوظيفة هو الكائن الذي تريد انشاء ال getter او setter له. البراميتر الثاني عبارة عن كائن يمثل الخصائص التي ستضاف الى الكائن الهدف ويتكون من مفتاح الخاصية، وهو اسم ال getter او ال setter، وقيمة الخاصية، وهي عبارة عن كائن لتعريف وظائف ال getter او ال setter. لدينا هنا نفس المثال السابق يبين بجلاء ما تحدثنا عنه:</p> + +<pre class="brush: js">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 +</pre> + +<p dir="rtl">اي من هذه الاساليب هي الانسب ؟<br> + <span class="short_text" id="result_box" lang="ar"><span>إذا ذهبت</span> <span>بالفعل ل</span><span>مهيئ</span> <span>الكائن</span> <span>عند تعريف</span> <span>ال</span></span> prototype فانت بحاجة الى الاسلوب الاول هذا الاسلوب محكم وبسيط. ومع ذالك، اذا كنت تنوي اضافة getters و setters لاحقا بسبب انك لا تريد انشاء prototype او كائن معين سيكون افضل خيار هو الخيار الثاني. الخيار الثاني ربما يكون أفضل ويمثل الطابع الدينامي للجافا سكريبت، ولكن يمكن ان يجعل الكود صعب القراءة والفهم.</p> + +<h2 dir="rtl" id="حذف_الخصائص">حذف الخصائص</h2> + +<p dir="rtl">يمكنك حذف الخصائص الغير موروثة باستخدام الكلمة المحجوزة <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code> التعليمة البرمجية التالية توضح كيف يتم ذالك:</p> + +<pre class="brush: js">// 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" +</pre> + +<p dir="rtl">يمكنك ايضا استخدام delete لحذف متغير عام، شرط ان لا يكون هذا المتغير معرف بواسطة الكلمة المحجوزة var.</p> + +<pre class="brush: js">g = 17; +delete g; +</pre> + +<h2 dir="rtl" id="مقارنة_الكائنات">مقارنة الكائنات</h2> + +<p dir="rtl">في جافا سكريبت، الكائنات تعمل كمرجع. لا يمكن المساوات بين كائنين مختلفين، حتى وان كان لديهما نفس القيم لنفس الخصائص. سيكون هناك تكافؤ فقط إذا تم مقارنة كائن بحد ذاته.</p> + +<pre class="brush: js">// 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</pre> + +<pre class="brush: js">// 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 +</pre> + +<pre class="brush: js">fruit.name = 'grape'; +console.log(fruitbear); // yields { name: "grape" } instead of { name: "apple" } +</pre> + +<p dir="rtl">لمزيد من المعلومات حول عوامل المقارنة، شاهد <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">Comparison operators</a>.</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>To dive deeper, read about the <a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">details of javaScript's objects model</a>.</li> + <li>To learn about ECMAScript 2015 classes (a new way to create objects), read the <a href="/en-US/docs/Web/JavaScript/Reference/Classes">JavaScript classes</a> chapter.</li> +</ul> + +<p>{{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}</p> diff --git a/files/ar/web/javascript/guide/الدوال/index.html b/files/ar/web/javascript/guide/الدوال/index.html new file mode 100644 index 0000000000..af934b397d --- /dev/null +++ b/files/ar/web/javascript/guide/الدوال/index.html @@ -0,0 +1,698 @@ +--- +title: الدوال +slug: Web/JavaScript/Guide/الدوال +tags: + - الدوال + - جافا سكريبت + - دليل +translation_of: Web/JavaScript/Guide/Functions +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Expressions_and_Operators")}}</div> + +<p class="summary" dir="rtl">الدوال هي واحدة من اللبنات الأساسية في جافاسكريبت. الدالة، هي عبارة عن مجموعة من التعليمات البرمجية التي تؤدي وظيفة معينة. حتى تتمكن من إستخدام الدالة، عليك أولا تعريفها في مكان ما من النطاق الذي تود إستدعائها منه.</p> + +<div style="font-size: 15; font-family: 'tahoma';"> +<p dir="rtl">يمكنك القاء نظرة في <a href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Reference/%D8%A7%D9%84%D8%AF%D9%88%D8%A7%D9%84">مرجع مفصل عن دوال الجافاسكريبت</a> حتى تتعرف على تفاصيل اكثر.</p> + +<h2 dir="rtl" id="انشاء_الدوال">انشاء الدوال</h2> + +<h3 dir="rtl" id="الاعلان_عن_الدوال_-_الصيغة_الافتراضية_-_Function_declarations">الاعلان عن الدوال - الصيغة الافتراضية - Function declarations</h3> + +<p dir="rtl"><strong>تعريف الدالة</strong>: تتكون الدالة من الكلمة المحجوزة <a href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Reference/Statements/function">function</a>، متبوعة بـ :</p> + +<ul dir="rtl"> + <li><strong>إسم الدالة</strong>.</li> + <li>قائمة <strong>بارامترات</strong> الدالة، محصورة بين قوسين ويفصل بينها بفواصل.</li> + <li>تعليمات الجافاسكريبت التي تُعرف الدالة، داخل <strong>الأقواس </strong>المتعرجة {}.</li> +</ul> + +<p dir="rtl">على سبيل المثال، الكود التالي يعرف دالة بسيطة تسمى <code>square</code> :</p> + +<pre class="brush: js">function square(number) { + return number * number; +} +</pre> + +<p dir="rtl">الدالة <code>square</code> تمتلك بارامتر واحد، هو <code>number</code>. وتعليمة برمجية واحدة تقوم بإرجاع بارامتر الدالة <code>number</code> مضروباً في نفسه. والتعليمة <a href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Reference/Statements/return">return </a>تحدد القيمة التي سترجعها الدالة.</p> + +<pre class="brush: js">return number * number; +</pre> + +<p dir="rtl">يتم تمرير البارامترات الاولية <a class="glossaryLink" href="https://developer.mozilla.org/ar/docs/Web/JavaScript/Guide/Grammar_and_types#%D9%87%D9%8A%D8%A7%D9%83%D9%84_%D8%A7%D9%84%D8%A8%D9%8A%D8%A7%D9%86%D8%A7%D8%AA_%D9%88%D8%A7%D9%84%D8%A3%D9%86%D9%88%D8%A7%D8%B9_-_Data_structures_and_types" title="primitives: A primitive (primitive value, primitive data type) is data that is not an object and has no methods. In JavaScript, there are 6 primitive data types: string, number, boolean, null, undefined, symbol (new in ECMAScript 2015).">primitives</a> <code>(</code>كالسلاسل الحرفية، الاعداد...الخ<code>)</code> الى الدالة، بوسيلة تسمى، <strong>الاستدعاء بالقيمة</strong>، <a class="external external-icon" href="https://en.wikipedia.org/wiki/Evaluation_strategy#Call_by_value"> call by value </a> وهي، ان يتم تحليل <strong><code>argument</code></strong> الدالة، والقيمة الناتجة سَتُرسل <strong>نسخة</strong> منها فقط إلى المتغير المستقبل (بارامتر الدالة)، بعد ذالك تقوم الدالة بتخزين هذه القيمة في الذاكرة، ثم، إذا كانت الدالة قادرة على تعيين القيم للبارامترات الخاصة بها، تبدا بالعمل على هذه النسخة فقط، دون <strong>تغيير</strong> اي شئ في قيمة المتغير الاصلي.</p> + +<p dir="rtl">في المثال التالي، لدينا المتغير <code>value</code> سنقوم بتمريره إلى الدالة square. ثم ضمن الدالة square سيتم إنشاء نسخة جديدة، وهكذا، حتى وان قمنا بتغيير القيمة داخل الدالة، فلن يؤثر هذا على قيمة المتغير الأصلي الذي تم تعريفه خارج الدالة. لان هذا التغيير لن يكون مرئيا خارج الدالة:</p> + +<pre class="brush: js">function square(number) { // parameter = recipient + return number * number; +} +var value = 10; +square(value); // argument = Sender +document.write(value); // log: 10 +</pre> + +<p dir="rtl">على عكس المثال السابق، اذا قمت بتمرير كائن (مثلا، قيمة غير اولية ك {{jsxref("Array")}} او كائن معرف من قبل المستخدم) كبارامتر، وقامت الدالة بتغيير خصائص الكائن، سيكون هذا التغيير مرئيا خارج الدالة:</p> + +<pre class="brush: js">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) +</pre> + +<h3 dir="rtl" id="الاعلان_عن_الدوال_بصيغة_ال_Function_expressions">الاعلان عن الدوال بصيغة ال Function expressions</h3> + +<p dir="rtl">في حين ان الدالة اعلاه تم الاعلان عنها بصيغة <strong><code>function declaration</code></strong>، يمكن ايضا انشاء الدوال بصيغة ال <strong><code>function expression</code></strong>. كما يمكن ايضا للدوال ان تكون بصيغة ال <code><strong>anonymous</strong></code> (دوال مجهولة الاسم). على سبيل المثال، الدالة <code>square</code> يمكن تعريفها ايضا بصيغة ال <strong><code>function expression</code></strong> على النحو التالى:</p> + +<pre class="brush: js">var square = function(number) { return number * number }; +var x = square(4) // x gets the value 16</pre> + +<p dir="rtl">يمكن تعيين اسم للدوال بصيغة ال <code>function expression</code>، لجعل الدالة تعيد استدعاء ذاتها (الاستدعاء الداتي)، أو استخدامه في المنقح <a href="/en-US/docs/Web/JavaScript/Reference/Statements/debugger">debugger</a>. او لتعقب اخطاء الدالة من خلال <a class="external external-icon" href="https://en.wikipedia.org/wiki/Stack_trace"> stack traces</a>.</p> + +<pre class="brush: js">var factorial = function fac(n) { return n<2 ? 1 : n*fac(n-1) }; + +console.log(factorial(3)); +</pre> + +<p dir="rtl">يمكنك تمرير دالة كبارامتر لدالة اخرى. يظهر المثال التالي الدالة <code>map</code> تستخدم دالة اخرى كبارامتر اول لها :</p> + +<pre class="brush: js">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; +} +</pre> + +<p dir="rtl">طريقة استخدامها مع الصيغة <strong><code>function expression:</code></strong></p> + +<pre class="brush: js">var multiply = function(x) { return x * x * x; }; +map(multiply, [0, 1, 2, 5, 10]); +</pre> + +<p dir="rtl">طريقة استخدامها مع الصيغة <code><strong>anonymous function</strong></code> مباشرة:</p> + +<pre class="brush: js">map(function(x) {return x * x * x}, [0, 1, 2, 5, 10]); +</pre> + +<p><code>returns [0, 1, 8, 125, 1000].</code></p> + +<p dir="rtl">في الجافاسكريبت يمكن الاعلان عن دالة اعتمادا على شرط. على سبيل المثال، ستقوم التعليمة البرمجية التالية بالاعلان عن الدالة <code>myFunc</code> شرط ان يكون <code>num</code> يساوي 0:</p> + +<pre class="brush: js">var myFunc; +if (num === 0){ + myFunc = function(theObject) { + theObject.make = "Toyota" + } +}</pre> + +<p dir="rtl">بالإضافة إلى انشاء الدوال كما هو موضح اعلاه، يمكنك ايضا استخدام الصيغة {{jsxref("Function")}} <strong><code>constructor</code></strong> لانشاء دوال من خلال السلاسل النصية، تنفذ وقت التشغيل، تماما كما في {{jsxref("eval", "()eval")}}.</p> + +<p dir="rtl">هناك فرق بين الدوال (<strong><code>functions</code></strong>) والوظائف (<strong><code>methods</code></strong>)، الدوال هي ما نناقشه في هذا الفصل، والوظائف هي تلك المرتبطة بالكائنات (قيمة لخاصية في الكائن)، اقرأ المزيد حول الكائنات والوظائف <a href="/ar/docs/Web/JavaScript/Guide/Working_with_Objects" title="en-US/docs/JavaScript/Guide/Working with Objects">العمل مع الكائنات <sub>[عربي]</sub></a>.</p> + +<h2 dir="rtl" id="إستدعاء_الدوال">إستدعاء الدوال</h2> + +<p dir="rtl">تعريف الدالة يعني ببساطة إعطاء إسم لها وتحديد ماستقوم به عندما يتم إستدعائها. أما إستدعاء الدالة فيقوم فعليا بتنفيذ الإجراءات مع البرامترات المحددة. على سبيل المثال، إذا قمت بتعريف الدالة square، فستقوم بإستدعائها كما يلي :</p> + +<pre class="brush: js">square(5); +</pre> + +<p dir="rtl">تقوم التعليمة البرمجية اعلاه باستدعاء الدالة مع البارامتر 5. ثم تقوم بتنفيذ التعليمات البرمجية المرتبطة بها وترجع القيمة 25.</p> + +<p dir="rtl">الدوال يجب ان تنتمي للنطاق الذي استدعيت فيه، ولان الدوال بصيغة <strong><code>function declaration</code></strong> ترفع اعلى النطاق، فمن الممكن أن تعرف في وقت لاحق، كما في المثال التالي:</p> + +<pre class="brush: js">console.log(square(5)); +/* ... */ +function square(n) { return n*n } +</pre> + +<p dir="rtl">نطاق الدالة هو اما الدالة التي تم الإعلان عنها، أو البرنامج بأكمله إذا تم الاعلان عنها في المستوى العلوي.</p> + +<div class="note"> +<p dir="rtl"><strong>ملاحظة:</strong> سيعمل هذا فقط عندما يتم تعريف الدالة باستخدام الصيغة (مثل <code>{}</code><code>()function funcName</code>). اما التعليمة البرمجية التالية فسوف لن تعمل، وهذا يعني ان الية الرفع (hoisting) بالنسبة للدوال تعمل فقط مع الدوال ذات الصيغة function declaration ولا تعمل مع الدوال ذات الصيغة function expression.</p> +</div> + +<pre class="brush: js example-bad">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; +} +</pre> + +<p dir="rtl"><code>arguments</code> الدالة لا تقتصر على الاعداد او السلاسل الحرفية فقط، يمكنك تمرير الكائنات ايضا. في القسم الخاص بالعمل مع الكائنات <a href="/ar/docs/Web/JavaScript/Guide/Working_with_Objects#استخدام_this_كمرجع_للكائنات" title="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Working_with_Objects#Objects_and_Properties">العمل مع الكائنات</a><a href="/ar/docs/Web/JavaScript/Guide/Working_with_Objects" title="en-US/docs/JavaScript/Guide/Working with Objects"><sub>[عربي]</sub></a> توجد دالة باسم <code>()</code><code>showProps</code> توضح كيفية تمرير <strong>كائن</strong> ك <code>argument</code> للدالة.</p> + +<p dir="rtl">يمكن للدالة أن تقوم بإستدعاء ذاتها. على سبيل المثال، هذه الدالة تقوم بحساب المضروب بشكل متكرر :</p> + +<pre class="brush: js">function factorial(n){ + if ((n === 0) || (n === 1)) + return 1; + else + return (n * factorial(n - 1)); +} +</pre> + +<p dir="rtl">في كل مرة تقوم الدالة باستدعاء ذاتها، يتم خصم 1 من قيمة البرامتر الممرر، ويتم ضرب القيمة المحصلة في القيمة العائدة من جديد، فرضا، اذا كانت القيمة الممررة 5، الاستدعاء الاول سيكون 5، الاستدعاء الثاني سيكون 4، الاستدعاء الثالث سيكون 3، وهكذا، ويتم ضرب هذه القيم العائدة مع بعضها البعض. بهذا الشكل : 5 * 4 * 3 * 2 * 1 == 120</p> + +<p dir="rtl">امثلة متنوعة:</p> + +<pre class="brush: js">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 +</pre> + +<p dir="rtl">هناك طرق أخرى لاستدعاء الدوال. غالبا ما تكون هناك حالات تحتاج الى دالة تُستدعى بشكل ديناميكي، حيث يمكن التعامل مع مجموعة من ال <code>arguments</code>، وحيث سياق <strong><code>(context)</code></strong> استدعاء الدالة يجب ان ينشا في وظيفة لكائن يحدد وقت التشغيل. وهذا يبين ان الدوال هي نفسها كائنات، وهذه الكائنات بدورها لديها وظائف ( شاهد {{jsxref("Function")}} object). من ضمن هذه الوظائف، الوظيفة {{jsxref("Function.apply", "()apply")}} يمكن استخدامها لتحقيق هذه الاهداف.</p> + +<h2 class="deki-transform" dir="rtl" id="نطاق_الدالة">نطاق الدالة</h2> + +<p dir="rtl">المتغيرات المعرفة داخل الدالة لايمكن الوصول إليها من أي مكان آخر خارج الدالة، لأن هذه المتغيرات معرفة فقط داخل نطاق الدالة. على كل، يمكن للدالة الوصول إلى كل المتغيرات والدوال المعرفة في النطاق المعرفة فيه الدالة. بعبارة أخرى، الدالة المعرفة في النطاق العام تستطيع الوصول إلى كل المتغيرات المعرفة في النطاق العام. الدالة المعرفة داخل دالة أخرى يمكنها أيضا الوصول إلى كل المتغيرات المعرفة في دالتها الأم وكل المتغيرات الأخرى التي يمكن للدالة الأم الوصول لها.</p> + +<pre class="brush: js">// المتغيرات التالية معرفة في النطاق العام +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" +</pre> + +<h2 dir="rtl" id="النطاق_ومكدس_الدوال">النطاق ومكدس الدوال</h2> + +<h3 dir="rtl" id="الاستدعاء_الذاتي">الاستدعاء الذاتي</h3> + +<p dir="rtl">يمكن للدالة ان تستدعي داتها بثلاثة طرق:</p> + +<ol dir="rtl"> + <li>من خلال اسم الدالة</li> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/callee">arguments.callee</a></code></li> + <li>من خلال المتغيرات التي تشير إلى الدالة</li> +</ol> + +<p dir="rtl">على سبيل المثال، انظر الدالة التالية:</p> + +<pre class="brush: js">var foo = function bar() { + // statements go here +}; +</pre> + +<p dir="rtl">تضمين الاستدعاء الذاتي داخل جسم الدالة <strong><code>bar</code></strong>:</p> + +<ol> + <li><code>()bar</code></li> + <li><code>()arguments.callee</code></li> + <li><code>()foo</code></li> +</ol> + +<p dir="rtl">الدوال التي تقوم باستدعاء نفسها تسمى <em>recursive function</em>. الاستدعاء الداتي يشبه آلِية الحلقات في بعض النواحي، كلاهما ينفذان التعليمات البرمجية نفسها عدة مرات، وايضا كلاهما يتطلبان تعبيرا شرطيا (لتجنب التكرار الى ما لا نهاية، او بالاحرى، الاستدعاء الذاتي الى ما لا نهاية في حالتنا هذه). على سبيل المثال، الحلقة التالية:</p> + +<pre class="brush: js">var x = 0; +while (x < 10) { // "x < 10" is the loop condition + // do stuff + x++; +} +</pre> + +<p dir="rtl">المثال التالي يبين دالة تقوم بالاستدعاء الذاتي، يمكنها محاكات الحلقة :</p> + +<pre class="brush: js">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); +</pre> + +<p dir="rtl">ومع ذلك، لا يمكن أن تكون بعض الخوارزميات حلقات تكرارية بسيطة. على سبيل المثال، الوصول الى كافة العقد <code>nodes</code> في بنية الشجرة <code><a href="/en-US/docs/DOM">DOM</a></code> سيكون اسهل واكثر تفصيلا باستخدام الاستدعاء الذاتي:</p> + +<pre class="brush: js">function walkTree(node) { + if (node == null) // + return; + // do something with node + for (var i = 0; i < node.childNodes.length; i++) { + walkTree(node.childNodes[i]); + } +} +</pre> + +<p dir="rtl">على عكس الحلقات التكرارية البسيطة، والتي تقوم بالتكرار السطحي على <code><a href="/en-US/docs/DOM">DOM</a></code>، تمكننا دوال الاستدعاء الداتي من تنفيذ عدة استدعاءات، كل استدعاء داتي ينتج عنه العديد من الاستدعاءات الفرعية، بمعنى ان هذا النوع من الدوال يمكنها الوصول الى عمق ال <code><a href="/en-US/docs/DOM">DOM</a></code>. لتتيح لك امكانية التعامل مع كل جزئية فيه. كما يوضح المثال التالي:</p> + +<pre class="brush: js">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] + } +}); +</pre> + +<p dir="rtl">كلا الدالتين اعلاه، تؤدي نفس الغرض، لا اختلاف بينهما، الفرق الوحيد هو شكل بناء الدالة، حيث بنيت الدالة الاولى على طريقة ال <strong><code>function declaration</code></strong> فيما بنيت الدالة الثانية على شكل، ال <strong><code>function expression</code></strong> وال <strong><code>anonymous function</code></strong>، وكلاهما تنتهج اسلوب <em>recursive function.</em></p> + +<p dir="rtl">من الناحية النظرية، من الممكن تحويل أي خوارزمية الاستدعاء الذاتي الى خوارزمية الاستدعاء العادي (مع الحلقات، على سبيل المثال). عموما، المنطق الناتج أكثر تعقيداً ويتطلب استخدام <a class="external external-icon" href="https://ar.wikipedia.org/wiki/%D9%85%D9%83%D8%AF%D8%B3_(%D8%A8%D9%86%D9%8A%D8%A9_%D8%A8%D9%8A%D8%A7%D9%86%D8%A7%D8%AA)">المكدس</a>. الاستدعاء الذاتي أيضا يستخدم المكدس، مكدس الدالة function <code>stack</code>.</p> + +<p dir="rtl">سلوك مكدس الذاكرة المؤقتة يمكن أن ينظر إليه كما في المثال التالي:</p> + +<pre class="brush: js">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</pre> + +<h3 dir="rtl" id="الدوال_المتداخلة_و_الاغلاق_(closures)">الدوال المتداخلة و الاغلاق (closures)</h3> + +<p dir="rtl">يمكن انشاء دالة داخل دالة اخرى. الدالة الداخلية هي دالة خاصة <strong><code>private</code></strong> بالدالة الخارجة. الدالة الداخلية تشكل الاغلاق <strong><code>closure</code></strong>، والإغلاق هو فقط تعبير (عموما الاغلاق هو دالة). والذي يمكنه الوصول إلى المتغيرات المجانية free variables (المصطلح free variable يشير الى المتغيرات المستخدمة في الدالة، وهي ليست متغيرات محلية او بارامترات لهذه الدالة. بمعنى اخر هي متغيرات معرفة خارج الدالة وتستفيد منها الدالة، وهذا هو سبب تسميتها بالمتغيرات المجانية)، كما يمكنه ايضا، الوصول الى اي شئ في البيئة التي ترتبط بها هذه المتغيرات المجانية.</p> + +<p dir="rtl">بما ان الدالة الداخلية هي <code>closure</code>. فهذا يعني انها تستطيع ان ترث البرامترات والمتغيرات من الدالة الخارجية. بمعنى اخر، الدالة الداخلية تمتلك النطاق الخاص بالدالة الخارجية.</p> + +<p dir="rtl">الخلاصة:</p> + +<ul dir="rtl"> + <li>لايمكن الوصول إلى الدالة الداخلية الا من خلال التعليمات البرمجية الخاصة بالدالة الخارجية.</li> + <li>الدالة الداخلية تشكل الاغلاق <strong><code>closure</code></strong>: الدالة الداخلية يمكنها استخدام البرامترات والمتغيرات الخاصة بالدالة الخارجية، فيما لا يمكن للدالة الخارجية استخدام البرامترات والمتغيرات الخاصة بالدالة الداخلية.</li> +</ul> + +<p dir="rtl">يظهر المثال التالي الدوال المتداخلة:</p> + +<pre class="brush: js">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 +</pre> + +<p dir="rtl">بما ان الدالة الداخلية تشكل <strong><code>closure</code></strong>. فمن الضروري استدعاء الدالة الخارجية <strong>أولا،</strong> بعد ذالك يمكنك تحديد ال <code>arguments</code> لكل منهما :</p> + +<pre class="brush: js">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 +</pre> + +<h3 dir="rtl" id="الحفاظ_على_المتغيرات">الحفاظ على المتغيرات</h3> + +<p dir="rtl">في المثال اعلاه، لاحظ كيف تم الحفاظ على <strong><code>x</code></strong> عندما تم ارجاع الدالة <strong><code>inside</code></strong>. <strong>الاغلاق</strong> يحفاظ على البرامترات والمتغيرات في جميع النطاقات التي تشير إليه. مع كل استدعاء للدالة الخارجية، يمكنك تعيين <code>arguments</code> مختلفة، سيتم إنشاء إغلاق جديد مع كل استدعاء للدالة <strong><code>outside</code></strong>. يمكن تحرير الذاكرة فقط عندما يكون عائد الدلة <code>inside</code> غير متاحا.</p> + +<p dir="rtl">وهذا لا يختلف عن تخزين المراجع في كائنات أخرى، ولكن غالبا ما يكون أقل وضوحاً نظراً لعدم تعيين المراجع مباشرة ولا يمكن فحصها.</p> + +<h3 dir="rtl" id="الدوال_الاكثر_تداخلا">الدوال الاكثر تداخلا</h3> + +<p dir="rtl">الدوال يمكن ان تكون اكثر تداخلا، بمعنى، الدالة <code>(A)</code> تحتضن الدالة <code>(B)</code>، والدالة <code>(B)</code> تحتضن الدالة <code>(C)</code>. هنا كل من الدالة <code>B و C</code> تشكل <strong><code>closures</code></strong>، وهكذا <code>B</code> يمكنها الوصول الى <code>A</code>، و <code>C</code> يمكنها الوصول الى <code>B</code>. بالاضافة الى ذالك، <code>C</code> يمكنها الوصول الى <code>B و A</code>، وبالتالي، الإغلاق يمكن أن يحتوي على عدة نطاقات. وهذا ما يسمى بسلسلة النطاق <em>scope chaining</em>. (سيتم شرح لماذا يطلق عليه "<code>تسلسل</code>" في وقت لاحق).</p> + +<p dir="rtl">انظر في المثال التالي:</p> + +<pre class="brush: js">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) +</pre> + +<p dir="rtl">في هذا المثال <code>C</code> تصل الى <strong><code>y</code></strong> الخاصة ب <code>B</code> وايضا الى <strong><code>x</code></strong> الخاصة ب <code>A</code>، أصبح هذا ممكناً لأن:</p> + +<ol dir="rtl"> + <li><code>B</code> تشكل closure، وتمتلك <code>A</code>، بمعنى <code>B</code> يمكنها الوصول الى البارامترات والمتغيرات الخاصة ب <code>A</code>.</li> + <li><code>C</code> تشكل <strong><code>closure</code></strong>، وتمتلك <code>B</code>.</li> + <li>بسبب ان <code>B</code> تمتلك <code>A</code>، فقد اصبح <code>C</code> يمتلك <code>A</code>، وعليه ف <code>C</code> يمكنه الوصول الى البارامترات والمتغيرات الخاصة ب <code>B و A</code>. بعبارات أخرى، <code>C</code> سلسلة نطاقات ل <code>B</code> و <code>A</code> في هذا الترتيب.</li> +</ol> + +<p dir="rtl">العكس ليس صحيحاً. <code>A</code> لا يمكنها الوصول الى <code>C</code>، لان <code>A</code> لا يمكنها الوصول لاي من البارامترات او المتغيرات الخاصة ب <code>B</code>. (فيما <code>C</code> هي متغير لها). وهكذا، <code>C</code> ستصبح خاصة <strong><code>private</code></strong> فقط ب <code>B</code>.</p> + +<h3 dir="rtl" id="تضارب_الاسماء">تضارب الاسماء</h3> + +<p dir="rtl">عند وجود اثنين من البارامترات أو المتغيرات التي تحمل نفس <strong>الاسم</strong> في نطاقات الاغلاق، فهذا يسمى <strong>تضارب في الاسماء</strong>، وفي هذه الحالة، ستكون الاسبقية للنطاقات الاكثر عمقا في استخدام هذا <strong>الاسم</strong>، اما بالنسبة للنطاقات الأكثر سطحية سوف تحظى بأولوية أدنى لاستخدام هذا الاسم، من وجهة نظر سلسلة النطاق، النطاق الاول في السلسلة هو النطاق الاكثر عمقا ( اسفل السلسلة)، والنطاق الاخير في السلسلة هو النطاق الاكثر سطحية (اعلى السلسلة). شاهد المثال التالي:</p> + +<pre class="brush: js">function outside() { + var x = 10; + function inside(x) { + return x; + } + return inside; +} +result = outside()(20); // returns 20 instead of 10 +</pre> + +<p dir="rtl">يحدث تعارض الاسم في التعليمة <strong><code>return</code></strong> <strong><code>x</code></strong>، وهو مابين الباراميتر <strong><code>x</code></strong> الخاص ب <strong><code>inside</code></strong> وبين المتغير <strong><code>x</code></strong> الخاص ب <strong><code>outside</code></strong>. سلسلة النطاق سترى الامر على هذا النحو <strong><code>{inside, outside, global object}</code></strong>. وبناءا عليه <strong><code>x</code></strong> الخاص ب <strong><code>inside</code></strong> سياخد الاسبقية على <strong><code>x</code></strong> الخاص ب <strong><code>outside</code></strong>، وبالتالي الناتج هو 20 (inside x) بدلا من 10 (outside x).</p> + +<h2 dir="rtl" id="الاغلاقات_-_Closures">الاغلاقات - Closures</h2> + +<p dir="rtl">الإغلاق هي واحدة من أقوى المميزات في جافا سكريبت. جافا سكريبت تسمح بتداخل الوظائف وتمنح الدوال الداخلية حق الوصول الكامل إلى كافة المتغيرات والدوال المعرفة داخل الدالة الخارجية (وجميع المتغيرات والدوال الأخرى التي يمكن للدالة الخارجية الوصول إليها). ومع ذالك، الدوال الخارجية لا يمكنها الوصول الى المتغيرات والدوال المعرفة داخل الدوال الداخلية. وهذا يوفر نوعا من الحماية للمتغيرات والدوال الداخلية. وأيضا، لأن الدوال الداخلية لديها حق الوصول إلى نطاق الدالة الخارجية، فالمتغيرات والدوال المعرفة داخل الدالة الخارجية ستدوم اطول من مدة تنفيذ الدالة الخارجىة، اذا تمكنت الدالة الداخلية ان تدوم أطول من الدالة الخارجية. يتم إنشاء الاغلاق عندما تكون الدالة الداخلية بطريقة أو بأخرى في متناول أي نطاق خارج الدالة الخارجية.</p> + +<pre class="brush: js">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" +</pre> + +<p dir="rtl">من الناحية العملية، يمكن أن تكون المسالة أكثر تعقيداً من التعليمات البرمجية أعلاه. يمكن إرجاع كائن والذي سيحتوي على وظائف للتعامل مع المتغيرات الداخلية للدالة الخارجية:</p> + +<pre class="brush: js">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 +</pre> + +<p dir="rtl">في التعليمات البرمجية اعلاه، المتغير <code>name</code> الخاص بالدالة الخارجية يمكن الوصول اليه من الدوال الداخلية. من المعلوم ايضا، انه، ليس هناك طريقة أخرى للوصول إلى المتغيرات الداخلية إلا من خلال الدوال الداخلية. المتغيرات الداخلية الخاصة بالدوال االداخلية هي بمثابة مخازن آمنة بالنسبة للبارامترات و المتغيرات الخارجية. كما انها تتيح امكانية الوصول الى البيانات الداخلية بشكل دقيق وامن. بالنسبة للدوال، ليس من الضروري تعيينها إلى متغير أو حتى تسميتها.</p> + +<pre class="brush: js">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 +</pre> + +<p dir="rtl">ومع ذلك، يجب الاحتراس جيدا من الوقوع في بعض الفخاخ عند استخدام عمليات الإغلاق. إذا كانت دالة مغلقة تعرف متغير بنفس الاسم، كاسم متغير في النطاق الخارجي، فلا توجد طريقة للإشارة إلى المتغير في النطاق الخارجي مرة أخرى.</p> + +<pre class="brush: js">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 ??? + } + } +} +</pre> + +<p dir="rtl">الكلمة المحجوزة <strong><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code></strong> (في بعض الاحيان تسمى بالمتغير العجيب)، ينبغي التعامل معها بحذر في حالات <strong>الإغلاق</strong>. احذر، ف <code>this</code> تشير إلى السياق حيث سيتم استدعاء الدالة وليس إلى المكان حيث تم تعريف الدالة.</p> + +<h2 dir="rtl" id="استخدام_الكائن_arguments">استخدام الكائن arguments</h2> + +<p dir="rtl">يمكنك التعامل مع <code>arguments</code> الدالة من الداخل، من خلال الكائن <strong><code>(arguments او الحجج</code></strong>). يمكنك معالجة ال <code>arguments</code> الممررة الى الدالة على النحو التالي:</p> + +<pre class="brush: js">arguments[i] +</pre> + +<p dir="rtl">حيث ان <strong><code>i</code></strong> هو الفهرس الرقمي لل <code>arguments</code>، ويبتدئ من <strong><code>0</code></strong>، وبالتالي، ال <code>argument</code> الاول الممرر الى الدالة سيكون <strong><code>arguments[0]</code></strong>. لمعرفة عدد ال <code>argument</code><strong><code>s</code></strong> الممررة نستخدم <strong><code>arguments.length</code></strong>.</p> + +<p dir="rtl">باستخدام الكائن <strong><code>arguments</code></strong>، يمكنك استدعاء دالة مع <code>arguments</code> أكثر من التي تم التصريح بها رسميا. وهي مفيذة جدا، خصوصا إذا كنت لا تعرف مسبقاً كم عدد ال <code>arguments</code> التي ستمرر اثناء استدعاء الدالة. يمكنك استخدام <code>arguments.length</code> لمعرفة عدد البرامترات الممرة الى الدالة، حتى تتمكن بعد ذالك من التعامل معها من خلال الكائن <strong><code>arguments</code></strong>.</p> + +<p dir="rtl">على سبيل المثال، يمكننا انشاء دالة تقوم بوصل عدة سلاسل حرفية. ال <code>argument</code> الوحيد المحدد رسميا في الدالة، هو السلسلة الحرفية التي ستفصل بين باقي السلاسل الحرفية التي ستمرر ك <code>arguments</code> بعد ال <code>argument</code> الرسمي للدالة. كما في المثال التالي:</p> + +<pre class="brush: js">function myConcat(separator) { + var result = "", // initialize list + i; + // iterate through arguments + for (i = 1; i < arguments.length; i++) { + result += arguments[i] + separator; + } + return result; +} +</pre> + +<p dir="rtl">يمكنك تمرير اي عدد من ال <code>arguments</code> لهذه الدالة، وسترتبط ببعضها البعض من خلال ما سيمرر الى ال <code>argument</code> الرسمي:</p> + +<pre class="brush: js">// 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"); +</pre> + +<div class="note"> +<p dir="rtl"><strong>ملاحظة:</strong> المتغير arguments هو شبه مصفوفة، ولكنه ليس مصفوفة. وانما يتصرف كالمصفوفة، يستخدم الفهرسة الرقمية، يستخدم الخاصية length، ومع ذالك، لا يمكنه استخدام الوظائف الخاصة بالمصفوفات مثل push او join ...الخ.</p> +</div> + +<h4 dir="rtl" id="الفرق_بين_parameters_و_arguments">الفرق بين parameters و arguments</h4> + +<p dir="rtl"><strong><code>Function parameters</code></strong> او بارامترات الدالة، هي الأسماء المدرجة في تعريف الدالة. فيما <strong><code>Function arguments</code></strong> هي القيم الحقيقية التي تمرر إلى الدالة عند الاستدعاء <code>(</code>راجع التعريف والاستدعاء اعلى الصفحة<code>)</code>. انظر المثال التالي:</p> + +<pre class="brush: js">function foo( param1, param2, ...) // parameters { + // Do things +} +foo(arg1, arg2, ...); // arguments +</pre> + +<div class="note"> +<p dir="rtl"><strong>ملاحظة:</strong> ال<strong> <code><a href="/en-US/docs/Glossary/Parameter">parameter</a></code></strong> هو متغير باسم معين يمرر الى الدالة. تستخدم الباراميترات لجلب ال <strong><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a></code></strong> داخل الدوال.</p> +</div> + +<p dir="rtl">راجع الكائن {{jsxref("Function")}} في مرجع الجافا سكريبت لمزيد من المعلومات.</p> + +<h2 dir="rtl" id="بارامترات_الدالة">بارامترات الدالة</h2> + +<p dir="rtl">بدأً من ECMAScript 6، أصبح هناك نوعان من البارامترات: البارامترات الإفتراضية وبقية البارامترات.</p> + +<h3 dir="rtl" id="البارامترات_الإفتراضية">البارامترات الإفتراضية</h3> + +<p dir="rtl">في الجافاسكريبت، القيمة الافتراضية لبرامترات الدوال هي <code>undefined</code>. ومع ذالك، في بعض الحالات، قد يكون من المفيد تعيين قيمة افتراضية مختلفة. البارامترات الافتراضية يمكنها تدارك الموقف.</p> + +<p dir="rtl">قبل ECMAScript 2015، كانت الاستراتيجية العامة لوضع الافتراضات هي اختبار قيمة البارامتر في جسم الدالة وتعيين قيمة له اذا كانت قيمته <code>undefined</code>. على سبيل المثال، في التعليمة البرمجية التالية، لم يتم تحديد قيمة للبارامتر <strong><code>b</code></strong> في الاستدعاء، وبالتالي قيمتة ستساوي <code>undefined</code>، عند اختبار <code>(a * b)</code> ستعود الدالة <strong><code>multiply</code></strong> ب <code>NaN</code>. لتجنب هذا، يقوم السطر الثاني في التعليمة البرمجية اسفله بتعيين قيمة افتراضية للبارامتر <strong><code>b</code></strong>:</p> + +<pre class="brush: js">function multiply(a, b) { + b = typeof b !== 'undefined' ? b : 1; + + return a*b; +} + +multiply(5); // 5 +</pre> + +<p dir="rtl">ابتداءا من ECMAScript 2015، اصبح من الممكن عمل اعدادات افتراضية على غرار <code>(php)</code>، والاختبار في جسم الدالة لم يعد ضروريا. الان، ببساطة يمكنك تعيين <strong><code>1</code></strong> كقيمة افتراضية للبارامتر <strong><code>b</code></strong> في تعريف الدالة:</p> + +<pre class="brush: js">function multiply(a, b = 1) { + return a*b; +} + +multiply(5); // 5</pre> + +<p dir="rtl">لمزيد من التفاصيل، راجع <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">default parameters</a> في مرجع الجافاسكريبت.</p> + +<h3 dir="rtl" id="بقية_البارامترات_-_rest_parameter">بقية البارامترات - rest parameter</h3> + +<p dir="rtl">الصيغة <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest parameter</a> تسمح بتمثيل عدد غير محدود من ال <code>arguments</code> كمصفوفة. في هذا المثال، نستخدم بقية البارامترات لتجميع ال <code>arguments</code> ابتداءا من البرامتر الثاني لغاية النهاية. ثم نقوم بضربها باول بارامتر. هذا المثال يستخدم دالة السهم، والتي سندرسها في القسم التالي.</p> + +<pre class="brush: js">function multiply(multiplier, ...theArgs) { + return theArgs.map(x => multiplier * x); +} + +var arr = multiply(2, 1, 2, 3); +console.log(arr); // [2, 4, 6]</pre> + +<h2 dir="rtl" id="دوال_السهم_-_Arrow_functions">دوال السهم - Arrow functions</h2> + +<p dir="rtl"><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">تعبيرات دوال السهم </a>تسمح لك باستخدام تعبيرا أكثر إيجازاً من التعبير عن الوظائف الكلاسيكية. والقيمة <code>this</code> يتم ربطها بشكل نحوي. فيما تكون دوال السهم مجهولة الاسم <code>anonymous</code>. راجع ايضا هذه المدونة <a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">ES6 In Depth: Arrow functions</a>.</p> + +<p dir="rtl">اثنين من العوامل التي أثرت في مقدمة دوال السهم: الدوال المختصرة و lexical <code>this</code>.</p> + +<h3 dir="rtl" id="الدوال_المختصرة">الدوال المختصرة</h3> + +<p dir="rtl">في بعض الأنماط الوظيفية، الدوال المختصرة هي موضع ترحيب. قارن التعليمات البرمجية التالية:</p> + +<pre class="brush: js">var a = [ + "Hydrogen", + "Helium", + "Lithium", + "Beryllium" +]; + +var a2 = a.map(function(s){ return s.length }); + +var a3 = a.map( s => s.length );</pre> + +<h3 dir="rtl" id="التعليمة_Lexical_this"><code>التعليمة </code> Lexical <code>this</code></h3> + +<p dir="rtl">قبل وجود وظائف السهم، كانت كل دالة جديدة تعرف قيمة ال <code>this</code> الخاصة بها (كائن جديد في حالة الدالة الإنشائية، <code>undefined</code> في استدعاءات الدوال مع الوضع الصارم، في سياق الكائن قيد التشغيل في حالة الوظيفة، إلخ.). وهذا يمكن أن يسبب بعض المشاكل مع نمط البرمجة الكائنية:</p> + +<pre class="brush: js">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();</pre> + +<p dir="rtl">في ECMAScript 3/5، تم إصلاح هذه المشكلة عن طريق تخزير القيمة <code>this</code> في متغير اخر.</p> + +<pre class="brush: js">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); +}</pre> + +<p dir="rtl">بدلا من ذلك، يمكننا إنشاء دالة ملزمة <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">bound function</a> بحيث تكون "احسن" قيمة <code>this</code> سيتم تمريرها إلى الدالة <code>()growUp</code>.</p> + +<p dir="rtl">دوال السهم تلتقط القيمة this من السياق المغلق (enclosing context)، لذا ستعمل التعليمة البرمجية التالية كما هو متوقع.</p> + +<pre class="brush: js">function Person(){ + this.age = 0; + + setInterval(() => { + this.age++; // |this| properly refers to the person object + }, 1000); +} + +var p = new Person();</pre> + +<h2 dir="rtl" id="دوال_معرفة_مسبقا">دوال معرفة مسبقا</h2> + +<p dir="rtl">جافا سكريبت لديها العديد من الوظائف المدمجة ذات المستوى الاعلى top-level :</p> + +<dl> + <dt>{{jsxref("Global_Objects/eval", "()eval")}}</dt> + <dd> + <p dir="rtl">الوظيفة<code><strong> ()</strong></code><code><strong>eval</strong></code> تستخدم لاختبار شفرة الجافا سكريبت على شكل سلسلة حرفية.</p> + </dd> + <dt>{{jsxref("Global_Objects/uneval", "()uneval")}} {{non-standard_inline}}</dt> + <dd> + <p dir="rtl">الوظيفة<code><strong> ()</strong></code><code><strong>uneval </strong></code>تستخدم لانشاء سلسلة حرفية عبارة عن مصدر كود الكائن {{jsxref("Object")}}.</p> + </dd> + <dt>{{jsxref("Global_Objects/isFinite", "()isFinite")}}</dt> + <dd> + <p dir="rtl">الدالة العامة <code><strong>()</strong></code> <code><strong>isFinite</strong></code> تقوم بتحديد ما إذا كانت القيمة التي تم تمريرها عدد محدود. إذا لزم الأمر، يتم تحويل البارامتر إلى رقم.</p> + </dd> + <dt>{{jsxref("Global_Objects/isNaN", "()isNaN")}}</dt> + <dd> + <p dir="rtl">تستخدم الدالة<code><strong>()</strong></code><code><strong>isNaN</strong></code> للتاكد من ان القيمة ليست رقمية {{jsxref("Global_Objects/NaN", "NaN")}} ملاحظة: يمكننا ايضا استخدام {{jsxref("Number.isNaN()")}}, الجديدة في ECMAScript 6 او استخدام التعليمة <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/typeof">typeof</a></code>. كلها تادي نفس الغرض.</p> + </dd> + <dt>{{jsxref("Global_Objects/parseFloat", "()parseFloat")}}</dt> + <dd> + <p dir="rtl">تستخدم الدالة <code><strong>()</strong></code><code><strong>parseFloat</strong></code> لتحويل سلسلة حرفية الى عدد كسري.</p> + </dd> + <dt>{{jsxref("Global_Objects/parseInt", "()parseInt")}}</dt> + <dd> + <p dir="rtl">تستخدم الدالة <code><strong>()</strong></code><code><strong>parseInt</strong></code> لتحويل سلسلة حرفية الى عدد صحيح (البارامتر الثاني خاص بالتعامل مع القاعدة في الأنظمة العددية الرياضية).</p> + </dd> + <dt>{{jsxref("Global_Objects/decodeURI", "()decodeURI")}}</dt> + <dd> + <p dir="rtl">تستخدم الدالة<code><strong> ()</strong></code><code><strong>decodeURI</strong></code> لفك تشفير معرف الموارد الموحد (Uniform Resource Identifier (URI التي تم إنشاؤها مسبقا من طرف {{jsxref("Global_Objects/encodeURI", "encodeURI")}} او عن طريق نفس الروتين.</p> + </dd> + <dt>{{jsxref("Global_Objects/decodeURIComponent", "()decodeURIComponent")}}</dt> + <dd> + <p dir="rtl">تستخدم الوظيفة<code><strong> ()</strong></code><code><strong>decodeURIComponent</strong></code> لفك تشفير معرف عناصر الموارد الموحدة (Uniform Resource Identifier (URI التي تم إنشاؤها مسبقا من طرف {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} او عن طريق نفس الروتين.</p> + </dd> + <dt>{{jsxref("Global_Objects/encodeURI", "()encodeURI")}}</dt> + <dd> + <p dir="rtl">تستخدم الوظيفة<code><strong> ()</strong></code><code><strong>encodeURI</strong></code> لتشفير معرف الموارد الموحد (Uniform Resource Identifier (URI باستبدال كل مثيل من أحرف معينة بواحد، اثنان، ثلاثة، أو أربعة تهريبات متوالية تمثل ترميز الاحرف UTF-8 (لن يكون إلا أربع تهريبات متوالية لرموز تتألف من اثنين من الحروف "البديلة").</p> + </dd> + <dt>{{jsxref("Global_Objects/encodeURIComponent", "()encodeURIComponent")}}</dt> + <dd> + <p dir="rtl">تستخدم الوظيفة <code><strong>()</strong></code><code><strong>encodeURIComponent</strong></code> لتشفير معرف عناصر الموارد الموحدة (Uniform Resource Identifier (URI باستبدال كل مثيل من أحرف معينة بواحد، اثنان، ثلاثة، أو أربعة تهريبات متوالية تمثل ترميز الاحرف UTF-8 (لن يكون إلا أربع تهريبات متوالية لاحرف تتألف من اثنين من الحروف "البديلة").</p> + </dd> + <dt>{{jsxref("Global_Objects/escape", "()escape")}} {{deprecated_inline}}</dt> + <dd> + <p dir="rtl">الوظيفة<code><strong> ()</strong></code><code><strong>escape</strong></code> الغير مرغوب فيها. تحتسب سلسلة جديدة من بعض الأحرف التي يجب استبدلها من قبل hexadecimal escape sequence. استخدم {{jsxref("Global_Objects/encodeURI", "encodeURI")}} او استخدم {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} بدلا عنها.</p> + </dd> + <dt>{{jsxref("Global_Objects/unescape", "()unescape")}} {{deprecated_inline}}</dt> + <dd> + <p dir="rtl">الوظيفة<code><strong>()</strong></code><code><strong>unescape</strong></code> الغير مرغوب فيها. تحتسب سلسلة جديدة بحيث hexadecimal escape sequence. اسبدلت مع الرمز الذي يمثلها. متتالية التهريب يمكن ان تاتى من دالة مثل {{jsxref("Global_Objects/escape", "escape")}}. على العموم استخدم {{jsxref("Global_Objects/decodeURI", "decodeURI()")}} او استخدم {{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent")}} بدلا عنها.</p> + </dd> +</dl> + +<p> </p> +</div> + +<p>{{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Expressions_and_Operators")}}</p> 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 +--- +<h4 id="JsSidebar">{{JsSidebar}}</h4> + +<p class="summary" dir="rtl"><strong>جافاسكربت (JavaScript</strong><sup>®</sup>) (إختصاراً <strong>JS</strong>) هي لغة برمجة خفيفة، مُفسرة، وشيئيّة ذات <a href="https://en.wikipedia.org/wiki/First-class_functions" title="https://en.wikipedia.org/wiki/First-class_functions">دوال من الدرجة الأولى</a>، وهي مشهورة خصوصاً بكونها لغة البرمجة النصيّة لصفحات الويب، لكنها <a class="external" href="https://ar.wikipedia.org/wiki/%D8%AC%D8%A7%D9%81%D8%A7_%D8%B3%D9%83%D8%B1%D9%8A%D8%A8%D8%AA#%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85_%D8%AE%D8%A7%D8%B1%D8%AC_%D8%A7%D9%84%D9%85%D8%AA%D8%B5%D9%81%D8%AD">تستعمل في بيئات أخرى غير المتصفحات</a> مثل <a class="external" href="https://nodejs.org/">node.js</a> أو <a href="https://couchdb.apache.org/">Apache CouchDB</a>. فهي لغة برمجة نصيّة ديناميكيّة <a class="mw-redirect" href="https://en.wikipedia.org/wiki/Prototype-based_programming" title="Prototype-based">مبنية على النماذج</a> و متعددة النماذج، وهي تدعم نمطي البرمجة الحتمي (imperative) الوظيفي (functional). اقرأ المزيد <a href="/ar/docs/Web/JavaScript/About_JavaScript">عن جافا سكربت</a>.</p> + +<p dir="rtl">يختص هذا الجزء بالجافاسكربت كلغة برمجة، بغض النظر عن مواقع الويب أو البيئات التي يمكن لهاته اللغة أن تعمل عليها. للمزيد من المعلومات حول الواجهات البرمجيّة الخاصة بمواقع الويب، طالع <a href="/ar/docs/Glossary/DOM">DOM</a> و <a href="/ar/docs/Web/API">الواجهات البرمجيّة للويب</a>.</p> + +<p dir="rtl">يسمى معيار الجافا سكربت <a href="/ar/docs/Web/JavaScript/Language_Resources">ECMAScript</a>. بدءً من عام 2012، جميع المتصفحات الحديثة تدعم بشكل كامل ECMAScript 5.1. المتصفحات القديمة تدعم على الأقل ECMAScript 3. في 17 يونيو 2015، تم نشر النسخة الرئيسيّة السادسة من ECMAScript. ويسمى هذا الإصدار رسمياً ECMAScript 2015، ولكن يشار إليه عادةً باسم ECMAScript 6 أو ES6. تشير هذه الوثائق إلى الإصدار الأحدث من اللغة، والذي هو <a href="https://tc39.github.io/ecma262/">ECMAScript 2018</a>.</p> + +<p dir="rtl">لا ينبغي الخلط بين الجافاسكربت و<a href="https://ar.wikipedia.org/wiki/%D8%AC%D8%A7%D9%81%D8%A7_(%D9%84%D8%BA%D8%A9_%D8%A8%D8%B1%D9%85%D8%AC%D8%A9)">لغة البرمجة جافا</a>. يعد كلاً من الأسمين "جافا" و "جافاسكربت" علامات تجاريّة مُسجلة لشركة أوراكل في الولايات المتحدة الأمريكيّة وغيرها من البلدان. كلتا اللغتين تملكان بنيّة كتابيّة مختلفة، ودلالة مختلفة، وكذلك استخدامات مختلفة.</p> + +<div class="column-container"> +<div class="column-half"> +<h2 dir="rtl" id="دورات">دورات</h2> + +<p dir="rtl">تعلم البرمجة باستخدام الجافاسكربت من خلال الدورات والدروس الإرشاديّة التالية.</p> + +<h3 dir="rtl" id="للمبتدئين">للمبتدئين</h3> + +<p dir="rtl">اطلع على <a href="/ar/docs/Learn/JavaScript">قسم مواضيع تعلم الجافاسكربت</a> إذا كنت ترغب بتعلم الجافاسكربت ولكنك لا تملك أي معرفة مسبقة بهاته اللغة أو بالبرمجة ككل. الوحدات المتوفرة هي:</p> + +<dl> + <dt dir="rtl"><a href="/ar/docs/Learn/JavaScript/First_steps">الخطوات الأولى مع الجافاسكربت</a></dt> + <dd dir="rtl">تجيب هذه المقالة عن بعض الأسئلة الأساسيّة، مثل "ما هي الجافاسكربت؟"، "كيف تبدو هذه اللغة؟"، "ماذا بإمكانها أن تفعل؟"، بالإضافة إلى مناقشة بعض الميزات الأساسيّة للغة مثل المتغيّرات، السلاسل النصية، الأرقام، والمصفوفات.</dd> + <dt dir="rtl"><a href="/ar/docs/Learn/JavaScript/Building_blocks">البنى الكتليّة في اللغة</a></dt> + <dd dir="rtl">نكمل رحلتنا في تغطيّة المفاهيم الأساسية في لغة الجافاسكربت، ففي هذه المقالة قمنا بالتركيز على البنى الكتليّة الشائعة في اللغة مثل الجمل الشرطيّة، الحلقات، الدوال، والأحداث.</dd> +</dl> + +<h3 dir="rtl" id="دليل_لغة_جافا_سكربت">دليل لغة جافا سكربت</h3> + +<dl> + <dt dir="rtl"><a href="/ar/docs/Web/JavaScript/Guide">دليل اللغة</a></dt> + <dd dir="rtl">دليل أكثر تفصيلاً حول لغة الجافاسكربت، فهو موجه للذين يمتلكون معرفة مسبقة، سواءً بلغة الجافا سكربت، أو بلغات البرمجة الأخرى.</dd> +</dl> + +<h3 dir="rtl" id="مقالات_لذوي_الخبرة_المتوسطة">مقالات لذوي الخبرة المتوسطة</h3> + +<dl> + <dt dir="rtl"><a href="/ar/docs/Learn/JavaScript/Objects">مقدمة إلى الكائنات</a></dt> + <dd dir="rtl">من المهم فهم البرمجة الشيئيّة في اللغة إذا أردت زيادة معرفتك والتمكن من كتابة شيفرة برمجيّة أكثر فعاليّة، من أجل ذلك قمنا بتوفير هذه الوحدة لك.</dd> + <dt dir="rtl"><a href="/ar/docs/Learn/JavaScript/Client-side_web_APIs">واجهات التصميم (جهة العميل) البرمجيّة </a></dt> + <dd dir="rtl">لن تستطيع العمل جيداً عند تطوير جهة المستخدم (client-side) باستخدام الجافاسكربت من دون تعلمك للواجهات البرمجيّة المتخصصة، فهي واجهات للتلاعب بأجزاء مختلفة من المُتصفِح ونظام التشغيل الذي يعمل عليه الموقع، أو حتى التلاعب بحقول بيانات مواقع أو خدمات أخرى. في هذه الوحدة سنستكشف ماهيّة هذه الواجهات، وكيف تستخدم بعض من أكثر تلك الواجهات شيوعاً والتي ستحتاجها غالباً في عملك.</dd> +</dl> + +<dl> + <dt dir="rtl"><a href="/ar/docs/Web/JavaScript/A_re-introduction_to_JavaScript">نظرة عامة على الجافاسكربت</a></dt> + <dd dir="rtl">مقالة تقدم نظرة عامة للذين <em>يظنون</em> أنهم يعرفون الجافاسكربت.</dd> +</dl> + +<dl> + <dt dir="rtl"><a href="/ar/docs/Web/JavaScript/Data_structures">هياكل بيانات الجافاسكربت</a></dt> + <dd dir="rtl">نظرة عامة على هياكل البيانات المتوفرة في اللغة.</dd> + <dt dir="rtl"><a href="/ar/docs/Web/JavaScript/Equality_comparisons_and_sameness">عبارات المساواة والتطابق</a></dt> + <dd dir="rtl">توفر الجافاسكربت ثلاثة عمليات مساواة مختلفة: المساواة الصارمة باستخدام <code>===</code> والمساواة المتساهلة باستخدام <code>==</code> والدالة {{jsxref("Global_Objects/Object/is", "Object.is()")}}.</dd> +</dl> + +<h3 dir="rtl" id="مقالات_متقدمة">مقالات متقدمة</h3> + +<dl> + <dt dir="rtl"><a href="/ar/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">الميراث وسلسلة النموذج الأولي</a></dt> + <dd dir="rtl">شرح الميراث القائم على النموذج الأولي الذي يساء فهمه على نطاق واسع.</dd> + <dt dir="rtl"><a href="/ar/docs/Web/JavaScript/Reference/Strict_mode">الوضع الصارم</a></dt> + <dd dir="rtl">في الوضع الصارم (strict mode)، لا يمكنك استخدام أي متغيّر قبل تعريفه. فيعد الوضع الصارم البديل المحدود لـ ECMAScript 5، لأداء أسرع وأكثر سهولة في التنقيح.</dd> + <dt dir="rtl"><a href="/ar/docs/Web/JavaScript/Typed_arrays">مصفوفات الجافاسكربت المكتوبة</a></dt> + <dd dir="rtl"> + <div id="gt-res-content"> + <div class="trans-verified-button-small" dir="rtl" id="gt-res-dir-ctr"> + <div id="tts_button">توفر مصفوفات الجافاسكربت المكتوبة (typed arrays) آلية للوصول إلى البيانات الثنائيّة.</div> + </div> + </div> + </dd> + <dt dir="rtl"><a href="/ar/docs/Web/JavaScript/Memory_Management">إدارة الذاكرة</a></dt> + <dd dir="rtl">دورة حياة الذاكرة وجمع القمامة (garbage collection) في لغة الجافاسكربت.</dd> + <dt dir="rtl"><a href="/ar/docs/Web/JavaScript/EventLoop">نموذج التزامن وحلقة الحدث</a></dt> + <dd dir="rtl">تمتلك لغة الجافاسكربت نموذج تزامن قائم على مفهوم "حلقة الحدث (event loop)".</dd> +</dl> +</div> + +<div class="column-half"> +<h2 dir="rtl" id="مرجع_اللغة">مرجع اللغة</h2> + +<p dir="rtl">تصفح <a href="/ar/docs/Web/JavaScript/Reference">مرجع لغة الجافاسكربت</a> الشامل.</p> + +<dl> + <dt dir="rtl"><a href="/ar/docs/Web/JavaScript/Reference/Global_Objects">الكائنات القياسيّة</a></dt> + <dd dir="rtl">تعرف على الكائنات القياسيّة المبنيّة في اللغة {{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")}}، وغيرها الكثير.</dd> + <dt dir="rtl"><a href="/ar/docs/Web/JavaScript/Reference/Operators">التعابير والعمليات</a></dt> + <dd dir="rtl">تعلم المزيد حول وظيفة العمليات (operators) في الجافاسكربت {{jsxref("Operators/instanceof", "instanceof")}}، {{jsxref("Operators/typeof", "typeof")}}، {{jsxref("Operators/new", "new")}}, {{jsxref("Operators/this", "this")}}، وغيرها الكثير.</dd> + <dt dir="rtl"><a href="/ar/docs/Web/JavaScript/Reference/Functions">الدوال</a></dt> + <dd dir="rtl">تعلم كيفيّة العمل مع الدوال في لغة الجافاسكربت لتطوير برمجياتك.</dd> +</dl> + +<h2 dir="rtl" id="أدوات_ومراجع">أدوات ومراجع</h2> + +<p dir="rtl">أدوات مفيدة لكتابة وتنقيح شيفرات <strong>الجافاسكربت</strong>.</p> + +<dl> + <dt dir="rtl"><a href="/ar/docs/Tools">أدوات مطورين فايرفوكس</a></dt> + <dd dir="rtl">أداة <a href="/ar/docs/Tools/Scratchpad">Scratchpad</a> ،<a href="/ar/docs/Tools/Web_Console">Web Console</a> ،<a href="/ar/docs/Tools/Profiler">JavaScript Profiler</a> ،<a href="/ar/docs/Tools/Debugger">Debugger</a>، وغيرها الكثير.</dd> + <dt dir="rtl"><a href="/ar/docs/Web/JavaScript/Shells">صدفات الجافاسكربت</a></dt> + <dd dir="rtl">تسمح لك هذه الصدفات (shells) بالتجريب السريع لشيفرات الجافاسكربت.</dd> + <dt dir="rtl"><a href="https://togetherjs.com/">أداة TogetherJS</a></dt> + <dd dir="rtl">التعاون يجعل الأمر سهلاً. بإضافة هذه الأداة لموقعك، سيتمكن المستخدمون من مساعدة بعضهم البعض على موقعك بشكل حي!</dd> + <dt dir="rtl"><a href="https://stackoverflow.com/questions/tagged/javascript">موقع Stack Overflow</a></dt> + <dd dir="rtl">الأسئلة الموسومة بالوسم "JavaScript" الموجودة على موقع Stack Overflow.</dd> + <dt dir="rtl"><a href="/ar/docs/Web/JavaScript/New_in_JavaScript">ملاحظات إصدار الجافاسكربت</a></dt> + <dd dir="rtl">تصفح سجل ميزات الجافاسكربت وحالة التقدم في التطوير.</dd> + <dt dir="rtl"><a href="https://jsfiddle.net/">أداة JSFiddle</a></dt> + <dd dir="rtl">قم بتعديل شيفرات الجافاسكربت، ولغة ترميز النص الفائق، وصفحات الأنماط الانسيابية واحصل على النتائج بشكل حي. استخدم موارد خارجيّة وتعاون مع أفراد فريقك على الأنترنت.</dd> + <dt dir="rtl"><a href="https://plnkr.co/">أداة Plunker</a></dt> + <dd dir="rtl">مجتمع على الإنترنت لإنشاء، والتعاون، ومشاركة أفكار تطوير الويب. قم بتعديل ملفات الجافاسكربت وغيرها من الملفات واحصل على النتائج بشكل حي.</dd> +</dl> +</div> +</div> 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 +--- +<div>{{jsSidebar("Introductory")}}</div> + +<p>كائنية التوجه حتى النخاع، ميزات جافا سكريبت القوية، القدرات المرنة {{Glossary("OOP")}}. يبدأ هذا المقال بمقدمة إلى البرمجة الكائنية التوجه، ثم مراجعات لنموذج كائن جافا سكريبت، و أخيراً يوضح مفاهيم البرمجة الكائنية التوجه في جافا سكريبت. لا يصف هذا المقال البناء اللغوي الجديد <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">للبرمجة الكائنية التوجه في ECMAScript 6</a>.</p> + +<div style="font-size: 15; font-family: 'tahoma';"> +<h2 id="مراجعة_جافا_سكريبت">مراجعة جافا سكريبت</h2> + +<p>إذا كنت لا تشعر بالثقة حول مفاهيم جافا سكريبت مثل المتغيرات والأنواع والوظائف و المجال ، يمكنك ان تقرأ عن هذه المواضيع في <a href="/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript">مدخل إلى جافا سكريبت</a>. يمكنك أيضا الاطلاع علي <a href="/en-US/docs/Web/JavaScript/Guide">دليل جافا سكريبت</a>.</p> + +<h2 id="البرمجة_الكائنية_التوجه_(Object-oriented_programming)">البرمجة الكائنية التوجه (Object-oriented programming)</h2> + +<p>إن البرمجة الكائنية (OOP) ما هي إلا نمط برمجي يَستخدم التجريد في إنشاء نماذج/نسخ لتجسيد العالم الحقيقي، وتَستخدم البرمجة الكائنية في ذلك أساليب مُتعدّدة من هذا النمط، فهي تستخدم الوحدات module، وتعدديّة الأشكال polymorphism والتغليف encapsulation، وتجدر الإشارة إلى أن معظم لغات البرمجة تدعم مفهوم OOP أمثال اللغات البرمجية: جافا، بايثون، روبي، وطبعًا جافا سكريبت.</p> + +<p>يُعالج أو لنقل يَتصور مفهوم البرمجة الكائنية OOP البرنامج كتشكيلة من الأشياء/الكائنات المتعاونة/المترابطة بدلًا من يتصوّره كتشكيلة من الدوال (functions) أو كسرد من الأوامر. ففي مفهوم OOP، كل كائن/شيء له القدرة على استقبال الرسائل، ومعالجة البيانات، وإرسال الرسائل إلى باقي الكائنات، ويُمكن اعتبار أنه لكل كائن object كينونة خاصة به ودور/وظيفة مستقلة عن الكائن الآخر.</p> + +<p>تُعزز البرمجة الكائنية القدرة على صيانة الشيفرة البرمجية والمرونة في التطوير، وأثبتت جدارتها على نطاق واسع في هندسة البرمجيات الكبيرة، ولأن البرمجة الكائنية تُشدد على استخدام الوحدات module، فإن الشيفرة/الكود المكتوب بمفهوم البرمجة الكائنية هو أبسط في التطوير وأسهل في الفهم مستقبلًا (عند التنقيح والتعديل)، وكما يعزز مفهوم البرمجة الكائنية التحليل المباشر للشيفرة، وفهم الحالات الشائكة فهمًا أفضل من باقي الأساليب البرمجية الأخرى.</p> + +<h2 id="مصطلحات_البرمجة_الكائنية">مصطلحات البرمجة الكائنية</h2> + +<dl> + <dt dir="ltr"> + <h3 dir="rtl" id="المجال_في_البرمجة_الكائنية_Namespace">المجال في البرمجة الكائنية Namespace</h3> + + <p dir="rtl">ما هو إلا عبارة عن حاوي تسمح للمطوّر بتحزيم جميع الوظائف تحت اسم محدد وفريد.</p> + + <h3 dir="rtl" id="الصنف_أو_الفئة_Class_في_البرمجة_الكائنية">الصنف أو الفئة Class في البرمجة الكائنية</h3> + + <p dir="rtl">يعتني الصنف بكل ما يتعلّق بميزات وخصائص الكائن، والصنف ما هو إلا قالب template تعريفي بخاصيات properties وبطُرق/وظائف methods الكائن object.</p> + + <h3 dir="rtl" id="الكائن_Object_في_البرمجة_الكائنية">الكائن Object في البرمجة الكائنية</h3> + + <p dir="rtl">الكائن ما هو إلا حالة/أمثولة instance من صنف class.</p> + + <h3 dir="rtl" id="الخاصية_property_في_البرمجة_الكائنية">الخاصية property في البرمجة الكائنية</h3> + + <p dir="rtl">ما هي إلا مميزات وخصائص الكائن، كاللون مثلًا.</p> + + <h3 dir="rtl" id="الطريقة_أو_الوظيفة_Method_في_البرمجة_الكائنية">الطريقة أو الوظيفة Method في البرمجة الكائنية</h3> + + <p dir="rtl">تعتني الطريقة أو الوظيفة كما يُسميها البعض بقدرات الكائن، مثل قدرة المشي مثلًا، وهي دور أو وظيفة مرتبطة مع صنف class.</p> + + <h3 dir="rtl" id="المشيد_Constructor_في_البرمجة_الكائنية">المشيد Constructor في البرمجة الكائنية</h3> + + <p dir="rtl">ما هو إلا طريقة method تُستدعى في لحظة استهلال instantiate الكائن، وعادةً ما يكون له نفس اسم الصنف الذي يحتويه.</p> + + <h3 dir="rtl" id="الوراثة_Inheritance_في_البرمجة_الكائنية">الوراثة Inheritance في البرمجة الكائنية</h3> + + <p dir="rtl">يُمكن للصنف أن يرث مميزات من صنف آخر.</p> + + <h3 dir="rtl" id="التغليف_Encapsulation_في_البرمجة_الكائنية">التغليف Encapsulation في البرمجة الكائنية</h3> + + <p dir="rtl">طريقة في تحزيم البيانات data والطُرق methods التي تستخدم البيانات.</p> + + <h3 dir="rtl" id="التجريد_Abstraction_في_البرمجة_الكائنية">التجريد Abstraction في البرمجة الكائنية</h3> + + <p dir="rtl">يجب على الاقتران الحاصل من: الوراثة والطُرق methods والخاصيات properties لكائن معقد وشائك التمثيل برمجيًا أن يعكس الواقع المراد محاكاته في البرمجة الكائنية.</p> + + <h3 dir="rtl" id="تعددية_الأشكال_Polymorphism_في_البرمجة_الكائنية">تعددية الأشكال Polymorphism في البرمجة الكائنية</h3> + + <p dir="rtl">تحمل كلمة Poly بحد ذاتها المعنى "متعدد" وتحمل الكلمة morphism المعنى "أشكال، ويُشير المفهوم ككل إلى أن أكثر من صنف قد يُعرّف نفس الطريقة method أو الخاصية property.</p> + </dt> +</dl> + +<p>للحصول على وصف أكثر شمولية للبرمجة الكائنية التوجه، أنظر {{interwiki("wikipedia", "البرمجة كائنية التوجه")}} على ويكيبيديا.</p> + +<h2 id="البرمجة_المعتمدة_على_النموذج_الأولي_Prototype">البرمجة المعتمدة على النموذج الأولي Prototype</h2> + +<p>البرمجة المعتمدة على النموذج الأوّلي (Prototype-based programming) ما هي إلا نموذج من البرمجة الكائنية OOP ولكنها لا تستخدم الأصناف classes، بل تقوم أولًا بإعداد سلوك أي صنف class ما ومن ثم تُعيد استخدامه، ويُطلق البعض على هذا النموذج: البرمجة بلا أصناف classless، أو البرمجة المَبْدَئِية المنحى prototype-oriented، أو البرمجة المعتمدة على الأمثولة instance-based).</p> + +<p>يعود أصل اللغة المعتمدة على النموذج الأولي إلى لغة <a href="http://en.wikipedia.org/wiki/Self%20(programming%20language" rel="external nofollow noopener noreferrer">Self</a>، والتي طوّرها David Ungar وRandall Smith، ولكن أسلوب البرمجة بدون أصناف class-less توسّع ونال شهرة كبيرة في العقد الأخير، واُعتمد من قبل العديد من اللغات البرمجية أشهرهم جافا سكريبت.</p> + +<p dir="ltr"> </p> + +<h2 id="البرمجة_الكائنية_باستخدام_جافا_سكريبت">البرمجة الكائنية باستخدام جافا سكريبت</h2> + +<h3 id="المجال_Namespace_في_جافا_سكريبت">المجال Namespace في جافا سكريبت</h3> + +<p>المجال هو أشبه بمستوعب/بحاوية (container) تسمح للمطوّر في تحزيم وظائف تحت اسم فريد، أو اسم تطبيق محدد، ففي جافا سكريبت المجال هو مجرد كائن object كأي كائن آخر يحتوي على طُرق methods، وخاصيات properties، وحتى كائنات objects.</p> + +<div class="note"> +<p><strong>ملاحظة هامة</strong>: من المهم جدًا الانتباه إلى أنه في جافا سكريبت، لا يوجد فرق بين الكائنات العادية والمجالات namespaces، وهذا يختلف عن اللغات الكائنية الأخرى، الأمر الذي قد يُربك المبرمجين المبتدئين في جافا سكريبت.</p> +</div> + +<p>إن إنشاء مجال namespace في جافا سكريبت بسيطٌ للغاية، فمن خلال إنشاء كائن عام/مشترك/شامل global، ستصبح جميع المُتغيّرات variables والطرق methods، والدوال functions خاصياتٍ لهذا الكائن، ويٌقلل استخدام المجالات namespaces أيضًا من احتمالية تضارب الأسماء في التطبيق، منذ أن كل كائن من كائنات التطبيق ما هي إلى خاصيات كائن شامل/عام معرّفة على مستوى التطبيق.</p> + +<p>سيُنشئ في الخطوة التالية كائنًا عامًا global وبالاسم <code>MYAPP</code>:</p> + +<pre class="brush: js" dir="rtl">// مجال عالمي +var MYAPP = MYAPP || {};</pre> + +<p>يُظهر المثال السابق، كيف تم التأكّد أولًا فيما إذا كان <code>MYAPP</code> معرفًا (سواء في نفس الملف أو في آخر)، ففي حال الإيجاب سيُستخدم الكائن العام <code>MYAPP</code>، وفي حال عدم تعريفه مُسبقًا سيُنشئ كائنًا خالٍ وبالاسم<code>MYAPP</code> والذي سيغلّف encapsulate الطرق methods والدوال functions والمتغيرات variables والكائنات objects.</p> + +<p>كما يُمكن أيضًا إنشاء مجال فرعي sub-namespaces:</p> + +<pre class="brush: js" dir="rtl">// مجال فرعي +MYAPP.event = {};</pre> + +<p>يوضّح المثال التالي الصيغة المستخدمة في إنشاء مجال namespace وإضافة متغيرات ودوال:</p> + +<pre class="brush: js" dir="rtl">// إنشاء حاوي يدعى MYAPP.commonMethod للوظائف و الخصائص الشائعة +MYAPP.commonMethod = { + regExForName: "", // تعريف تعبير نظامي للتحقق من الإسم + regExForPhone: "", // تعريف تعبير نظامي للهاتف، لا يوجد تحقق من الصحة + validateName: function(name){ + // إفعل شيئا ما بالإسم، يمكنك الوصول إلى المتغير regExForName + // بإستعمال "this.regExForName" + }, + + validatePhoneNo: function(phoneNo){ + // إفعل شيئا ما برقم الهاتف + } +} + +// تعريفات الكائن مع الزظيفة في نفس الوقت +MYAPP.event = { + addListener: function(el, type, fn) { + // بعض الأكواد + }, + removeListener: function(el, type, fn) { + // بعض الأكواد + }, + getEvent: function(e) { + // بعض اﻷكواد + } + + // يمكن إضافة وظائف و خصائص أخرى +} + +// البناء اللغوي لإستعمال وظيفة addListener: +MYAPP.event.addListener("yourel", "type", callback);</pre> + +<h3 id="sect1"> </h3> + +<h3 id="الكائنات_الأساسيةالقياسية_المبنية_داخل_لغة_جافا_سكريبت_(Standard_built-in_objects)">الكائنات الأساسية/القياسية المبنية داخل لغة جافا سكريبت (Standard built-in objects)</h3> + +<p>تتضمن لغة جافا سكريبت العديد من الكائنات في تركيبتها، على سبيل المثال، يوجد كائنات مثل <code>Math</code>،<code>Object</code>، <code>Array</code>، <code>String</code>، ويُظهر المثال التالي كيفيّة استخدام الكائن <code>Math</code> للحصول على رقم عشوائي باستخدام أحد طُرق method هذا الكائن وهي الطريقة ()<code>random</code>.</p> + +<pre class="brush: js" dir="rtl">console.log(Math.random()); +</pre> + +<div class="note"> +<p><strong>ملاحظة</strong>: يَفترض المثال السابق وجميع الأمثلة التالية في المقال وجود دالة function بالاسم()<code>console.log</code> معرّفة تعريفًا عامًا (globally)، مع العلم أن هذه الدالة ليست جزء من اللغة نفسها، ولكنها دالة متوفّرة في العديد من متصفحات الإنترنت لأغراض تشخيص الشيفرة البرمجية debugging.</p> +</div> + +<p>يُمكن العودة إلى <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects" rel="external nofollow noopener noreferrer">مرجع لغة جافا سكريبت: الكائنات الأصلية المعيارية</a> للحصول على قائمة بالكائنات المبينة داخل لغة جافا سكريبت نفسها.</p> + +<p>كل كائن في جافا سكريبت هو حالة/أمثولة instance من الكائن <code>Object</code> ويَرث كافة خاصياته properties وطُرقه methods.</p> + +<h3 id="sect2"> </h3> + +<h3 id="الكائنات_الخاصة_الصنف_(الفئة)">الكائنات الخاصة<br> + <span style='font-family: "Open Sans Light",Helvetica,Arial,sans-serif; font-size: 1.286rem; letter-spacing: -0.014em;'>الصنف (الفئة</span><span style='font-family: "Open Sans Light",Helvetica,Arial,sans-serif; font-size: 1.286rem; letter-spacing: -0.014em;'>)</span></h3> + +<h4 id="لغة_جافا_سكريبت_لغة_من_النوع_prototype-based_ولا_تحتوي_على_العبارة_class_كما_هو_حال_باقي_لغات_البرمجة_الكائنية،_كما_في_روبي_أو_بايثون،_ويُربك_هذا_الأمر_المبرمجين_المعتادين_على_اللغات_التي_تعتمد_على_هذه_العبارة_أو_المفهوم،_وتستخدم_جافا_سكريبت_بدلًا_من_ذلك_الدوال_functions_لمحاكات_مفهوم_الأصناف_classes،_وتعريف_صنف_هو_بسهولة_تعريف_أي_دالّة">لغة جافا سكريبت لغة من النوع prototype-based ولا تحتوي على العبارة <code>class</code> كما هو حال باقي لغات البرمجة الكائنية، كما في روبي أو بايثون، ويُربك هذا الأمر المبرمجين المعتادين على اللغات التي تعتمد على هذه العبارة أو المفهوم، وتستخدم جافا سكريبت بدلًا من ذلك الدوال functions لمحاكات مفهوم الأصناف classes، وتعريف صنف هو بسهولة تعريف أي دالّة:</h4> + +<pre class="brush: js" dir="rtl">var Person = function () {}; +</pre> + +<h4 id="الكائن_(أمثولة_الصنف_class_instance)">الكائن (أمثولة الصنف class instance)</h4> + +<p>يتطلب إنشاء حالة/أمثولة instance جديدة من كائن <code>obj</code> استخدام العبارة <code>new obj</code>، وتعيين النتيجة إلى متغيّر بغرض الوصول إلى فيما بعد.</p> + +<p>عُرّف في الشيفرة السابقة صنف class بالاسم <code>Person</code>، وفي الشيفرة التالية، سيُنشئ حالتين/أمثولتين instances من هذا الصنف، الأولى بالاسم <code>person1</code> والثانية بالاسم <code>person2</code>.</p> + +<pre class="brush: js" dir="rtl">var person1 = new Person(); +var person2 = new Person(); +</pre> + +<div class="note">فضلا أنظر {{jsxref("Object.create()")}} للحصول على وظيفة الإنشاء الجديدة الإضافية التي تنشأ حالة غير مهيأة</div> + +<h4 id="المشيد_The_constructor">المشيد The constructor</h4> + +<p>يُستدعى المُشيّد constructor في لحظة الاستهلال instantiation (اللحظة التي يُنشئ فيها الكائن)، والمُشيّد ما هو إلا طريقة method من طُرق الصنف class، وفي جافا سكريبت تعمل الدالة على تشييد الكائن، ولذلك لا داعي إلى تعريف طريقة method من أجل عميلة التشييد، وكل إجراء مصرّح في الصنف class يُنفّذ في لحظة الاستهلال instantiation.</p> + +<p>يُستخدم المُشيّد في تعيين خاصيات properties الكائن، أو في استدعاء طُرق methods معينة لتحضير الكائن للاستخدام، وأما إضافة طُرق صنف وتعريفها يحدث باستخدام صيغة syntax مختلفة سنتطرّق إليها فيما بعد خلال المقال.</p> + +<p>تُظهر الشيفرة التالية كيف يُسجّل log (يُرسل رسالة نصية إلى طرفية المتصفح console) مُشيّد الصنف<code>Person</code> رسالة نصية حينما يُستهل instantiated.</p> + +<pre class="brush: js" dir="rtl">var Person = function () { + console.log('تم إنشاء حالة'); +}; + +var person1 = new Person(); +var person2 = new Person(); + +</pre> + +<h4 id="الخاصية_The_property_(خاصية_الكائن_object_attribute)">الخاصية The property (خاصية الكائن object attribute)</h4> + +<p>الخاصيات properties ما هي إلا متغيرات محتوات في الصنف class، وكل حالة/أمثولة من الكائن تمتلك هذه الخاصيات، وتُعيّن الخاصيات في دالة مُشيّد الصنف بحيثُ تُنشئ مع كل حالة/أمثولة instance.</p> + +<p>إن الكلمة المفتاحية <code>this</code>، والتي تُشير إلى الكائن الحالي، تسمح للمطوّر بالعمل مع الخاصيات من ضمن الصنف، والوصول (قراءةً وكتابةً) إلى الخاصية property من خارج الصنف يكون من خلال الصيغة<code>InstanceName.Property</code> كما هو الأمر في لغة C++ (سي بلس بلس) وJava والعديد من اللغات الأخرى، ومن داخل الصنف تُستخدم الصيغة <code>this.Property</code> للحصول على قيمة الخاصية أو لتعيين قيمتها.</p> + +<p>في الشيفرة التالية، عُرّفت الخاصية <code>firstName</code> للصنف <code>Person</code> وفي لحظة الاستهلال instantiation:</p> + +<pre class="brush: js" dir="rtl">var Person = function (firstName) { + this.firstName = firstName; + console.log('تم إنشاء حالة من Person'); +}; + +var person1 = new Person('سفيان'); +var person2 = new Person('محمد'); + +// Show the firstName properties of the objects +console.log('الشخص1 هو ' + person1.firstName); // النتيجة ==> "الشخص1 هو سفيان" +console.log('الشخص2 هو ' + person2.firstName); // النتيجة ==> "الشخص2 هو محمد" +</pre> + +<h4 id="الطرق_The_methods">الطرق The methods</h4> + +<p>الطرق methods ما هي إلا دوال (وتُعرّف كما تعرّف الدوال functions)، فيما عدا ذلك فهي تُشبه الخاصيات properties، واستدعاء طريقة method مشابه إلى الوصول إلى خاصيّة ما، ولكن مع إضافة <code>()</code> في نهاية اسم الطريقة، وربما مع مُعطيات arguments، ولتعريف طريقة، تُعيّن دالة إلى خاصيّة مُسمّات من خاصيّة الصنف <code>prototype</code>، ويُمكن فيما بعد استدعاء الطريقة على الكائن بنفس الاسم الذي عُيّن للدالة.</p> + +<p>في الشيفرة التالية، عُرّفت ومن ثم اُستخدِمت الطريقة ()<code>sayHello</code> للصنف <code>Person</code>.</p> + +<pre class="brush: js" dir="rtl">var Person = function (firstName) { + this.firstName = firstName; +}; + +Person.prototype.sayHello = function() { + console.log("مرحبا، أنا " + this.firstName); +}; + +var person1 = new Person("سفيان"); +var person2 = new Person("محمد"); + +// إستدعاء طريقة Person sayHello. +person1.sayHello(); // النتيجة ==>"مرحبا، أنا سفيان" +person2.sayHello(); // النتيجة ==> "مرحبا، أنا محمد" +</pre> + +<p>إن الطُرق methods في جافا سكريبت ما هي إلا دالة كائن عادية مرتبطة مع كائن كخاصية property، وهذا يعني أنه يُمكن استدعاء الطُرق خارج السياق، كما في المثال التالي:</p> + +<pre class="brush: js" dir="rtl">var Person = function (firstName) { + this.firstName = firstName; +}; + +Person.prototype.sayHello = function() { + console.log("مرحبا، أنا " + this.firstName); +}; + +var person1 = new Person("سفيان"); +var person2 = new Person("محمد"); +var helloFunction = person1.sayHello; + +// النتيجة ==> "مرحبا، أنا سفيان" +person1.sayHello(); + +// النتيجة ==> "مرحبا، أنا محمد" +person2.sayHello(); + +// النتيجة ==> "مرحبا، أنا undefined" (أو أخطاء +// TypeError في الوضع الصارم) +helloFunction(); + +// النتيجة ==> true +console.log(helloFunction === person1.sayHello); + +// النتيجة ==> true +console.log(helloFunction === Person.prototype.sayHello); + +// النتيجة ==> "مرحبا، أنا سفيان" +helloFunction.call(person1);</pre> + +<p>كما يُظهر المثال السابق، جميع الإحالات المستخدمة في استدعاء الدالة <code>sayHello</code> تُشير إلى <strong><em>نفس الدالة</em></strong>سواءً الاستدعاء الحاصل مع <code>person1</code> أو <code>Person.prototype</code> أو حتى في المتغيّر <code>helloFunction</code>وقيمة <code>this</code> خلال استدعاء الدالة يعتمد على الكيفية التي تُستدعى فيها، حيث تُشير الكلمة المفتاحية<code>this</code> إلى الكائن الحالي الذي تُستدعى عليه الطريقة method، بمعنى عندما تم استدعاء الطريقة()<code>sayHello </code>على الكائن <code>person1</code> فإن <code>this</code> تُشير إلى الكائن <code>person1</code>، وعند استدعاء <code>sayHello</code>على الكائن <code>person2</code> فإن <code>this</code> تُشير إلى الكائن <code>person2</code>، ولكن إن تم الاستدعاء بطريقة مختلفة، فإن<code>this</code> ستُعيّن تعينًا مختلفًا، فاستدعاء <code>this</code> من المتغيّر (كما في ()<code>helloFunction</code>) سيُعيّن <code>this</code> إلى الكائن العام global (والذي سيكون window في متصفح الإنترنت)، ومنذ أن هذا الكائن (على الأغلب) لا يملك الخاصّيّة <code>firstName</code>، ستكون النتيجة كما هو الحال في المثال السابق “Hello, I’m undefined”، كما يمكن دائمًا تعيين <code>this</code> صراحةً باستخدام <code>Function#call</code> (أو <code>Function#apply</code>) وهو كما كان في نهاية المثال.</p> + +<div class="note"><strong>ملاحظة:</strong> أنظر المزيد حول <code>this</code> على <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/call">call</a> و <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/apply">apply</a></div> + +<h4 id="الوراثة">الوراثة</h4> + +<p>تُستخدم الوراثة في جافا سكريبت في إنشاء صنف class كمثيل مخصص لصنف أو أكثر (<strong><em>تدعم جافا سكريبت وراثة وحيدة فقط single inheritance</em></strong>)، ويُطلق على الصنف المخصص عادةً <strong><em>ابن</em></strong> (child)، ويطلق على الصنف الآخر عادةً <strong><em>الأب</em></strong> (parent)، وفي جافا سكريبت يتمّ ذلك من خلال إسناد حالة/أمثولة من الصنف الأب إلى الصنف الابن، ومن ثم تخصيصه، وفي متصفحات الإنترنت الحديثة يُمكن استخدام<code>Object.create</code> في تحقيق الوراثة inheritance أيضًا.</p> + +<div class="note" dir="ltr"> +<p dir="rtl"><strong>ملاحظة</strong>: لا تتفقد جافا سكريبت مُشيّد صنف الابن <code>prototype.constructor</code> (راجع<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype" rel="external nofollow noopener noreferrer"><code>Object.prototype</code></a>)، وعليه يجب التصريح عن ذلك يدويًا، لمزيد من التفصيل راجع السؤال التالي على<a href="http://stackoverflow.com/questions/8453887/why-is-it-necessary-to-set-the-prototype-constructor" rel="external nofollow noopener noreferrer">Stackoverflow</a>.</p> +</div> + +<p>عُرّف في الشيفرة التالية الصنف <code>Student</code> كصنف ابن للصنف <code>Person</code>، ومن ثم أُعيد تعريف الطريقة()<code>sayHello</code> وأُضيفت الطريقة ()<code>sayGoodBye</code> علاوة على ذلك.</p> + +<pre class="brush: js" dir="rtl">// تعريف المشيد Person +var Person = function(firstName) { + this.firstName = firstName; +}; + +// إضافة زوج من الطرق إلى Person.prototype +Person.prototype.walk = function(){ + console.log("أنا أتمشى!"); +}; + +Person.prototype.sayHello = function(){ + console.log("مرحبا، أنا " + this.firstName); +}; + +// تعريف مشيد Student +function Student(firstName, subject) { + // إستدعاء المشيد اﻷب, التأكد (عن طريق الإستدعاء) + // من أن "this" وضعت بشكل صحيح أثناء اﻹستدعاء + Person.call(this, firstName); + + // تهيئة خصائص الطالب المحددة + this.subject = subject; +} + +// إنشاء كائن Student.prototype الذي يرث من Person.prototype. +// ملاحظة: خطأ شائع أن يستعمل "new Person()" ﻹنشاء +// Student.prototype. هذا غير صحيح لعدة أسباب، +// ليس أقل أننا ليس لدينا أي شيء ﻹعطاء Person إلى المعامل "firstName". +// الطريقة الصحيحة ﻹستدعاء Person هي في الأعلى حيث +// إستدعيناه من Student. +Student.prototype = Object.create(Person.prototype); // See note below + +// وضع الخاصية "constructor" للإشارة إلى Student +Student.prototype.constructor = Student; + +// إستبدال الطريقة "sayHello" +Student.prototype.sayHello = function(){ + console.log("مرحبا، أنا " + this.firstName + ". أنا أدرس " + + this.subject + "."); +}; + +// إضافة الطريقة "sayGoodBye" +Student.prototype.sayGoodBye = function(){ + console.log("وداعا!"); +}; + +// إستعمال المثال: +var student1 = new Student("سفيان", "المناجم"); +student1.sayHello(); // "مرحبا، أنا سفيان. أنا أدرس المناجم." +student1.walk(); // "أنا أتمشى!" +student1.sayGoodBye(); // "وداعا!" + +// التحقق من أن instanceof يعمل بشكل صحيح +console.log(student1 instanceof Person); // true +console.log(student1 instanceof Student); // true +</pre> + +<p>فيما يخص السطر ;(<code>Student.prototype = Object.create(Person.prototype</code> في الإصدارات القديمة من جافا سكريبت والتي لا تدعم <code>Object.create</code> يمكن إما استخدام بعض الحيل في خداع المتصفحات –هذه الخدع معروفة إما بالاسم polyfill أو shim—أو استخدام دالة تحقق نفس النتيجة كما في المثال التالي:</p> + +<pre class="brush: js" dir="rtl">function createObject(proto) { + function ctor() { } + ctor.prototype = proto; + return new ctor(); +} + +// الإستعمال: +Student.prototype = createObject(Person.prototype); +</pre> + +<div class="note"><strong>ملاحظة:</strong> أنظر <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create" title="Object.create">Object.create</a> للمزيد من المعلومات حول ما يقوم به, و الرقاقات للمحركات القديمة.</div> + +<p>التأكّد من أن <code>this</code> تُشير إلى الكائن المطلوب بغض النظر عن كيف للكائن أن يُستهل يمكن أن يكون صعبًا، ومع ذلك يوجد صياغة أبسط من شأنها أن تسهّل الأمر.</p> + +<pre class="brush: js" dir="rtl">var Person = function(firstName) { + if (this instanceof Person) { + this.firstName = firstName; + } else { + return new Person(firstName); + } +} +</pre> + +<h4 id="التغليف_Encapsulation">التغليف Encapsulation</h4> + +<p>ليس بالضرورة أن يعلم الصنف <code>Student</code> كيف تمّ تنفيذ/تعريف الطريقة ()<code>walk</code> للصنف <code>Person</code> لكي يستطيع استخدام تلك الطريقة، ولا يحتاج الصنف <code>Student</code> إلى تعريف تلك الطريقة صراحةً إلا إذا كان المطلوب التعديل عليها، ويُطلق على هذا الإجراء مفهوم التغليف encapsulation، والذي فيه يَحزم كل صنف البيانات والطُرق methods داخل وحدة/كينونة وحيدة.</p> + +<p>إخفاء المعلومات سمة شائعة في باقي اللغات البرمجية وعادةً ما توجد كخاصيات/كطُرق إما بالاسم<code>private</code> أو <code>protected</code>، وعلى الرغم من أنه يُمكن مماثلة/محاكاة ذات الأمر في جافا سكريبت، إلا أن هذا الأمر ليس مطلبًا من متطلبات البرمجة الكائنية.</p> + +<h4 id="التجريد_Abstraction">التجريد Abstraction</h4> + +<p>التجرير ما هو إلا ميكانيكية تسمح للمطوّر في تجسيد جانب من المشكلة التي يُعمل عليها، إما من خلال الوراثة inheritance (التخصيص specialization) أو التركيب composition، وتُحقق جافا سكريبت التخصيص من خلال الوراثة، والتركيب من خلال السماح لحالات/أمثولات الصنف لتكون قيمًا لخاصيات attributes الكائنات الأخرى.</p> + +<p>الصنف Function في جافا سكريبت يرث من الصنف <code>Object</code> (وهذا يوضّح التخصيص في هذا النموذج) والخاصية <code>Function.prototype</code> ما هي إلا حالة/أمثولة من الصنف <code>Object</code> (وهذا يوضّح جزئية التركيب composition).</p> + +<pre class="brush: js" dir="rtl">var foo = function () {}; + +// النتيجة ==> "foo عبارة عن وظيفة: true" +console.log('foo عبارة عن وظيفة: ' + (foo instanceof Function)); + +// النتيجة ==> "foo.prototype عبارة عن كائن: true" +console.log('foo.prototype عبارة عن كائن: ' + (foo.prototype instanceof Object));</pre> + +<h4 id="تعددية_الأشكال_Polymorphism">تعددية الأشكال Polymorphism</h4> + +<p>كما أن جميع الطُرق methods والخاصيات properties معرّفة ضمن الخاصية prototype، فيُمكن لبقية الأصناف أن تُعرِّف طُرقًا methods بنفس الاسم، وستكون الطُرق في نطاق الصنف الذي عُرفت به، إلا إذا كان الصنفان على علاقة من نوع أب وابن parent-child، بمعنى آخر أحد الصنفان يرث من الآخر<br> + <br> + هذه المقالة تُرجمة الي العربية بواسطة : <a href="https://academy.hsoub.com/profile/12-%D9%85%D8%AD%D9%85%D8%AF-%D8%A3%D8%A8%D8%B1%D8%B5/" id="ips_uid_2904_3" title="الذّهاب إلى الملف الشّخصي لعضو : محمد أبرص">محمد أبرص</a></p> + +<h2 id="ملاحظات">ملاحظات</h2> + +<p>هذه ليست الطرق الوحيدة التي يمكنك من خلالها تنفيذ البرمجة الشيئية في جافا سكريبت ، والتي تعد مرنة للغاية في هذا الصدد. وبالمثل ، فإن التقنيات الموضحة هنا لا تستخدم أي لغة خارقة ، ولا تحاكي تطبيقات اللغات الأخرى لنظرية الكائن.</p> + +<p>هناك تقنيات أخرى تجعل البرمجة الكائنية التوجه أكثر تقدما لكنها خارج نطاق الهذه المقالة التمهيدية.</p> +</div> + +<h2 id="المراجع">المراجع</h2> + +<ol> + <li><a href="https://ar.wikipedia.org/wiki/Object-oriented_programming" id="cite-1">ويكيبيديا - البرمجة الكائنية التوجه</a></li> + <li><a href="https://en.wikipedia.org/wiki/Prototype-based_programming" id="cite-2">ويكيبيديا - البرمجة القائمة على النوذج</a></li> + <li><a href="http://en.wikipedia.org/wiki/Encapsulation_%28object-oriented_programming%29" id="cite-3">ويكيبيديا - التغليف (البرمجة الكائنية التوجه</a><a href="http://ar.wikipedia.org/wiki/Encapsulation_%28object-oriented_programming%29">)</a></li> +</ol> + +<h2 id="أنظر_أيضا">أنظر أيضا</h2> + +<ul> + <li dir="ltr">{{jsxref("Function.prototype.call()")}}</li> + <li dir="ltr">{{jsxref("Function.prototype.apply()")}}</li> + <li dir="ltr">{{jsxref("Object.create()")}}</li> + <li dir="ltr"><a dir="rtl" href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">الوضع الصارم</a></li> +</ul> 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 +--- +<div>{{jsSidebar("Classes")}}</div> + +<p dir="rtl">الـ <code>constructor</code> هي ميثود خاصة لإنشاء وتهيئة الاوبجكت(كائن) داخل (فئة)<code>class</code>.</p> + +<div>{{EmbedInteractiveExample("pages/js/classes-constructor.html")}}</div> + + + +<h2 dir="rtl" id="بناء_الجملة">بناء الجملة</h2> + +<pre class="syntaxbox">constructor([arguments]) { ... }</pre> + +<h2 dir="rtl" id="الوصف">الوصف</h2> + +<p dir="rtl">يمكننا إستخدام تلك الميثود لمرة واحده فقط ، وفي حال إستخدمنا <code>constructor</code> ﻷكثر من مرة في نفس الفئة الـ class سيحدث {{jsxref("SyntaxError")}} إيرور .</p> + +<p>A constructor can use the <code>super</code> keyword to call the constructor of a parent class.</p> + +<p dir="rtl">إذا لم تحدد ميثود إنشاء سيتم تحديد منشئ بشكل تلقائي.</p> + +<p><br> + <sup>If you do not specify a constructor method, a default constructor is used.</sup></p> + +<h2 dir="rtl" id="أمثلة">أمثلة</h2> + +<h3 dir="rtl" id="إٍستخدام_الميثود_(اسلوب)_الـconstructor">إٍستخدام الميثود (اسلوب) الـ<code>constructor </code></h3> + +<p dir="rtl">ذلك الكود تم أخذه ولصقة من <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">classes sample</a> (<a href="https://googlechrome.github.io/samples/classes-es6/index.html">live demo</a>)</p> + +<pre class="brush: js">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; + } +}</pre> + +<h3 dir="rtl" id="مثال_آخر">مثال آخر</h3> + +<p dir="rtl">إنظر إلى ذلك الكود</p> + +<pre class="brush: js">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</pre> + +<p dir="rtl">هنا البروتوتيب فئة الـ <strong>Square</strong> تغيرت ولكن الكونستركتور (المنشئ) مبني على فئة الـ<strong>Polygon </strong>والتي تطلب عندما نقوم بإنشاء حالة مماثلة للـ <strong>Square </strong>مرة أخرى</p> + +<h3 dir="rtl" id="الإنشاء_الإفتراضي">الإنشاء الإفتراضي</h3> + +<p dir="rtl">ذكرنا سابقا أنه في حال عدم تحديدك لكونستركتور (منشئ) سيتم تحديد الكونستركتور بشكل إفتراضي ، وبالنسبة للكلاسز (الفئات) الاولية يكون الكونستركتور الخاص بها كما يلي :-</p> + +<pre class="brush: js">constructor() {} +</pre> + +<p dir="rtl">أما الفئات المشتقة فتكون بالشكل التالي</p> + +<pre class="brush: js">constructor(...args) { + super(...args); +}</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-static-semantics-constructormethod', 'Constructor Method')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-static-semantics-constructormethod', 'Constructor Method')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="دعم_المتصفحات">دعم المتصفحات</h2> + + + +<p>{{Compat("javascript.classes.constructor")}}</p> + +<h2 id="أنظر_أيضا">أنظر أيضا</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super()</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/class"><code>class</code> declaration</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li> +</ul> 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 +--- +<div>{{JsSidebar("Classes")}}</div> + +<p>JavaScript classes, introduced in ECMAScript 2015, are primarily syntactical sugar over JavaScript's existing prototype-based inheritance. The class syntax <strong>does not</strong> introduce a new object-oriented inheritance model to JavaScript.</p> + +<h2 id="Defining_classes">Defining classes</h2> + +<p>Classes are in fact "special <a href="/en-US/docs/Web/JavaScript/Reference/Functions">functions</a>", and just as you can define <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">function expressions</a> and <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">function declarations</a>, the class syntax has two components: <a href="/en-US/docs/Web/JavaScript/Reference/Operators/class">class expressions</a> and <a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">class declarations</a>.</p> + +<h3 id="Class_declarations">Class declarations</h3> + +<p>One way to define a class is using a <strong>class declaration</strong>. To declare a class, you use the <code>class</code> keyword with the name of the class ("Rectangle" here).</p> + +<pre class="brush: js">class Rectangle { + constructor(height, width) { + this.height = height; + this.width = width; + } +}</pre> + +<h4 id="Hoisting">Hoisting</h4> + +<p>An important difference between <strong>function declarations</strong> and <strong>class declarations</strong> 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")}}:</p> + +<pre class="brush: js example-bad">var p = new Rectangle(); // ReferenceError + +class Rectangle {} +</pre> + +<h3 id="Class_expressions">Class expressions</h3> + +<p>A <strong>class expression</strong> 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) <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name">.name</a> property, though)</p> + +<pre class="brush: js">// 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" +</pre> + +<p><strong>Note:</strong> Class <strong>expressions</strong> also suffer from the same hoisting issues mentioned for Class <strong>declarations</strong>.</p> + +<h2 id="Class_body_and_method_definitions">Class body and method definitions</h2> + +<p>The body of a class is the part that is in curly brackets <code>{}</code>. This is where you define class members, such as methods or constructor.</p> + +<h3 id="Strict_mode">Strict mode</h3> + +<p>The bodies of <em>class declarations</em> and <em>class expressions</em> are executed in <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a> i.e. constructor, static and prototype methods, getter and setter functions are executed in strict mode.</p> + +<h3 id="Constructor">Constructor</h3> + +<p>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/constructor">constructor</a></code> method is a special method for creating and initializing an object created with a <code>class</code>. 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 <code>constructor</code> method.</p> + +<p>A constructor can use the <code>super</code> keyword to call the constructor of the super class.</p> + +<h3 id="Prototype_methods">Prototype methods</h3> + +<p>See also <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">method definitions</a>.</p> + +<pre class="brush: js">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</pre> + +<h3 id="Static_methods">Static methods</h3> + +<p>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/static">static</a></code> keyword defines a static method for a class. Static methods are called without <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript#The_object_(class_instance)" title='An example of class instance is "var john = new Person();"'>instantiating </a>their class and <strong>cannot </strong>be called through a class instance. Static methods are often used to create utility functions for an application.</p> + +<pre class="brush: js">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</pre> + +<h3 id="Boxing_with_prototype_and_static_methods">Boxing with prototype and static methods</h3> + +<p>When a static or prototype method is called without a value for <em>this</em>, the <em>this</em> value will be <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.498039);">undefined</span></font> inside the method. This behavior will be the same even if the <code>"use strict"</code> directive isn't present, because code within the <code>class</code> syntax is always executed in strict mode.</p> + +<pre class="brush: js">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</pre> + +<p>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 <em>this</em> value. If the inital value is <code>undefined</code>, <em>this</em> will be set to the global object.</p> + +<p>Autoboxing will not happen in strict mode, the <em>this</em> value remains as passed.</p> + +<pre class="brush: js">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 +</pre> + +<h3 id="Instance_properties">Instance properties</h3> + +<p>Instance properties must be defined inside of class methods:</p> + +<pre class="brush: js">class Rectangle { + constructor(height, width) { + this.height = height; + this.width = width; + } +}</pre> + +<p>Static class-side properties and prototype data properties must be defined outside of the ClassBody declaration:</p> + +<pre class="brush: js">Rectangle.staticWidth = 20; +Rectangle.prototype.prototypeWidth = 25; +</pre> + +<p> </p> + +<h2 id="Sub_classing_with_extends">Sub classing with <code>extends</code></h2> + +<p>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/extends">extends</a></code> keyword is used in <em>class declarations</em> or <em>class expressions</em> to create a class as a child of another class.</p> + +<pre class="brush: js">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. +</pre> + +<p>If there is a constructor present in subclass, it needs to first call super() before using "this".</p> + +<p>One may also extend traditional function-based "classes":</p> + +<pre class="brush: js">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. +</pre> + +<p>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()")}}:</p> + +<pre class="brush: js">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. +</pre> + +<h2 id="Species">Species</h2> + +<p>You might want to return {{jsxref("Array")}} objects in your derived array class <code>MyArray</code>. The species pattern lets you override default constructors.</p> + +<p>For example, when using methods such as {{jsxref("Array.map", "map()")}} that returns the default constructor, you want these methods to return a parent <code>Array</code> object, instead of the <code>MyArray</code> object. The {{jsxref("Symbol.species")}} symbol lets you do this:</p> + +<pre class="brush: js">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 +</pre> + +<h2 id="Super_class_calls_with_super">Super class calls with <code>super</code></h2> + +<p>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super</a></code> keyword is used to call corresponding methods of super class.</p> + +<pre class="brush: js">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. + +</pre> + +<h2 id="Mix-ins">Mix-ins</h2> + +<p>Abstract subclasses or <em>mix-ins</em> 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.</p> + +<p>A function with a superclass as input and a subclass extending that superclass as output can be used to implement mix-ins in ECMAScript:</p> + +<pre class="brush: js">var calculatorMixin = Base => class extends Base { + calc() { } +}; + +var randomizerMixin = Base => class extends Base { + randomize() { } +}; +</pre> + +<p>A class that uses these mix-ins can then be written like this:</p> + +<pre class="brush: js">class Foo { } +class Bar extends calculatorMixin(randomizerMixin(Foo)) { }</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES2016', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ES2016')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES2017', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ES2017')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.classes")}}</p> + +<h2 id="Running_in_Scratchpad">Running in Scratchpad</h2> + +<p>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>.</p> + +<p>To re-run a definition, use Scratchpad's menu Execute > Reload and Run.<br> + Please vote for bug <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1428672">#1428672</a>.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions">Functions</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/class"><code>class</code> declaration</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li> + <li>{{jsxref("Operators/super", "super")}}</li> + <li><a href="https://hacks.mozilla.org/2015/07/es6-in-depth-classes/">Blog post: "ES6 In Depth: Classes"</a></li> + <li><a href="https://github.com/tc39/proposal-class-fields">Fields and public/private class properties proposal (stage 3)</a></li> +</ul> 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 +--- +<p>{{jsSidebar("Errors")}}</p> + +<p>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 <code>name</code> and a <code>message</code>.</p> + +<p>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.</p> + +<h2 id="List_of_errors">List of errors</h2> + +<p>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!</p> + +<p>{{ListSubPages("/en-US/docs/Web/JavaScript/Reference/Errors")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a>: Beginner's introductory tutorial on fixing JavaScript errors.</li> +</ul> 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 +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="الرسالة">الرسالة</h2> + +<pre class="syntaxbox">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 +</pre> + +<h2 id="نوع_الخطأ">نوع الخطأ</h2> + +<p>{{jsxref("TypeError")}}.</p> + +<h2 id="ماذا_حصل؟"> ماذا حصل؟</h2> + +<p>خطأ غير متوقع، يحدث كثيرا مع {{jsxref("undefined")}} أو قيم {{jsxref("null")}} .</p> + +<p>أيضا في بعض الوضائف مثل {{jsxref("Object.create()")}} أو {{jsxref("Symbol.keyFor()")}}, تحتاج تقديد أنواع محددة.</p> + +<h2 id="أمثلة">أمثلة</h2> + +<h3 id="حالات_غير_صحيحة">حالات غير صحيحة</h3> + +<pre class="brush: js example-bad">// 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 +</pre> + +<h3 class="highlight-spanned" id="حل_المشكلة"><span class="highlight-span"><span class="notranslate">حل المشكلة</span> </span></h3> + +<p><span class="notranslate">لإصلاح مؤشر null إلى قيم <code>undefined</code> أو <code>null</code> ، يمكنك استخدام عامل التشغيل <a href="https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=ar&ie=UTF8&prev=_t&rurl=translate.google.com&sl=auto&sp=nmt4&tl=ar&u=https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof&xid=17259,1500002,15700002,15700021,15700124,15700149,15700186,15700190,15700201,15700214&usg=ALkJrhh23enjQBtOCeYxpsucdSXvqqK0dg">typeof</a> ، على سبيل المثال.</span></p> + +<pre class="brush: js">if (typeof foo !== 'undefined') { + // الآن نعلم أن القيمة المدخلة غير محددة، نستطيع القيام بأي إجراء بدون خطأ. +}</pre> + +<h2 id="شاهد_أيضاً">شاهد أيضاً</h2> + +<ul> + <li>{{jsxref("undefined")}}</li> + <li>{{jsxref("null")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<div dir="rtl">كائن <strong>Array</strong> في جافاسكربت هو كائن عام، يستخدم في إنشاء المصفوفات، وهي تشبه قائمة من الكائنات عالية المستوى.</div> + +<div dir="rtl"> </div> + +<p dir="rtl"><strong>إنشاء مصفوفة</strong></p> + +<pre class="brush: js">var fruits = ["Apple", "Banana"]; + +console.log(fruits.length); +// 2 +</pre> + +<p dir="rtl"><strong>الوصول إلى عنصر محدد في المصفوفة</strong></p> + +<pre class="brush: js">var first = fruits[0]; +// Apple + +var last = fruits[fruits.length - 1]; +// Banana +</pre> + +<p dir="rtl"><strong>تنفيذ حلقة تكرار على مصفوفة</strong></p> + +<pre class="brush: js">fruits.forEach(function (item, index, array) { + console.log(item, index); +}); +// Apple 0 +// Banana 1 +</pre> + +<p dir="rtl"><strong>إلحاق عنصر بآخر المصفوفة</strong></p> + +<pre class="brush: js">var newLength = fruits.push("Orange"); +// ["Apple", "Banana", "Orange"] +</pre> + +<p dir="rtl"><strong>حذف عنصر من نهاية المصفوفة</strong></p> + +<pre class="brush: js">var last = fruits.pop(); // remove Orange (from the end) +// ["Apple", "Banana"]; +</pre> + +<p dir="rtl"><strong>حذف عنصر من بداية المصفوفة</strong></p> + +<pre class="brush: js">var first = fruits.shift(); // remove Apple from the front +// ["Banana"]; +</pre> + +<p dir="rtl"><strong>إضافة عنصر إلى بداية المصفوفة</strong></p> + +<pre class="brush: js">var newLength = fruits.unshift("Strawberry") // add to the front +// ["Strawberry", "Banana"]; +</pre> + +<p dir="rtl"><strong>الوصول إلى ترتيب عنصر معينة في المصفوفة</strong></p> + +<pre class="brush: js">fruits.push("Mango"); +// ["Strawberry", "Banana", "Mango"] + +var pos = fruits.indexOf("Banana"); +// 1 +</pre> + +<p dir="rtl"><strong>حذف عنصر عن طريق ترتيبه في المصفوفة</strong></p> + +<pre class="brush: js">var removedItem = fruits.splice(pos, 1); // this is how to remove an item +// ["Strawberry", "Mango"] +</pre> + +<p dir="rtl"><strong>نسخة مصفوفة</strong></p> + +<pre class="brush: js">var shallowCopy = fruits.slice(); // this is how to make a copy +// ["Strawberry", "Mango"] +</pre> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>[<var>element0</var>, <var>element1</var>, ..., <var>elementN</var>] +new Array(<var>element0</var>, <var>element1</var>[, ...[, <var>elementN</var>]]) +new Array(<var>arrayLength</var>)</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>element<em>N</em></code></dt> + <dd>A JavaScript array is initialized with the given elements, except in the case where a single argument is passed to the <code>Array</code> 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 <code>Array</code> constructor, not array literals created with the bracket syntax.</dd> + <dt><code>arrayLength</code></dt> + <dd>If the only argument passed to the <code>Array</code> constructor is an integer between 0 and 2<sup>32</sup>-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.</dd> +</dl> + +<h2 dir="rtl" id="الوصف">الوصف</h2> + +<p>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.</p> + +<p>Some people think that <a class="external" href="http://www.andrewdupont.net/2006/05/18/javascript-associative-arrays-considered-harmful/">you shouldn't use an array as an associative array</a>. In any case, you can use plain {{jsxref("Global_Objects/Object", "objects")}} instead, although doing so comes with its own caveats. See the post <a class="external" href="http://www.less-broken.com/blog/2010/12/lightweight-javascript-dictionaries.html">Lightweight JavaScript dictionaries with arbitrary keys</a> as an example.</p> + +<h3 dir="rtl" id="الوصول_إلى_عناصر_المصفوفة">الوصول إلى عناصر المصفوفة</h3> + +<p>JavaScript arrays are zero-indexed: the first element of an array is at index <code>0</code>, and the last element is at the index equal to the value of the array's {{jsxref("Array.length", "length")}} property minus 1.</p> + +<pre class="brush: js">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' +</pre> + +<p>Array elements are object properties in the same way that <code>toString</code> 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:</p> + +<pre class="brush: js">console.log(arr.0); // a syntax error +</pre> + +<p>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 <code>'3d'</code>, it can only be referenced using bracket notation. E.g.:</p> + +<pre class="brush: js">var years = [1950, 1960, 1970, 1980, 1990, 2000, 2010]; +console.log(years.0); // a syntax error +console.log(years[0]); // works properly +</pre> + +<pre class="brush: js">renderer.3d.setTexture(model, 'character.png'); // a syntax error +renderer['3d'].setTexture(model, 'character.png'); // works properly +</pre> + +<p>Note that in the <code>3d</code> example, <code>'3d'</code> had to be quoted. It's possible to quote the JavaScript array indexes as well (e.g., <code>years['2']</code> instead of <code>years[2]</code>), although it's not necessary. The 2 in <code>years[2]</code> is coerced into a string by the JavaScript engine through an implicit <code>toString</code> conversion. It is for this reason that <code>'2'</code> and <code>'02'</code> would refer to two different slots on the <code>years</code> object and the following example could be <code>true</code>:</p> + +<pre class="brush: js">console.log(years['2'] != years['02']); +</pre> + +<p>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):</p> + +<pre class="brush: js">var promise = { + 'var' : 'text', + 'array': [1, 2, 3, 4] +}; + +console.log(promise['array']); +</pre> + +<h3 id="Relationship_between_length_and_numerical_properties">Relationship between <code>length</code> and numerical properties</h3> + +<p>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.</p> + +<pre class="brush: js">var fruits = []; +fruits.push('banana', 'apple', 'peach'); + +console.log(fruits.length); // 3 +</pre> + +<p>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:</p> + +<pre class="brush: js">fruits[5] = 'mango'; +console.log(fruits[5]); // 'mango' +console.log(Object.keys(fruits)); // ['0', '1', '2', '5'] +console.log(fruits.length); // 6 +</pre> + +<p>Increasing the {{jsxref("Array.length", "length")}}.</p> + +<pre class="brush: js">fruits.length = 10; +console.log(Object.keys(fruits)); // ['0', '1', '2', '5'] +console.log(fruits.length); // 10 +</pre> + +<p>Decreasing the {{jsxref("Array.length", "length")}} property does, however, delete elements.</p> + +<pre class="brush: js">fruits.length = 2; +console.log(Object.keys(fruits)); // ['0', '1'] +console.log(fruits.length); // 2 +</pre> + +<p>This is explained further on the {{jsxref("Array.length")}} page.</p> + +<h3 id="Creating_an_array_using_the_result_of_a_match">Creating an array using the result of a match</h3> + +<p>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:</p> + +<pre class="brush: js">// 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'); +</pre> + +<p>The properties and elements returned from this match are as follows:</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td class="header">Property/Element</td> + <td class="header">Description</td> + <td class="header">Example</td> + </tr> + <tr> + <td><code>input</code></td> + <td>A read-only property that reflects the original string against which the regular expression was matched.</td> + <td>cdbBdbsbz</td> + </tr> + <tr> + <td><code>index</code></td> + <td>A read-only property that is the zero-based index of the match in the string.</td> + <td>1</td> + </tr> + <tr> + <td><code>[0]</code></td> + <td>A read-only element that specifies the last matched characters.</td> + <td>dbBd</td> + </tr> + <tr> + <td><code>[1], ...[n]</code></td> + <td>Read-only elements that specify the parenthesized substring matches, if included in the regular expression. The number of possible parenthesized substrings is unlimited.</td> + <td>[1]: bB<br> + [2]: d</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="الخصائص">الخصائص</h2> + +<dl> + <dt><code>Array.length</code></dt> + <dd>The <code>Array</code> constructor's length property whose value is 1.</dd> + <dt>{{jsxref("Array.@@species", "get Array[@@species]")}}</dt> + <dd>The constructor function that is used to create derived objects.</dd> + <dt>{{jsxref("Array.prototype")}}</dt> + <dd>Allows the addition of properties to all array objects.</dd> +</dl> + +<h2 dir="rtl" id="الدوال">الدوال</h2> + +<dl> + <dt>{{jsxref("Array.from()")}}</dt> + <dd>Creates a new <code>Array</code> instance from an array-like or iterable object.</dd> + <dt>{{jsxref("Array.isArray()")}}</dt> + <dd>Returns true if a variable is an array, if not false.</dd> + <dt>{{jsxref("Array.of()")}}</dt> + <dd>Creates a new <code>Array</code> instance with a variable number of arguments, regardless of number or type of the arguments.</dd> +</dl> + +<h2 id="Array_instances"><code>Array</code> instances</h2> + +<p>All <code>Array</code> instances inherit from {{jsxref("Array.prototype")}}. The prototype object of the <code>Array</code> constructor can be modified to affect all <code>Array</code> instances.</p> + +<h3 dir="rtl" id="الخصائص_2">الخصائص</h3> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Properties')}}</div> + +<h3 dir="rtl" id="الدوال_2">الدوال</h3> + +<h4 id="Mutator_methods">Mutator methods</h4> + +<div>{{page('en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Mutator_methods')}}</div> + +<h4 id="Accessor_methods">Accessor methods</h4> + +<div>{{page('en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Accessor_methods')}}</div> + +<h4 id="Iteration_methods">Iteration methods</h4> + +<div>{{page('en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Iteration_methods')}}</div> + +<h2 id="Array_generic_methods"><code>Array</code> generic methods</h2> + +<div class="warning"> +<p><strong>Array generics are non-standard, deprecated and will get removed near future</strong>. Note that you can not rely on them cross-browser. However, there is a <a href="https://github.com/plusdude/array-generics">shim available on GitHub</a>.</p> +</div> + +<p>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 <var>str</var> is a letter, you would write:</p> + +<pre class="brush: js">function isLetter(character) { + return character >= 'a' && character <= 'z'; +} + +if (Array.prototype.every.call(str, isLetter)) { + console.log("The string '" + str + "' contains only letters!"); +} +</pre> + +<p>This notation is rather wasteful and JavaScript 1.6 introduced a generic shorthand:</p> + +<pre class="brush: js">if (Array.every(str, isLetter)) { + console.log("The string '" + str + "' contains only letters!"); +} +</pre> + +<p>{{jsxref("Global_Objects/String", "Generics", "#String_generic_methods", 1)}} are also available on {{jsxref("String")}}.</p> + +<p>These are <strong>not</strong> 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:</p> + +<pre class="brush: js">// 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]); + } +}()); +</pre> + +<h2 dir="rtl" id="أمثلة">أمثلة</h2> + +<h3 dir="rtl" id="إنشاء_مصفوفة">إنشاء مصفوفة</h3> + +<p>The following example creates an array, <code>msgArray</code>, with a length of 0, then assigns values to <code>msgArray[0]</code> and <code>msgArray[99]</code>, changing the length of the array to 100.</p> + +<pre class="brush: js">var msgArray = []; +msgArray[0] = 'Hello'; +msgArray[99] = 'world'; + +if (msgArray.length === 100) { + console.log('The length is 100.'); +} +</pre> + +<h3 dir="rtl" id="إنشاء_مصفوفة_ذات_بعدين">إنشاء مصفوفة ذات بعدين</h3> + +<p>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.</p> + +<pre class="brush: js">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')); +</pre> + +<p dir="rtl">هذه هي النتيجة (الخرج):</p> + +<pre class="eval">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 +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4', 'Array')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>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")}}</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array-objects', 'Array')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>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")}}</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array-objects', 'Array')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>New method added: {{jsxref("Array.prototype.includes()")}}</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="التوافق_مع_المتصفحات">التوافق مع المتصفحات</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 dir="rtl" id="إقرأ_أيضا">إقرأ أيضا</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Indexing_object_properties">JavaScript Guide: “Indexing object properties”</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Predefined_Core_Objects#Array_Object">JavaScript Guide: “Predefined Core Objects: <code>Array</code> Object”</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Array_comprehensions">Array comprehensions</a></li> + <li><a href="https://github.com/plusdude/array-generics">Polyfill for JavaScript 1.8.5 Array Generics and ECMAScript 5 Array Extras</a></li> + <li><a href="/en-US/docs/JavaScript_typed_arrays">Typed Arrays</a></li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p dir="rtl"><code><strong>()Array.isArray</strong></code> تفحص القيمة التي تم تمريرها هل هي {{jsxref("Array")}} أم ﻻ.</p> + +<h2 dir="rtl" id="بنية_الجملة">بنية الجملة</h2> + +<pre class="syntaxbox"><code>Array.isArray(<em>value</em>)</code></pre> + +<h3 dir="rtl" id="المعلمات">المعلمات</h3> + +<dl> + <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">value</span></font></dt> + <dd dir="rtl">القيمة التي سيتم فحصها.</dd> +</dl> + +<h3 dir="rtl" id="القيمة_العائدة">القيمة العائدة</h3> + +<p dir="rtl">تكون القيمة العائدة <code>true</code> إذا كانت {{jsxref("Array")}}؛ وتكون <code>false</code> إذا كانت غير ذلك.</p> + +<h2 dir="rtl" id="الوصف">الوصف</h2> + +<p dir="rtl">إذا كانت القيمة {{jsxref("Array")}}, <code>true</code> ستكون القيمة العائدة؛ غير ذلك ستكون <code>false</code>.</p> + +<p dir="rtl"><span style="line-height: 1.5;">لمزيد من التفاصيل، راجع هذا المقال </span><a href="http://web.mit.edu/jwalden/www/isArray.html" style="line-height: 1.5;">“Determining with absolute accuracy whether or not a JavaScript object is an array”</a><span style="line-height: 1.5;"> .</span></p> + +<h2 dir="rtl" id="أمثلة">أمثلة</h2> + +<pre class="brush: js">//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 }); +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Running the following code before any other code will create <code>Array.isArray()</code> if it's not natively available.</p> + +<pre class="brush: js">if (!Array.isArray) { + Array.isArray = function(arg) { + return Object.prototype.toString.call(arg) === '[object Array]'; + }; +} +</pre> + +<h2 dir="rtl" id="المواصفات">المواصفات</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.3.2', 'Array.isArray')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.isarray', 'Array.isArray')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.isarray', 'Array.isArray')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="التكامل_مع_المتصفحات">التكامل مع المتصفحات</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("5")}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatOpera("10.5")}}</td> + <td>{{CompatSafari("5")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 dir="rtl" id="إقرأ_أيضا">إقرأ أيضا</h2> + +<ul> + <li>{{jsxref("Array")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p dir="rtl">دالة <code><strong>()join </strong></code>تقوم بدمج جميع عناصر المصفوفة في نص واحد.</p> + +<pre class="brush: js">var a = ['Wind', 'Rain', 'Fire']; +a.join(); // 'Wind,Rain,Fire' +a.join('-'); // 'Wind-Rain-Fire'</pre> + +<h2 dir="rtl" id="صيغة_الكتابة">صيغة الكتابة</h2> + +<pre class="syntaxbox" dir="rtl"><code><var>str</var> = <var>arr</var>.join([<var>separator</var> = ','])</code></pre> + +<h3 id="المعاملات">المعاملات</h3> + +<dl> + <dt><code>separator</code></dt> + <dd dir="rtl">اختياري. يحدد النص الذي سيقوم بفصل عناصر المصفوفة عن بعضهم البعض. الـ <strong>separator</strong> سيتحول إلى جزء من النص الناتج. إذا لم يتم تمريره، سيتم الفصل بين عناصر المصفوفة بالـ comma. إذا كان الـ<strong>separator</strong> عبارة عن نص فارغ، سيتم ضم عناصر المصفوفة دون أي فاصل</dd> +</dl> + +<h3 dir="rtl" id="القيمة_العائدة">القيمة العائدة</h3> + +<p dir="rtl">عناصر المصفوفة مضمومين في هيئة نص.</p> + +<h2 dir="rtl" id="الوصف">الوصف</h2> + +<p dir="rtl">تقوم بدمج عناصر المصفوفة في هيئة نص، إذا كان أحد هذه العناصر قيمة فارغة أو غير معرف سيتم تحويله إلى نص فارغ.</p> + +<h2 dir="rtl" id="أمثلة">أمثلة</h2> + +<h3 dir="rtl" id="ضم_عناصر_المصفوفة_بأربعة_طرق_مختلفة">ضم عناصر المصفوفة بأربعة طرق مختلفة</h3> + +<p dir="rtl">المثال التالي يقوم بإنشاء مصفوفة a ، بها ثلاثة عناصر، ثم يقوم بضم هذه العناصر الثلاثة، ثم يقوم بضم هذه العناصر الثلاثة إلى نص واحد بأربعة طرق: استخدام الـ separator الإفتراضي، ثم باستخدام الـ comma والمسافة، ثم باستخدام علامة الجمع وأخيرا باستخدام نص فارغ.</p> + +<pre class="brush: js">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' تسند +</pre> + +<h2 dir="rtl" id="المواصفات">المواصفات</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">الصفة</th> + <th dir="rtl" scope="col">الحالة</th> + <th scope="col">تعليق</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.5', 'Array.prototype.join')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.join', 'Array.prototype.join')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.join', 'Array.prototype.join')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="التكامل_مع_المتصفحات">التكامل مع المتصفحات</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("1.0")}}</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>{{CompatIE("5.5")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 dir="rtl" id="إقرأ_أيضا">إقرأ أيضا</h2> + +<ul> + <li>{{jsxref("String.prototype.split()")}}</li> + <li>{{jsxref("Array.prototype.toString()")}}</li> + <li>{{jsxref("TypedArray.prototype.join()")}}</li> +</ul> 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 +--- +<div dir="rtl">{{JSRef}}<br> + دالة <code><strong>pop() </strong></code>هي دالة تقوم بمسح أخر عنصر من المصفوفة وإرجاعه</div> + +<div dir="rtl"> </div> + +<h2 dir="rtl" id="Syntax">Syntax</h2> + +<pre class="syntaxbox" dir="rtl"><var>arr</var>.pop()</pre> + +<h3 dir="rtl" id="قيمة_الإرجاع">قيمة الإرجاع</h3> + +<p dir="rtl">تعيد أخر عنصر من المصفوفة و تعيد {{jsxref("undefined")}} في حال كانت المصفوفة فارغة</p> + +<h2 dir="rtl" id="وصف">وصف</h2> + +<p dir="rtl"> دالة POP هي دالة تقوم بمسح أخر عنصر من المصفوفة وإرجاع تلك القيمة إلى الطالب </p> + +<p dir="rtl"><code>pop</code> 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 <code>length</code> property reflecting the last in a series of consecutive, zero-based numerical properties may not behave in any meaningful manner.</p> + +<p dir="rtl"> في حالة استدعائك لدالة POP على مصفوفة فارغة فسيتم إرجاع {{jsxref("undefined")}} </p> + +<h2 dir="rtl" id="أمثلة">أمثلة</h2> + +<h3 dir="rtl" id="إزالة_العنصر_الأخير_من_المصفوفة">إزالة العنصر الأخير من المصفوفة</h3> + +<p dir="rtl">التعليمة البرمجية التالية : تقوم بإنشاء مصفوفة(<code>myFish</code> ) تحتوي على أربعة عناصر ثم تقوم بمسح أخر عنصر </p> + +<pre class="brush: js" dir="rtl">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'</pre> + +<h2 dir="rtl" id="مواصفات">مواصفات</h2> + +<table class="standard-table" dir="rtl"> + <tbody> + <tr> + <th scope="col">مواصفات</th> + <th scope="col">الحالة</th> + <th scope="col">تعليق</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.6', 'Array.prototype.pop')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.pop', 'Array.prototype.pop')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.pop', 'Array.prototype.pop')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="Browser_compatibility">Browser compatibility</h2> + +<div dir="rtl">{{CompatibilityTable}}</div> + +<div dir="rtl" id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("1.0")}}</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>{{CompatIE("5.5")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div dir="rtl" id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 dir="rtl" id="See_also">See also</h2> + +<ul> + <li dir="rtl">{{jsxref("Array.prototype.push()")}}</li> + <li dir="rtl">{{jsxref("Array.prototype.shift()")}}</li> + <li dir="rtl">{{jsxref("Array.prototype.unshift()")}}</li> + <li dir="rtl">{{jsxref("Array.prototype.splice()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p dir="rtl">دالة الـ <code><strong>()reverse</strong></code> تقوم بعكس ترتيبا عناصر المصفوفة مكانيا، بحيث يصبح العنصر الأول في المصفوفة في آخر المصفوفة، ويكون آخر عنصر فيها في أول المصفوفة.</p> + +<h2 dir="rtl" id="صيغة_الكتابة">صيغة الكتابة</h2> + +<pre class="syntaxbox"><code><var>arr</var>.reverse()</code></pre> + +<h3 dir="rtl" id="القيمة_العائدة">القيمة العائدة</h3> + +<p dir="rtl">المصفوفة المعكوسة.</p> + +<h2 dir="rtl" id="الوصف">الوصف</h2> + +<p>The <code>reverse</code> method transposes the elements of the calling array object in place, mutating the array, and returning a reference to the array.</p> + +<h2 dir="rtl" id="أمثلة">أمثلة</h2> + +<h3 dir="rtl" id="عكس_العناصر_في_مصفوفة">عكس العناصر في مصفوفة</h3> + +<p dir="rtl">المثال التالي يقوم بإنشاء مصفوفة myArray تحتوي على ثلاثة عناصر، ثم يوم بعكس المصفوفة.</p> + +<pre class="brush: js">var myArray = ['one', 'two', 'three']; +myArray.reverse(); + +console.log(myArray) // ['three', 'two', 'one'] +</pre> + +<h2 dir="rtl" id="المواصفات">المواصفات</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th dir="rtl" scope="col">المواصفة</th> + <th scope="col">الحالة</th> + <th scope="col">تعليق</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.8', 'Array.prototype.reverse')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="التكامل_مع_المتصفحات">التكامل مع المتصفحات</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("1.0")}}</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>{{CompatIE("5.5")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 dir="rtl" id="إقرأ_أيضا">إقرأ أيضا</h2> + +<ul> + <li>{{jsxref("Array.prototype.join()")}}</li> + <li>{{jsxref("Array.prototype.sort()")}}</li> + <li>{{jsxref("TypedArray.prototype.reverse()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p dir="rtl">ال <code><strong>slice()</strong></code> method إرجاع نسخة ضئيلة من جزء من مصفوفة إلى object مصفوفة جديد تم تحديده من <code>start</code> إلى <code>end</code> (<code>end</code> غير مضمنة) بينما <code>start</code> و <code>end</code> تمثلان مؤشر العناصر في هذه المصفوفة. لن يتم تعديل المصفوفة الأصلية.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-slice.html")}}</div> + +<p class="hidden">The source for this interactive demo is stored in a GitHub repository. If you'd like to contribute to the interactive demo project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p> + +<h2 dir="rtl" id="تركيب_الجملة">تركيب الجملة</h2> + +<pre class="syntaxbox notranslate"><var>arr</var>.slice([<var>start</var>[, <var>end</var>]]) +</pre> + +<h3 dir="rtl" id="المعاملات">المعاملات</h3> + +<dl> + <dt><code><var>start</var></code> {{optional_inline}}</dt> + <dd dir="rtl">مؤشر ذو أساس صفري يبدأ فيه الاستخراج.</dd> + <dd dir="rtl">يمكن استخدام مؤشر سلبي يشير إلى إزاحة من نهاية التسلسل. <code>slice(-2)</code> يستخرج آخر عنصرين في التسلسل.</dd> + <dd dir="rtl">إذا كانت <code><var>start</var></code> غير محددة, تبدأ<code>slice</code> من المؤشر <code>0</code>.</dd> + <dd dir="rtl">إذا كانت <code><var>start</var></code> is أكبر من نطاق فهرس التسلسل ، يتم إرجاع صفيف فارغ.</dd> + <dt><code><var>end</var></code> {{optional_inline}}</dt> + <dd dir="rtl">مؤشر ذو أساس صفري قبل أن ينتهي الاستخراج. <code>slice</code> مستخرجات إلى ولا تشمل <code><var>end</var></code>. على سبيل المثال, <code>slice(1,4)</code> يستخرج العنصر الثاني من خلال العنصر الرابع (العناصر المفهرسة 1 و 2 و 3).</dd> + <dd dir="rtl">يمكن استخدام مؤشر سلبي يشير إلى إزاحة من نهاية التسلسل. <code>slice(2,-1)</code> يستخرج العنصر الثالث من خلال العنصر الثاني إلى الأخير في التسلسل.</dd> + <dd dir="rtl">إذا تم حذف <code><var>end</var></code>, <code>slice</code> مستخرجات من خلال نهاية التسلسل(<code><var>arr</var>.length</code>).</dd> + <dd dir="rtl">اذا كانت <code><var>end</var></code> أكبر من طول التسلسل, فإن<code>slice</code> تستخرج حتى نهاية التسلسل(<code><var>arr</var>.length</code>).</dd> +</dl> + +<h3 id="القيمة_العائدة">القيمة العائدة</h3> + +<p dir="rtl">مصفوفة جديدة تحتوي على العناصر المستخرجة.</p> + +<h2 id="الوصف">الوصف</h2> + +<p dir="rtl"><code>slice</code> لا تغير المصفوفة الأصلية. تقوم بإرجاع نسخة ضئيلة من العناصر من المصفوفة الأصلية. يتم نسخ عناصر الصفيف الأصلي في الصفيف الذي تم إرجاعه كما يلي:</p> + +<ul> + <li dir="rtl">للreference Object(وليس الobject الفعلي) ،تقوم <code>slice</code> بنسخ reference object إلى المصفوفة الجديدة الجديد. يشير كل من المصفوفة الأصلية والجديدة إلى نفس ال object. إذا تغير reference Object ، تكون التغييرات مرئية لكل من المصفوفات الجديدة والأصلية.</li> + <li dir="rtl">للأرقام و الحروف والقيم المنطقية strings, numbers and booleans (not {{jsxref("String")}}, {{jsxref("Number")}} and {{jsxref("Boolean")}} objects),تقوم <code>slice</code> بنسخ القيم إلى مصفوفة جديدة. لا تؤثر التغييرات على الحرف أو الرقم أو القيمة المنطقية في مصفوفة على المصفوفة الآخرى.</li> +</ul> + +<p dir="rtl">إذا تمت إضافة عنصر جديد إلى أي مصفوفة ، فلن تتأثر المصفوفة الآخرى.</p> + +<h2 dir="rtl" id="أمثلة">أمثلة</h2> + +<h3 dir="rtl" id="إعادة_جزء_من_من_مصفوفة_موجودة">إعادة جزء من من مصفوفة موجودة</h3> + +<pre class="brush: js notranslate">let fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'] +let citrus = fruits.slice(1, 3) + +// fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'] +// citrus contains ['Orange','Lemon'] +</pre> + +<h3 dir="rtl" id="باستخدام_slice">باستخدام <code>slice</code></h3> + +<p dir="rtl">في المثال التالي, تقوم<code>slice</code> بإنشاء مصفوفة جديدة <code>newCar</code>, من <code>myCar</code>. كلاهما يتضمن إشارة إلى الobject <code>myHonda</code>. عندما يتغير لون <code>myHonda</code> إلى الأرجواني, تعكس كلا المصفوفتان التغيير.</p> + +<pre class="brush: js notranslate">// 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) +</pre> + +<p>This script writes:</p> + +<pre class="notranslate">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 +</pre> + +<h3 id="Array-like_objects">Array-like objects</h3> + +<p dir="rtl"><code>slice</code> method يمكن أيضًا استدعاؤها لتحويل Array-like objects / مجموعات إلى مصفوفة جديدة. انت فقط {{jsxref("Function.prototype.bind", "bind")}} the method لل object. The {{jsxref("Functions/arguments", "arguments")}}داخل دالة هو مثال على 'array-like object'.</p> + +<pre class="brush: js notranslate">function list() { + return Array.prototype.slice.call(arguments) +} + +let list1 = list(1, 2, 3) // [1, 2, 3] +</pre> + +<p>البناء يمكن أن يتم ب {{jsxref("Function.prototype.call", "call()")}} method of {{jsxref("Function.prototype")}} ويمكن تقليلها باستخدام <code>[].slice.call(arguments)</code> بدلا من<code>Array.prototype.slice.call</code>.</p> + +<p dir="rtl">على أي حال يمكن تبسيطها باستخدام {{jsxref("Function.prototype.bind", "bind")}}.</p> + +<pre class="brush: js notranslate">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]</pre> + +<h2 id="المواصفات">المواصفات</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">مواصفات</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.slice', 'Array.prototype.slice')}}</td> + </tr> + </tbody> +</table> + +<h2 id="التوافق_مع_المتصفح">التوافق مع المتصفح</h2> + +<div class="hidden">يتم إنشاء جدول التوافق في هذه الصفحة من البيانات المهيكلة. إذا كنت ترغب في المساهمة في البيانات ، يرجى مراجعة https://github.com/mdn/browser-compat-data وإرسال طلب سحب إلينا.</div> + +<p>{{Compat("javascript.builtins.Array.slice")}}</p> + +<h2 id="انظر_أيضا">انظر أيضا</h2> + +<ul> + <li>{{jsxref("Array.prototype.splice()")}}</li> + <li>{{jsxref("Function.prototype.call()")}}</li> + <li>{{jsxref("Function.prototype.bind()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p>دالة <code>getDate()</code> تقوم بإرجاع يوم من تاريخ الشهر المحدد وفقاً للوقت المحلي.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-getdate.html")}}</div> + + + +<h2 id="بنية_الجملة">بنية الجملة</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.getDate()</code> +</pre> + +<h3 id="القيمة_العائدة">القيمة العائدة</h3> + +<p>رقم صحيح ما بين 1 و31 يمثل يوم محدد من تاريخ الشهر المحدد وفقاً للوقت المحلي.</p> + +<h2 id="أمثلة">أمثلة</h2> + +<h3 id="استخدام_getDate()">استخدام <code>getDate()</code></h3> + +<p>البيان الثاني قام بتعيين قيمة المتغير <code>day</code>، علي أساس قيمة تاريخ المتغير <code>Xmas95</code>.</p> + +<pre class="brush: js">var Xmas95 = new Date('December 25, 1995 23:15:30'); +var day = Xmas95.getDate(); + +console.log(day); // 25 +</pre> + +<h2 id="الخصائص">الخصائص</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.getdate', 'Date.prototype.getDate')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.getdate', 'Date.prototype.getDate')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.14', 'Date.prototype.getDate')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.1.</td> + </tr> + </tbody> +</table> + +<h2 id="دعم_المتصفحات">دعم المتصفحات</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Date.getDate")}}</p> + +<h2 id="اقرأ_أيضًا">اقرأ أيضًا</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCDate()")}}</li> + <li>{{jsxref("Date.prototype.getUTCDay()")}}</li> + <li>{{jsxref("Date.prototype.setDate()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p>Creates a JavaScript <strong><code>Date</code></strong> instance that represents a single moment in time. <code>Date</code> objects are based on a time value that is the number of milliseconds since 1 January, 1970 UTC.</p> + +<h2 id="البنيه">البنيه</h2> + +<pre class="syntaxbox"><code>new Date(); +new Date(<var>value</var>); +new Date(<var>dateString</var>); +new Date(<var>year</var>, <var>month</var>[, <var>day</var>[, <var>hour</var>[, <var>minutes</var>[, <var>seconds</var>[, <var>milliseconds</var>]]]]]); +</code></pre> + +<div class="note"> +<p><strong>Note:</strong> JavaScript <code>Date</code> objects can only be instantiated by calling JavaScript <code>Date</code> 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 <code>Date</code> object; unlike other JavaScript object types, JavaScript <code>Date</code> objects have no literal syntax.</p> +</div> + +<h3 id="Parameters">Parameters</h3> + +<div class="note"> +<p><strong>Note:</strong> Where <code>Date</code> 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. <code>new Date(2013, 13, 1)</code> is equivalent to <code>new Date(2014, 1, 1)</code>, both create a date for <code>2014-02-01</code> (note that the month is 0-based). Similarly for other values: <code>new Date(2013, 2, 1, 0, 70)</code> is equivalent to <code>new Date(2013, 2, 1, 1, 10)</code> which both create a date for <code>2013-03-01T01:10:00</code>.</p> +</div> + +<div class="note"> +<p><strong>Note:</strong> Where <code>Date</code> is called as a constructor with more than one argument, the specifed arguments represent local time. If UTC is desired, use <code>new Date({{jsxref("Date.UTC()", "Date.UTC(...)")}})</code> with the same arguments.</p> +</div> + +<dl> + <dt><code>value</code></dt> + <dd>Integer value representing the number of milliseconds since 1 January 1970 00:00:00 UTC (Unix Epoch).</dd> + <dt><code>dateString</code></dt> + <dd>String value representing a date. The string should be in a format recognized by the {{jsxref("Date.parse()")}} method (<a href="http://tools.ietf.org/html/rfc2822#page-14">IETF-compliant RFC 2822 timestamps</a> and also a <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15">version of ISO8601</a>). + <div class="note"> + <p><strong>Note:</strong> parsing of date strings with the <code>Date</code> constructor (and <code>Date.parse</code>, they are equivalent) is strongly discouraged due to browser differences and inconsistencies.</p> + </div> + </dd> + <dt><code>year</code></dt> + <dd>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")}}.</dd> + <dt><code>month</code></dt> + <dd>Integer value representing the month, beginning with 0 for January to 11 for December.</dd> + <dt><code>day</code></dt> + <dd>Optional. Integer value representing the day of the month.</dd> + <dt><code>hour</code></dt> + <dd>Optional. Integer value representing the hour of the day.</dd> + <dt><code>minute</code></dt> + <dd>Optional. Integer value representing the minute segment of a time.</dd> + <dt><code>second</code></dt> + <dd>Optional. Integer value representing the second segment of a time.</dd> + <dt><code>millisecond</code></dt> + <dd>Optional. Integer value representing the millisecond segment of a time.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<ul> + <li>If no arguments are provided, the constructor creates a JavaScript <code>Date</code> object for the current date and time according to system settings.</li> + <li>If at least two arguments are supplied, missing arguments are either set to 1 (if day is missing) or 0 for all others.</li> + <li>The JavaScript date is based on a time value that is milliseconds since midnight 01 January, 1970 UTC. A day holds 86,400,000 milliseconds. The JavaScript <code>Date</code> object range is -100,000,000 days to 100,000,000 days relative to 01 January, 1970 UTC.</li> + <li>The JavaScript <code>Date</code> object provides uniform behavior across platforms. The time value can be passed between systems to represent the same moment in time and if used to create a local date object, will reflect the local equivalent of the time.</li> + <li>The JavaScript <code>Date</code> object supports a number of UTC (universal) methods, as well as local time methods. UTC, also known as Greenwich Mean Time (GMT), refers to the time as set by the World Time Standard. The local time is the time known to the computer where JavaScript is executed.</li> + <li>Invoking JavaScript <code>Date</code> as a function (i.e., without the {{jsxref("Operators/new", "new")}} operator) will return a string representing the current date and time.</li> +</ul> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt>{{jsxref("Date.prototype")}}</dt> + <dd>Allows the addition of properties to a JavaScript <code>Date</code> object.</dd> + <dt><code>Date.length</code></dt> + <dd>The value of <code>Date.length</code> is 7. This is the number of arguments handled by the constructor.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{jsxref("Date.now()")}}</dt> + <dd>Returns the numeric value corresponding to the current time - the number of milliseconds elapsed since 1 January 1970 00:00:00 UTC.</dd> + <dt>{{jsxref("Date.parse()")}}</dt> + <dd>Parses a string representation of a date and returns the number of milliseconds since 1 January, 1970, 00:00:00, UTC. + <div class="note"> + <p><strong>Note:</strong> Parsing of strings with <code>Date.parse</code> is strongly discouraged due to browser differences and inconsistencies.</p> + </div> + </dd> + <dt>{{jsxref("Date.UTC()")}}</dt> + <dd>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.</dd> +</dl> + +<h2 id="JavaScript_Date_instances">JavaScript <code>Date</code> instances</h2> + +<p>All <code>Date</code> instances inherit from {{jsxref("Date.prototype")}}. The prototype object of the <code>Date</code> constructor can be modified to affect all <code>Date</code> instances.</p> + +<h3 id="Date.prototype_Methods">Date.prototype Methods</h3> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/prototype', 'Methods')}}</div> + +<h2 id="Examples">Examples</h2> + +<h3 id="Several_ways_to_create_a_Date_object">Several ways to create a <code>Date</code> object</h3> + +<p>The following examples show several ways to create JavaScript dates:</p> + +<div class="note"> +<p><strong>Note:</strong> parsing of date strings with the <code>Date</code> constructor (and <code>Date.parse</code>, they are equivalent) is strongly discouraged due to browser differences and inconsistencies.</p> +</div> + +<pre class="brush: js">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); +</pre> + +<h3 id="Two_digit_years_map_to_1900_-_1999">Two digit years map to 1900 - 1999</h3> + +<p>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.</p> + +<pre class="brush: js">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) +</pre> + +<h3 id="Calculating_elapsed_time">Calculating elapsed time</h3> + +<p>The following examples show how to determine the elapsed time between two JavaScript dates in millisconds.</p> + +<p>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.</p> + +<pre class="brush: js">// 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 +</pre> + +<pre class="brush: js">// 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 +</pre> + +<pre class="brush: js">// 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); +</pre> + +<div class="note"> +<p><strong>Note:</strong> 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()")}}.</p> +</div> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date-objects', 'Date')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date-objects', 'Date')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9', 'Date')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.1.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}} [1]</td> + <td>{{CompatVersionUnknown}} [1]</td> + <td>{{CompatVersionUnknown}} [2]</td> + <td>{{CompatVersionUnknown}} [1]</td> + <td>{{CompatVersionUnknown}} [1]</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Some browsers can have issues when parsing dates: <a href="http://dygraphs.com/date-formats.html">3/14/2012 blog from danvk Comparing FF/IE/Chrome on Parsing Date Strings</a></p> + +<p>[2] <a href="https://msdn.microsoft.com/en-us//library/ie/ff743760(v=vs.94).aspx">ISO8601 Date Format is not supported</a> in Internet Explorer 8, and other version can have <a href="http://dygraphs.com/date-formats.html">issues when parsing dates</a></p> 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 +--- +<div>{{JSRef}}</div> + +<p>تقوم دالة <strong><code>Date.now()</code></strong> بعرض عدد الثواني التي مضت منذ بداية احتساب الوقت بطريقة Timestamp وهو الأول من يناير عام 1970 الساعة الثانية عشر منتصف الليل تمامًا (First of January 1970 00:00:00) بتوقيت UTC.</p> + +<h2 id="بنية_الجملة">بنية الجملة</h2> + +<pre class="syntaxbox"><code>var timeInMs = Date.now();</code></pre> + +<h3 id="القيمة_الراجعة">القيمة الراجعة</h3> + +<p>القيمة الراجعة من هذه الدالة ستكون عبارة عن رقم {{jsxref("Number")}}، هذا الرقم يشير إلى عدد الثواني التي انقضت منذ بداية احتساب الوقت بطريقة TimeStamp بالأنظمة التي تستند إلى UNIX.</p> + +<h2 id="الوصف">الوصف</h2> + +<p>لإن دالة <code>now()</code> تقوم بإرجاع قيمة ثابتة من الوقت {{jsxref("Date")}} فيجب عليك استخدامها بهذا الشكل <code>Date.now()</code> .</p> + +<h2 id="طريقة_احتياطية_(Polyfill)">طريقة احتياطية (Polyfill)</h2> + +<p>تم اعتماد هذه الدالة في إصدار ECMA-262 5<sup>th</sup> المحركات التي لم يتم تحديثها لتدعم هذه الدالة يمكنها أن تحاكي دالة <code>Date.now()</code> عبر استخدام هذه الشيفرة البرمجية، هذه الشيفرة ستسمح للمتصفحات بأن تحاكي وظيفة هذه الدالة في حالة عدم دعمها لها :</p> + +<pre class="brush: js">if (!Date.now) { // إذا لم تكن الدالة موجودة + Date.now = function now() { // قم بإنشاء الدالة + return new Date().getTime(); // واربطها بالوقت الحالي + }; +} +</pre> + +<h2 id="الخصائص">الخصائص</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">الخاصية</th> + <th scope="col">الحالة</th> + <th scope="col">تعليقات</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.4.4', 'Date.now')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.now', 'Date.now')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.now', 'Date.now')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="دعم_المتصفحات">دعم المتصفحات</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Date.now")}}</p> + +<h2 id="اقرأ_أيضًا">اقرأ أيضًا</h2> + +<ul> + <li>{{domxref("Performance.now()")}} — provides timestamps with sub-millisecond resolution for use in measuring web page performance</li> + <li>{{domxref("console.time()")}} / {{domxref("console.timeEnd()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p>تقوم دالة <code>Date.parse()</code> بتوزيع سلسلة من التاريخ، وإرجاع قيمتها إلي مللي ثانية من بداية تاريخ (1 يناير, 1970, 00:00:00 UTC) إلي التاريخ المحدد داخل الأقواس مثل <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">Date.parse("التاريخ")</span></font> أو NaN (ليس رقم) إذا كانت السلسلة غير معترف بها (غير صحيحة)، أو في بعض الحالات التي يكون فيها قيم التاريخ غير شرعية (مكتوبة بشكل خاطيء). علي سبيل المثال (2015-02-31).</p> + +<p>It is not recommended to use <code>Date.parse</code> 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).</p> + +<div>{{EmbedInteractiveExample("pages/js/date-parse.html")}}</div> + + + +<h2 id="بنية_الجملة">بنية الجملة</h2> + +<p>استدعاء مباشر:</p> + +<pre class="syntaxbox">Date.parse(<var>dateString</var>)</pre> + +<p>استدعاء ضمني:</p> + +<pre class="syntaxbox">new Date(<var>dateString</var>)</pre> + +<h3 id="المعاملات">المعاملات</h3> + +<dl> + <dt><code>dateString</code></dt> + <dd>النص يمثل <a href="http://tools.ietf.org/html/rfc2822#section-3.3">RFC2822</a> أو (a variant of) تاريخ <a href="https://ar.wikipedia.org/wiki/%D8%A7%D9%8A%D8%B2%D9%88_8601">ISO 8601</a> (قد يتم استخدام تنسيقات أخري، ولكن ربما قد تكون النتائج غير متوقعة).</dd> +</dl> + +<h3 id="القيمة_الراجعة">القيمة الراجعة</h3> + +<p>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.</p> + +<h2 id="الوصف">الوصف</h2> + +<p>تقوم دالة <code>parse()</code> بأخذ سلسلة التاريخ مثل ("Des 25, 1995") وتقوم بإرجاع القيمة إلي المللي ثانية منذ بداية احتساب الوقت وهو الأول من يناير عام 1970 الساعة الثانية عشر منتصف الليل تماماً (First of January 1970 00:00:00) بتوقيت UTC، حتي الوقت التي قمت بتحديده. وهذه الدالة مفيدة لتعيين قيمة التاريخ استناداً الي قيمة السلسلة، علي سبيل المثال الدمج مع طريقة {{jsxref("Date.prototype.setTime()", "setTime()")}} و {{jsxref("Global_Objects/Date", "Date")}} .</p> + +<p>Given a string representing a time, <code>parse()</code> returns the time value. It accepts the RFC2822 / IETF date syntax (<a href="http://tools.ietf.org/html/rfc2822#section-3.3">RFC2822 Section 3.3</a>), e.g. <code>"Mon, 25 Dec 1995 13:30:00 GMT"</code>. It understands the continental US time zone abbreviations, but for general use, use a time zone offset, for example, <code>"Mon, 25 Dec 1995 13:30:00 +0430"</code> (4 hours, 30 minutes east of the Greenwich meridian).</p> + +<p>GMT and UTC are considered equivalent. The local time zone is used to interpret arguments in <a href="http://tools.ietf.org/html/rfc2822#section-3.3">RFC2822 Section 3.3</a> format that do not contain time zone information.</p> + +<p>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 <code>"2015-10-12 12:00:00"</code> may be parsed to as <code>NaN</code>, UTC or local timezone.</p> + +<h3 dir="ltr" id="ECMAScript_5_دعم_تنسيق_ISO-8601">ECMAScript 5 دعم تنسيق ISO-8601</h3> + +<p>The date time string may be in a simplified <a href="http://www.w3.org/TR/NOTE-datetime">ISO 8601</a> format. For example, <code>"2011-10-10"</code> (just date) or <code>"2011-10-10T14:48:00"</code> (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 <a href="http://www.w3.org/TR/NOTE-datetime">ISO 8601</a> format, it will be treated as local.</p> + +<p>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 <code>NaN</code>.</p> + +<p>Because <code>parse()</code> is a static method of {{jsxref("Date")}}, it is called as <code>Date.parse()</code> rather than as a method of a {{jsxref("Date")}} instance.</p> + +<h3 id="الاختلافات_في_المنطقة_الزمنية_المفترضة">الاختلافات في المنطقة الزمنية المفترضة</h3> + +<p>Given a date string of <code>"March 7, 2014"</code>, <code>parse()</code> assumes a local time zone, but given an ISO format such as <code>"2014-03-07"</code> 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.</p> + +<h3 id="Fall-back_to_implementation-specific_date_formats">Fall-back to implementation-specific date formats</h3> + +<p>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 <code>Date.parse()</code> to return {{jsxref("NaN")}}.</p> + +<p>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.:</p> + +<pre class="brush: js" dir="rtl">// سلسلة ليست أيزو مع قيم تاريخ صالحة +new Date('23/25/2014'); +</pre> + +<p>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:</p> + +<pre class="brush: js" dir="rtl">// سلسلة أيزو مع قيمة غير صالحة +new Date('2014-25-23').toISOString(); +// يُعيد "RangeError: invalid date" في جميع المتصفحات المتوافقة مع es5 +</pre> + +<p>SpiderMonkey's implementation-specific heuristic can be found in <a href="http://mxr.mozilla.org/mozilla-central/source/js/src/jsdate.cpp?rev=64553c483cd1#889"><code>jsdate.cpp</code></a>. The string <code>"10 06 2014"</code> is an example of a non–conforming ISO format and thus falls back to a custom routine. See also this <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1023155#c6">rough outline</a> on how the parsing works.</p> + +<pre class="brush: js">new Date('10 06 2014'); +</pre> + +<p>will be treated as a local date of 6 October, 2014 and not 10 June, 2014. Other examples:</p> + +<pre class="brush: js">new Date('foo-bar 2014').toString(); +// يُعيد: "Invalid Date" *تاريخ غير صالح* + +Date.parse('foo-bar 2014'); +// يُعيد: NaN *ليس رقم* +</pre> + +<h2 id="أمثلة">أمثلة</h2> + +<h3 id="استخدام_Date.parse()">استخدام <code>Date.parse()</code></h3> + +<p>إذا كان <code>IPOdate</code> هو كائن {{jsxref("Date")}} موجود، فيمكن تعيينه إلي 9 أغسطس، 1995 (بالتوقيت المحلي) كما يلي:</p> + +<pre class="brush: js">IPOdate.setTime(Date.parse('Aug 9, 1995'));</pre> + +<p>بعض الأمثلة الأخرى على تحليل سلاسل التاريخ غير القياسية:</p> + +<pre class="brush: js">Date.parse('Aug 9, 1995');</pre> + +<p>يٌعيد <code>807937200000</code> في المنطقة الزمنية GMT-0300، ويٌعيد قيم أخري في المناطق الزمنية الأخري، حيث أن السلسلة لا تحدد المناطق الزمنية وهي ليست بتنسيق ISO، وبالتالي فإن المنطقة الزمنية الافتراضية بدون تنسيق ISO هي المنطقة الزمنية المحلية الخاصة بالدولة الموجود بها. وتختلف من دولة إلي آخري.</p> + +<pre class="brush: js">Date.parse('Wed, 09 Aug 1995 00:00:00 GMT');</pre> + +<p>يٌعيد <code>807926400000</code> بغض النظر عن المنطقة الزمنية المحلية مثل GMT (UTC).</p> + +<pre class="brush: js">Date.parse('Wed, 09 Aug 1995 00:00:00'); +</pre> + +<p>يٌعيد <code>807937200000</code> في المنطقة الزمنية GMT-0300، ويٌعيد قيم أخري في المناطق الزمنية الأخري، حيث أن السلسلة لا تحدد المناطق الزمنية وهي ليست بتنسيق ISO، وبالتالي فإن المنطقة الزمنية الافتراضية بدون تنسيق ISO هي المنطقة الزمنية المحلية الخاصة بالدولة الموجود بها. وتختلف من دولة إلي آخري.</p> + +<pre class="brush: js">Date.parse('Thu, 01 Jan 1970 00:00:00 GMT'); +</pre> + +<p>يٌعيد <code>0</code> بغض النظر عن المنطقة الزمنية المحلية مثل GMT (UTC).</p> + +<pre class="brush: js">Date.parse('Thu, 01 Jan 1970 00:00:00'); +</pre> + +<p>يٌعيد <code>14400000</code> في المنطقة الزمنية GMT-0400، ويٌعيد قيم أخري في المناطق الزمنية الأخري، حيث أن السلسلة لا تحدد المناطق الزمنية وهي ليست بتنسيق ISO، وبالتالي فإن المنطقة الزمنية الافتراضية بدون تنسيق ISO هي المنطقة الزمنية المحلية الخاصة بالدولة الموجود بها. وتختلف من دولة إلي آخري.</p> + +<pre class="brush: js">Date.parse('Thu, 01 Jan 1970 00:00:00 GMT-0400'); +</pre> + +<p>يٌعيد <code>14400000</code> بغض النظر عن المنطقة الزمنية المحلية مثل GMT (UTC).</p> + +<h2 id="الخصائص">الخصائص</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.4.2', 'Date.parse')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Simplified ISO 8601 format added.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.parse', 'Date.parse')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.parse', 'Date.parse')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="دعم_المتصفحات">دعم المتصفحات</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Date.parse")}}</p> + +<h2 id="ملاحظات_التوافق">ملاحظات التوافق</h2> + +<ul> + <li>Firefox 49 {{geckoRelease(49)}} changed the parsing of 2-digit years to be aligned with the Google Chrome browser instead of Internet Explorer. Now, 2-digit years that are less than <code>50</code> are parsed as 21st century years. For example, <code>04/16/17</code>, previously parsed as April 16, 1917, will be April 16, 2017 now. To avoid any interoperability issues or ambiguous years, it is recommended to use the ISO 8601 format like "2017-04-16" ({{bug(1265136)}}).</li> +</ul> + +<h2 id="اقرأ_أيضًا">اقرأ أيضًا</h2> + +<ul> + <li>{{jsxref("Date.UTC()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p>دالة setDate() تقوم بتعين يوم من الـ {{jsxref("Date")}} المحدد نسبه إلي الشهر المحدد.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-setdate.html")}}</div> + + + +<h2 id="بنية_الجملة">بنية الجملة</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.setDate(</code>dayValue [رقم اليوم]<code>)</code></pre> + +<h3 id="المعاملات_(Parameters)">المعاملات (Parameters)</h3> + +<dl> + <dt><code>dayValue</code></dt> + <dd>يجب أن يكون عدد صحيح يمثل يوم من الشهر. علي سبيل المثال <code>setDate(15)</code> .</dd> +</dl> + +<h3 id="القيمة_العائدة">القيمة العائدة</h3> + +<p>عدد المللي ثانية بين تاريخ 1 يناير 1970 00:00:00 UTC والتاريخ المحدد (يتغير الـ {{jsxref("Date")}} أيضا بتغير المكان [المنطقة الزمنية]).</p> + +<h2 id="الوصف">الوصف</h2> + +<p>إذا كان <code>dayValue [رقم اليوم]</code> خارج نطاق قيم الشهر المحدد لهذا التاريخ، فأن دالة <code>setDate()</code> ستقوم بتحديد الـ {{jsxref("Date")}} [اليوم] وفقاً لذلك. علي سبيل المثال، إذا تم تحديد <code>dayValue [رقم اليوم]</code> إلي <code>0</code> فسيتم تعيين التاريخ إلي أخر يوم في الشهر السابق.</p> + +<h2 id="أمثلة">أمثلة</h2> + +<h3 id="استخدام_setDate()">استخدام <code>setDate()</code></h3> + +<pre class="brush: js">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 +</pre> + +<h2 id="الخصائص">الخصائص</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.36', 'Date.prototype.setDate')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.setdate', 'Date.prototype.setDate')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.setdate', 'Date.prototype.setDate')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="دعم_المتصفحات">دعم المتصفحات</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Date.setDate")}}</p> + +<h2 id="اقرأ_أيضًا">اقرأ أيضًا</h2> + +<ul> + <li>{{jsxref("Date.prototype.getDate()")}}</li> + <li>{{jsxref("Date.prototype.setUTCDate()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p>دالة <strong><code>Date.UTC()</code></strong> تقبل نفس المُعاملات parameters علي الرغم من طول تكوين المنشيء، ويٌعيد التاريخ إلي المللي ثانية من بداية تاريخ 1 يناير, 1970, 00:00:00, التوقيت العالمي.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-utc.html")}}</div> + + + +<h2 id="بنية_الجملة">بنية الجملة</h2> + +<pre class="syntaxbox">Date.UTC(<var>year</var>, <var>month</var>[, <var>day</var>[, <var>hour</var>[, <var>minute</var>[, <var>second</var>[, <var>millisecond</var>]]]]])</pre> + +<h3 id="المعاملات_(Parameters)">المعاملات (Parameters)</h3> + +<dl> + <dt><code>year</code></dt> + <dd>سنة كاملة.</dd> + <dt><code>month</code></dt> + <dd>رقم صحيح ما بين 0 و11 يمثل الشهر.</dd> + <dt><code>day</code></dt> + <dd>اختياري. رقم صحيح ما بين 1 و31 يمثل يوم من الشهر.</dd> + <dt><code>hour</code></dt> + <dd>اختياري. رقم صحيح ما بين 0 و23 يمثل الساعات.</dd> + <dt><code>minute</code></dt> + <dd>اختياري. رقم صحيح ما بين 0 و59 يمثل الدقائق.</dd> + <dt><code>second</code></dt> + <dd>اختياري. رقم صحيح ما بين 0 و59 يمثل الثواني.</dd> + <dt><code>millisecond</code></dt> + <dd>اختياري. رقم صحيح ما بين 0 و999 يمثل الميلي ثانية.</dd> +</dl> + +<h3 id="القيمة_العائدة">القيمة العائدة</h3> + +<p>رقم يمثل عدد المللي ثانية في التاريخ المحدد منذ 1 يناير, 1970, 00:00:00، التوقيت العالمي.</p> + +<h2 id="الوصف">الوصف</h2> + +<p>تقوم دالة <code>UTC()</code> بأخذ معاملات (parameters) التاريخ المحددة بفاصلة ثم تُعيدها إلي مللي ثانية بين 1 يناير 1970، 00:00:00 التوقيت العالمي، والوقت الذي حددته.</p> + +<p>يجب عليك تحديد <code>السنة</code> كاملة؛ علي سبيل المثال, 1998. إذا كانت السنة محددة ما بين عام 0 و99، تقوم هذه الطريقة بتحويل السنه إلي سنه في القرن العشرين <code>(1900 + سنة)</code>؛ علي سبيل المثال، إذا حددت 95، فسيتم أستخدام 1995.</p> + +<p>تختلف طريقة <code>UTC()</code> عن منشيء التاريخ بطريقتين.</p> + +<ul> + <li>تستخدم دالة <code>Date.UTC()</code> التوقيت العالمي بدلاً من التوقيت المحلي.</li> + <li>تقوم دالة <code>Date.UTC()</code> بإرجاع قمية الوقت إلي رقم بدلاً من إنشاء تاريخ.</li> +</ul> + +<p>If a parameter you specify is outside of the expected range, the <code>UTC()</code> 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 <code>(year + 1)</code>, and 3 will be used for the month.</p> + +<p>Because <code>UTC()</code> is a static method of {{jsxref("Date")}}, you always use it as <code>Date.UTC()</code>, rather than as a method of a {{jsxref("Date")}} object you created.</p> + +<h2 id="أمثلة">أمثلة</h2> + +<h3 id="استخدام_Date.UTC()">استخدام <code>Date.UTC()</code></h3> + +<p>في المثال التالي يقوم بإنشاء التاريخ بإستخدام UTC بدلاً من التوقيت المحلي:</p> + +<pre class="brush:js">var utcDate = new Date(Date.UTC(2018, 11, 1, 0, 0, 0)); +</pre> + +<h2 id="الخصائص">الخصائص</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.utc', 'Date.UTC')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.utc', 'Date.UTC')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.4.3', 'Date.UTC')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + </tbody> +</table> + +<h2 id="دعم_المتصفحات">دعم المتصفحات</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Date.UTC")}}</p> + +<h2 id="ملاحظات_التوافق">ملاحظات التوافق</h2> + +<h3 id="Date.UTC_with_fewer_than_two_arguments"><code>Date.UTC</code> with fewer than two arguments</h3> + +<p>When providing less than two arguments to <code>Date.UTC</code>, {{jsxref("NaN")}} is returned. This behavior is specified in ECMAScript 2017. Engines who weren't supporting this behavior, have been updated (see {{bug(1050755)}}, <a href="https://github.com/tc39/ecma262/pull/642">ecma-262 #642</a>).</p> + +<pre class="brush: js">Date.UTC(); +Date.UTC(1); + +// Safari: NaN +// Chrome/Opera/V8: NaN + +// Firefox <54: non-NaN +// Firefox 54+: NaN + +// IE: non-NaN +// Edge: NaN +</pre> + +<h2 id="اقرأ_أيضاً">اقرأ أيضاً</h2> + +<ul> + <li>{{jsxref("Date.parse()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<div style="font-family: tahoma; font-size: 15px;"> +<p dir="rtl">تُستدعَى الوظيفة <code>()call</code> على دالة، أول argument لهذه الوظيفة هو قيمة <code>this</code> الخاصة بالدالة، وال arguments المتبقية (إن وُجدت)، هي arguments الدالة.</p> + +<div class="note" dir="rtl"> +<p><strong>ملاحظة : </strong> صيغة هذه الوظيفة مماثلة تقريبًا للصيغة الخاصة بـ {{jsxref("Function.prototype.apply", "apply")}} الفرق الوحيد هو ان <strong> </strong><code>()call</code><strong> </strong>تاخذ قائمة من ال <strong>arguments</strong> محددة بشكل فردي فيما تاخذ <code>()apply</code> مصفوفة واحدة من ال <strong>arguments</strong>.</p> +</div> + +<div>{{EmbedInteractiveExample("pages/js/function-call.html")}}</div> + + + +<h2 dir="rtl" id="صيغة_الوظيفة_call">صيغة الوظيفة call</h2> + +<pre class="syntaxbox notranslate"><code><var>function</var>.call(<var>thisArg</var>, <var>arg1</var>, <var>arg2</var>, ...)</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt dir="rtl"><code>thisArg</code></dt> + <dd dir="rtl">اختياري. وهو قيمة <code>this</code> المتوفرة في استدعاء الدالة <code><var>function</var></code>. لاحظ أن <code>this</code> قد لا تكون القيمة الفعلية التي تراها الوظيفة: اذا كانت هذه الوظيفة دالة في {{jsxref("Strict_mode", "non-strict mode", "", 1)}} سيتم استبدال {{jsxref("Global_Objects/null", "null")}} و {{jsxref("Global_Objects/undefined", "undefined")}} بالكائن العام والقيم الاولية ستحول الى كائنات. </dd> + <dt dir="rtl"><code>...,arg1, arg2</code></dt> + <dd dir="rtl"> arguments الدالة <code><var>function</var></code>.</dd> +</dl> + +<h3 dir="rtl" id="Return_value">Return value</h3> + +<p dir="rtl">تُرجع نتيجة استدعاء الدالة مع قيمة <strong> </strong><code>this</code> المحددة و ال arguments.</p> + +<h2 dir="rtl" id="وصف">وصف</h2> + +<p dir="rtl">تسمح الوظيفة <code>()call</code> لدالة او وظيفة خاصة بكائن واحد بان يتم استدعاؤها وتعيينها من قبل كائن مختلف.</p> + +<p dir="rtl">تمنح الوظيفة <code>()call</code> قيمة <code>this</code> الجديدة الى الدالة/الوظيفة. مع الـ <code>call</code> يمكنك كتابة الوظيفة مرة واحدة ومن ثم تقوم بتوريثها لكائن آخر دون الحاجة إلى إعادة كتابة الوظيفة للكائن الجديد.</p> + +<h2 dir="rtl" id="تحليل_الجزء_الغامض_في_الوظيفة_call">تحليل الجزء الغامض في الوظيفة <code>()call</code></h2> + +<p dir="rtl">نظرا لعدم وجود شرح كاف حول هذه الجزئية فقد ارتايت ان اظيف هذه الفقرة التوضيحية لعلها تزيح بعض الغموض عن قيمة ال <code>this</code> التي تمثل ال argument الاول لهذه الوظيفة.</p> + +<p dir="rtl">اذا نظرنا بتمعن في هذا الجزء من داخل الوظيفة <code>call</code>. سنجد ان thisArg ستساوي الكائن العام في حالة undefined او null، والا ستساوي ناتج الكائن Object، تساوي thisArg كائنا في كلتا الحالتين. وعليه فقد اصبحت كائنا، اذن فمن الطبيعي ان تمتلك خصائص. تم تحديد الخاصية _callTemp_ قيمتها this و this تمثل الدالة التي ستستدعى عليها الوظيفة <code>call</code>. واخيرا يتم تنفيذ هذه الدالة:</p> + +<pre class="brush: js notranslate">Function.prototype.call_like = function( thisArg, args ){ + thisArg = ( thisArg === undefined || thisArg === null ) ? window : Object( thisArg ); + thisArg._callTemp_ = this; + thisArg._callTemp_(); +}</pre> + +<p dir="rtl">في حالة عدم وجود thisArg ستتصرف الدالة fn بشكل طبيعي و this ستساوي الكائن العام:</p> + +<pre class="brush: js notranslate">var fn = function () { + console.log( this ); // [object Window] +} +fn.call_like(); + +</pre> + +<p dir="rtl">في حالة وجود thisArg بقيمة اولية ك undefined او null ف this ستساوي ايضا الكائن العام، خلاف ذالك سيتم تمرير قيمتها الى الكائن <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">()</a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>، اذا كانت هذه القيمة من القيم الاولية-<a href="https://developer.mozilla.org/en-US/docs/Glossary/Primitive">primitive value</a> سيقوم الكائن بتحويلها الى الكائن المناسب لها، واما اذا كانت هذه القيمة كائنا فلا حاجة لتحويلها و this ستساوي كائنا.</p> + +<p dir="rtl">وهذا يفسر كيف قام الكائن Object بتحويل القيمة الاولية <code>"Youssef belmeskine"</code> الى الكائن String: </p> + +<pre class="brush: js notranslate">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" ); + +</pre> + +<p dir="rtl">من المهم دائما ذكر المصدر:</p> + +<div class="blockIndicator note"> +<p dir="rtl">بالنسبة لى شخصيا لم اتمكن من فهم هذه الوظيفة وشقيقتها apply بشكل واضح الا عندما قمت بالاطلاع على الكود الداخلى لها. قمت باستخدام هذا الجزء من الكود لتوضيح الفكرة فقط. ستجد ال Polyfill كاملا في هذا الموقع <a href="https://hexmen.com/blog/2006/12/26/revisiting-functionprototypeapply-for-ie5/">hexmen.com.</a></p> +</div> + +<h2 dir="rtl" id="أمثلة">أمثلة</h2> + +<h3 dir="rtl" id="استخدام_ال_call_لِسَلسَلة_منشئات_الكائن">استخدام ال <code>call</code> لِسَلسَلة منشئات الكائن</h3> + +<p dir="rtl">تستطيع إستخدام <code>call</code> لعمل تسلسل لمنشئات-constructors الكائن، وذلك على غرار جافا. في المثال التالي، تم تحديد منشئ الكائن <code>Product</code> مع اثنين من البارامترات <code>name</code> و <code>price</code>. والدالتات <code>Food</code> و <code>Toy</code> تستدعيان <code>Product</code> ممرر لها <code>this</code> و <code>name</code> و <code>price</code>. تقوم Product بتهيئة الخاصيتان <code>name</code> و <code>price</code> فيما تقوم كلا الدالتان المتخصصتان بتحديد ال <code>category</code>.</p> + +<pre class="brush: js notranslate">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); +</pre> + +<h3 dir="rtl" id="إستخدام_ال_call_لإستدعاء_الدالة_المجهولة_الاسم-anonymous_function">إستخدام ال call لإستدعاء الدالة المجهولة الاسم-anonymous function </h3> + +<p dir="rtl">في هذا المثال قمنا بانشاء الدالة المجهولة واستخدمنا <code>call</code> لإستدعاءها على كل كائن في المصفوفة. الغرض الرئيسي من الدالة المجهولة هو إضافة الدالة <code>print</code> الى كل كائن، والتي ستكون قادرة على طباعة الفهرس الصحيح لكائنات المصفوفة. تمرير كائن على شكل قيمة <code>this</code><span id="result_box" lang="ar"><span> </span></span><span lang="ar"><span>ليس ضروريًا، ولكن تم إنجازه لغرض توضيحي.</span></span></p> + +<pre class="brush: js notranslate">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); +} +</pre> + +<h3 dir="rtl" id="استخدام_call_لاستدعاء_دالة_وتحديد_السياق-context_ل_this">استخدام <code>call</code> لاستدعاء دالة وتحديد السياق-context ل <code>this</code></h3> + +<p dir="rtl">في المثال أدناه، عندما سنقوم باستدعاء <code>greet</code> سترتبط قيمة <code>this</code> بالكائن <code>obj.</code></p> + +<pre class="brush: js notranslate">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 +</pre> + +<h3 dir="rtl" id="إستخدام_الـcall_لاستدعاء_دالة_وبدون_تحديد_البرامتر_الاول">إستخدام الـ<code>call</code> لاستدعاء دالة وبدون تحديد البرامتر الاول</h3> + +<p dir="rtl">في المثال أدناه ،قمنا باستدعاء الدالة <code>display</code> من دون تمرير البرامتر الاول. إذا لم يتم تمرير قيمة <code>this</code> في البرامتر الاول فسترتبط بالكائن العام-global object.</p> +</div> + +<pre class="brush: js notranslate">var sData = 'Wisen'; + +function display(){ + console.log('sData value is %s ', this.sData); +} + +display.call(); // sData value is Wisen +</pre> + +<div class="blockIndicator note" dir="rtl"> +<p>تذكر ان قيمة <code>this</code> ستكون ب <code>undefined</code> في الوضع الصارم. انظر ادناه:</p> +</div> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="string token">'use strict'</span><span class="punctuation token">;</span> + +<span class="keyword token">var</span> sData <span class="operator token">=</span> <span class="string token">'Wisen'</span><span class="punctuation token">;</span> + +<span class="keyword token">function</span> <span class="function token">display</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'sData value is %s '</span><span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">.</span>sData<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +display<span class="punctuation token">.</span><span class="function token">call</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Cannot read the property of 'sData' of undefined</span></code></pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.3.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.3.4.4', 'Function.prototype.call')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function.prototype.call', 'Function.prototype.call')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function.prototype.call', 'Function.prototype.call')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.builtins.Function.call")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Function.prototype.bind()")}}</li> + <li>{{jsxref("Function.prototype.apply()")}}</li> + <li> + <p><a href="/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">Introduction to Object-Oriented JavaScript</a></p> + </li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p>The <strong><code>Function</code> constructor</strong> creates a new <code>Function</code> 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.</p> + +<div>{{EmbedInteractiveExample("pages/js/function-constructor.html")}}</div> + + + +<p>Every JavaScript function is actually a <code>Function</code> object. This can be seen with the code <code>(function(){}).constructor === Function</code> which returns true.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>new Function ([<var>arg1</var>[, <var>arg2</var>[, ...<var>argN</var>]],] <var>functionBody</var>)</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> + <dd>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 "<code>x</code>", "<code>theValue</code>", or "<code>a,b</code>".</dd> + <dt><code>functionBody</code></dt> + <dd>A string containing the JavaScript statements comprising the function definition.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p><code>Function</code> objects created with the <code>Function</code> constructor are parsed when the function is created. This is less efficient than declaring a function with a <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">function expression</a> or <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">function statement</a> and calling it within your code because such functions are parsed with the rest of the code.</p> + +<p>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.</p> + +<p>Invoking the <code>Function</code> constructor as a function (without using the <code>new</code> 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 <code>new</code> with <code>Function</code>.</p> + +<h2 id="Properties_and_Methods_of_Function">Properties and Methods of <code>Function</code></h2> + +<p>The global <code>Function</code> 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")}}.</p> + +<h2 id="Function_prototype_object"><code>Function</code> prototype object</h2> + +<h3 id="Properties">Properties</h3> + +<div>{{page('/en-US/docs/JavaScript/Reference/Global_Objects/Function/prototype', 'Properties')}}</div> + +<h3 id="Methods">Methods</h3> + +<div>{{page('/en-US/docs/JavaScript/Reference/Global_Objects/Function/prototype', 'Methods')}}</div> + +<h2 id="Function_instances"><code>Function</code> instances</h2> + +<p><code>Function</code> 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 <code>Function</code> instances.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Specifying_arguments_with_the_Function_constructor">Specifying arguments with the <code>Function</code> constructor</h3> + +<p>The following code creates a <code>Function</code> object that takes two arguments.</p> + +<pre class="brush: js">// 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 +</pre> + +<p>The arguments "<code>a</code>" and "<code>b</code>" are formal argument names that are used in the function body, "<code>return a + b</code>".</p> + +<h3 id="Difference_between_Function_constructor_and_function_declaration">Difference between Function constructor and function declaration</h3> + +<p>Functions created with the <code>Function</code> 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 <code>Function</code> constructor was called. This is different from using {{jsxref("eval")}} with code for a function expression.</p> + +<pre class="brush: js">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 +</pre> + +<p>The "proper" way to execute external code with <code>Function</code> (for maximum minifyability).</p> + +<pre class="brush: js">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</pre> + +<p>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.</p> + +<pre class="brush: js">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)) +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.3', 'Function')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-objects', 'Function')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-objects', 'Function')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Function")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Functions", "Functions and function scope")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Statements/function", "function statement")}}</li> + <li>{{jsxref("Operators/function", "function expression")}}</li> + <li>{{jsxref("Statements/function*", "function* statement")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("AsyncFunction")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> +</ul> 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 +--- +<div> + {{jsSidebar("Objects")}}</div> +<h2 id="Summary" name="Summary">Summary</h2> +<p>This chapter documents all the JavaScript standard built-in objects, along with their methods and properties.</p> +<div class="onlyinclude"> + <p>The term "global objects" (or standard built-in objects) here is not to be confused with the <em>global object</em>. Here, global objects refer to <em>objects in the global scope</em> (but only if ECMAScript 5 strict mode is not used! Otherwise it returns <code>undefined</code>). The <em>global object</em> itself can be accessed by the {{jsxref("Operators/this", "this")}} operator in the global scope. In fact, the global scope <em>consists</em><em> of</em> the properties of the global object (including inherited properties, if any).</p> + <p>Other objects in the global scope are either <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Creating_new_objects">created by the user script</a> or provided by the host application. The host objects available in browser contexts are documented in the <a href="/en-US/docs/Web/API/Reference">API reference</a>. For more information about the distinction between the <a href="/en-US/docs/DOM/DOM_Reference">DOM</a> and core <a href="/en-US/docs/Web/JavaScript">JavaScript</a>, see <a href="/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">JavaScript technologies overview</a>.</p> + <h2 id="Standard_objects_(by_category)">Standard objects (by category)</h2> + <h3 id="Value_properties">Value properties</h3> + <p>Global properties returning a simple value.</p> + <ul> + <li>{{jsxref("Infinity")}}</li> + <li>{{jsxref("NaN")}}</li> + <li>{{jsxref("undefined")}}</li> + <li>{{jsxref("null")}} literal</li> + </ul> + <h3 id="Function_properties">Function properties</h3> + <p>Global functions returning the result of a specific routine.</p> + <ul> + <li>{{jsxref("Global_Objects/eval", "eval()")}}</li> + <li>{{jsxref("Global_Objects/uneval", "uneval()")}} {{non-standard_inline()}}</li> + <li>{{jsxref("Global_Objects/isFinite", "isFinite()")}}</li> + <li>{{jsxref("Global_Objects/isNaN", "isNaN()")}}</li> + <li>{{jsxref("Global_Objects/parseFloat", "parseFloat()")}}</li> + <li>{{jsxref("Global_Objects/parseInt", "parseInt()")}}</li> + <li>{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}</li> + <li>{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}</li> + <li>{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}</li> + <li>{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}</li> + <li>{{jsxref("Global_Objects/escape", "escape()")}} {{deprecated_inline()}}</li> + <li>{{jsxref("Global_Objects/unescape", "unescape()")}} {{deprecated_inline()}}</li> + </ul> + <h3 id="Fundamental_objects">Fundamental objects</h3> + <p>General language objects, functions and errors.</p> + <ul> + <li>{{jsxref("Object")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Boolean")}}</li> + <li>{{jsxref("Symbol")}} {{experimental_inline()}}</li> + <li>{{jsxref("Error")}}</li> + <li>{{jsxref("EvalError")}}</li> + <li>{{jsxref("InternalError")}}</li> + <li>{{jsxref("RangeError")}}</li> + <li>{{jsxref("ReferenceError")}}</li> + <li>{{jsxref("StopIteration")}}</li> + <li>{{jsxref("SyntaxError")}}</li> + <li>{{jsxref("TypeError")}}</li> + <li>{{jsxref("URIError")}}</li> + </ul> + <h3 id="Numbers_and_dates">Numbers and dates</h3> + <p>Objects dealing with numbers, dates and mathematical calculations.</p> + <ul> + <li>{{jsxref("Number")}}</li> + <li>{{jsxref("Math")}}</li> + <li>{{jsxref("Date")}}</li> + </ul> + <h3 id="Text_processing">Text processing</h3> + <p>Objects for manipulating texts.</p> + <ul> + <li>{{jsxref("String")}}</li> + <li>{{jsxref("RegExp")}}</li> + </ul> + <h3 id="Indexed_collections">Indexed collections</h3> + <p>Collections ordered by an index. Array-type objects.</p> + <ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Int8Array")}}</li> + <li>{{jsxref("Uint8Array")}}</li> + <li>{{jsxref("Uint8ClampedArray")}}</li> + <li>{{jsxref("Int16Array")}}</li> + <li>{{jsxref("Uint16Array")}}</li> + <li>{{jsxref("Int32Array")}}</li> + <li>{{jsxref("Uint32Array")}}</li> + <li>{{jsxref("Float32Array")}}</li> + <li>{{jsxref("Float64Array")}}</li> + <li>{{jsxref("ParallelArray")}} {{non-standard_inline()}}</li> + </ul> + <h3 id="Keyed_collections">Keyed collections</h3> + <p>Collections of objects as keys. Elements iterable in insertion order.</p> + <ul> + <li>{{jsxref("Map")}} {{experimental_inline()}}</li> + <li>{{jsxref("Set")}} {{experimental_inline()}}</li> + <li>{{jsxref("WeakMap")}} {{experimental_inline()}}</li> + <li>{{jsxref("WeakSet")}} {{experimental_inline()}}</li> + </ul> + <h3 id="Structured_data">Structured data</h3> + <p>Data buffers and <strong>J</strong>ava<strong>S</strong>cript <strong>O</strong>bject <strong>N</strong>otation.</p> + <ul> + <li>{{jsxref("ArrayBuffer")}}</li> + <li>{{jsxref("DataView")}}</li> + <li>{{jsxref("JSON")}}</li> + </ul> + <h3 id="Control_abstraction_objects">Control abstraction objects</h3> + <ul> + <li>{{jsxref("Iterator")}} {{non-standard_inline()}}</li> + <li>{{jsxref("Generator")}} {{experimental_inline()}}</li> + <li>{{jsxref("Promise")}} {{experimental_inline()}}</li> + </ul> + <h3 id="Reflection">Reflection</h3> + <ul> + <li>{{jsxref("Reflect")}} {{experimental_inline()}}</li> + <li>{{jsxref("Proxy")}} {{experimental_inline()}}</li> + </ul> + <h3 id="Internationalization">Internationalization</h3> + <p>Additions to the ECMAScript core for language-sensitive functionalities.</p> + <ul> + <li>{{jsxref("Intl")}}</li> + <li>{{jsxref("Global_Objects/Collator", "Intl.Collator")}}</li> + <li>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li> + <li>{{jsxref("Global_Objects/NumberFormat", "Intl.NumberFormat")}}</li> + </ul> + <h3 id="Other">Other</h3> + <ul> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a></code></li> + </ul> +</div> +<p> </p> 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 +--- +<div>{{JSRef("Global_Objects", "JSON")}}</div> + +<h2 id="Summary" name="Summary">Summary</h2> +<p>The <strong><code>JSON</code></strong> object contains methods for parsing <a class="external" href="http://json.org/">JavaScript Object Notation</a> ({{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.</p> + +<h2 id="Description" name="Description">Description</h2> + +<h3 id="JavaScript_Object_Notation" name="JavaScript_Object_Notation">JavaScript Object Notation</h3> +<p>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 <a href="http://timelessrepo.com/json-isnt-a-javascript-subset">JSON: The JavaScript subset that isn't</a>.</p> +<table> + <caption>JavaScript and JSON differences</caption> + <thead> + <tr> + <th scope="col">JavaScript type</th> + <th scope="col">JSON differences</th> + </tr> + </thead> + <tbody> + <tr> + <td>Objects and Arrays</td> + <td>Property names must be double-quoted strings; trailing commas are forbidden.</td> + </tr> + <tr> + <td>Numbers</td> + <td>Leading zeros are prohibited; a decimal point must be followed by at least one digit.</td> + </tr> + <tr> + <td>Strings</td> + <td> + <p>Only a limited sets of characters may be escaped; certain control characters are prohibited; the Unicode line separator (<a href="http://unicode-table.com/en/2028/">U+2028</a>) and paragraph separator (<a href="http://unicode-table.com/en/2029/">U+2029</a>) 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:</p> +<pre class="brush: js"> +var code = '"\u2028\u2029"'; +JSON.parse(code); // works fine +eval(code); // fails +</pre> + </td> + </tr> + </tbody> +</table> +<p>The full JSON syntax is as follows:</p> +<pre><var>JSON</var> = <strong>null</strong> + <em>or</em> <strong>true</strong> <em>or</em> <strong>false</strong> + <em>or</em> <var>JSONNumber</var> + <em>or</em> <var>JSONString</var> + <em>or</em> <var>JSONObject</var> + <em>or</em> <var>JSONArray</var> + +<var>JSONNumber</var> = <strong>-</strong> <var>PositiveNumber</var> + <em>or</em> <var>PositiveNumber</var> +<var>PositiveNumber</var> = DecimalNumber + <em>or</em> <var>DecimalNumber</var> <strong>.</strong> <var>Digits</var> + <em>or</em> <var>DecimalNumber</var> <strong>.</strong> <var>Digits</var> <var>ExponentPart</var> + <em>or</em> <var>DecimalNumber</var> <var>ExponentPart</var> +<var>DecimalNumber</var> = <strong>0</strong> + <em>or</em> <var>OneToNine</var> <var>Digits</var> +<var>ExponentPart</var> = <strong>e</strong> <var>Exponent</var> + <em>or</em> <strong>E</strong> <var>Exponent</var> +<var>Exponent</var> = <var>Digits</var> + <em>or</em> <strong>+</strong> <var>Digits</var> + <em>or</em> <strong>-</strong> <var>Digits</var> +<var>Digits</var> = <var>Digit</var> + <em>or</em> <var>Digits</var> <var>Digit</var> +<var>Digit</var> = <strong>0</strong> through <strong>9</strong> +<var>OneToNine</var> = <strong>1</strong> through <strong>9</strong> + +<var>JSONString</var> = <strong>""</strong> + <em>or</em> <strong>"</strong> <var>StringCharacters</var> <strong>"</strong> +<var>StringCharacters</var> = <var>StringCharacter</var> + <em>or</em> <var>StringCharacters</var> <var>StringCharacter</var> +<var>StringCharacter</var> = any character + <em>except</em> <strong>"</strong> <em>or</em> <strong>\</strong> <em>or</em> U+0000 through U+001F + <em>or</em> <var>EscapeSequence</var> +<var>EscapeSequence</var> = <strong>\"</strong> <em>or</em> <strong>\/</strong> <em>or</em> <strong>\\</strong> <em>or</em> <strong>\b</strong> <em>or</em> <strong>\f</strong> <em>or</em> <strong>\n</strong> <em>or</em> <strong>\r</strong> <em>or</em> <strong>\t</strong> + <em>or</em> <strong>\u</strong> <var>HexDigit</var> <var>HexDigit</var> <var>HexDigit</var> <var>HexDigit</var> +<var>HexDigit</var> = <strong>0</strong> through <strong>9</strong> + <em>or</em> <strong>A</strong> through <strong>F</strong> + <em>or</em> <strong>a</strong> through <strong>f</strong> + +<var>JSONObject</var> = <strong>{</strong> <strong>}</strong> + <em>or</em> <strong>{</strong> <var>Members</var> <strong>}</strong> +<var>Members</var> = <var>JSONString</var> <strong>:</strong> <var>JSON</var> + <em>or</em> <var>Members</var> <strong>,</strong> <var>JSONString</var> <strong>:</strong> <var>JSON</var> + +<var>JSONArray</var> = <strong>[</strong> <strong>]</strong> + <em>or</em> <strong>[</strong> <var>ArrayElements</var> <strong>]</strong> +<var>ArrayElements</var> = <var>JSON</var> + <em>or</em> <var>ArrayElements</var> <strong>,</strong> <var>JSON</var> +</pre> +<p>Insignificant whitespace may be present anywhere except within a <code><var>JSONNumber</var></code> (numbers must contain no whitespace) or <code><var>JSONString</var></code> (where it is interpreted as the corresponding character in the string, or would cause an error). The tab character (<a href="http://unicode-table.com/en/0009/">U+0009</a>), carriage return (<a href="http://unicode-table.com/en/000D/">U+000D</a>), line feed (<a href="http://unicode-table.com/en/000A/">U+000A</a>), and space (<a href="http://unicode-table.com/en/0020/">U+0020</a>) characters are the only valid whitespace characters.</p> + +<h2 id="Methods" name="Methods">Methods</h2> +<dl> + <dt>{{jsxref("JSON.parse()")}}</dt> + <dd>Parse a string as JSON, optionally transform the produced value and its properties, and return the value.</dd> + <dt>{{jsxref("JSON.stringify()")}}</dt> + <dd>Return a JSON string corresponding to the specified value, optionally including only certain properties or replacing property values in a user-defined manner.</dd> +</dl> + +<h2 id="Polyfill" name="Polyfill">Polyfill</h2> +<p>The <code>JSON</code> 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 <code>JSON</code> object in implementations which do not natively support it (like Internet Explorer 6).</p> +<p>The following algorithm is an imitation of the native <code>JSON</code> object:</p> +<pre class="brush: js">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); + } + }; +} +</pre> +<p>More complex well-known <a class="external" href="http://remysharp.com/2010/10/08/what-is-a-polyfill/">polyfills</a> for the <code>JSON</code> object are <a class="link-https" href="https://github.com/douglascrockford/JSON-js">JSON2</a> and <a class="external" href="http://bestiejs.github.com/json3">JSON3</a>.</p> + +<h2 id="Specifications" name="Specifications">Specifications</h2> +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.12', 'JSON')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-json-object', 'JSON')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> +<div>{{CompatibilityTable}}</div> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>{{CompatIE("8.0")}}</td> + <td>{{CompatOpera("10.5")}}</td> + <td>{{CompatSafari("4.0")}}</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> + </table> +</div> +<p>Based on <a class="external" href="http://kangax.github.com/es5-compat-table/">Kangax's compat table</a>.</p> + +<h2 id="See_also" name="See_also">See also</h2> +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Using_native_JSON">Using native <code>JSON</code></a></li> + <li>{{jsxref("Date.prototype.toJSON()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary">The <strong><code>Map</code></strong> object holds key-value pairs and remembers the original insertion order of the keys.</span> Any value (both objects and {{glossary("Primitive", "primitive values")}}) may be used as either a key or a value.</p> + +<h2 id="Description">Description</h2> + +<p>A <code>Map</code> object iterates its elements in insertion order — a {{jsxref("Statements/for...of", "for...of")}} loop returns an array of <code>[<var>key</var>, <var>value</var>]</code> for each iteration.</p> + +<h3 id="Key_equality">Key equality</h3> + +<ul> + <li>Key equality is based on the <a href="/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness#Same-value-zero_equality"><code>sameValueZero</code></a> algorithm.</li> + <li>{{jsxref("NaN")}} is considered the same as <code>NaN</code> (even though <code>NaN !== NaN</code>) and all other values are considered equal according to the semantics of the <code>===</code> operator.</li> + <li>In the current ECMAScript specification, <code>-0</code> and <code>+0</code> are considered equal, although this was not so in earlier drafts. See <em>"Value equality for -0 and 0"</em> in the <a href="#Browser_compatibility">Browser compatibility</a> table for details.</li> +</ul> + +<h3 id="Objects_vs._Maps">Objects vs. Maps</h3> + +<p>{{jsxref("Object")}} is similar to <code>Map</code>—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), <code>Object</code>s have been used as <code>Map</code>s historically.</p> + +<p>However, there are important differences that make <code>Map</code> preferable in certain cases:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="row"></th> + <th scope="col">Map</th> + <th scope="col">Object</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">Accidental Keys</th> + <td>A <code>Map</code> does not contain any keys by default. It only contains what is explicitly put into it.</td> + <td> + <p>An <code>Object</code> has a prototype, so it contains default keys that could collide with your own keys if you're not careful.</p> + + <div class="blockIndicator note"> + <p><strong>Note:</strong> As of ES5, this can be bypassed by using {{jsxref("Object.create", "Object.create(null)")}}, but this is seldom done.</p> + </div> + </td> + </tr> + <tr> + <th scope="row">Key Types</th> + <td>A <code>Map</code>'s keys can be any value (including functions, objects, or any primitive).</td> + <td>The keys of an <code>Object</code> must be either a {{jsxref("String")}} or a {{jsxref("Symbol")}}.</td> + </tr> + <tr> + <th scope="row">Key Order</th> + <td> + <p>The keys in <code>Map</code> are ordered. Thus, when iterating over it, a <code>Map</code> object returns keys in order of insertion.</p> + </td> + <td> + <p>The keys of an <code>Object</code> are not ordered.</p> + + <div class="blockIndicator note"> + <p><strong>Note:</strong> Since ECMAScript 2015, objects <em>do</em> preserve creation order for string and <code>Symbol</code> 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.</p> + </div> + </td> + </tr> + <tr> + <th scope="row">Size</th> + <td>The number of items in a <code>Map</code> is easily retrieved from its {{jsxref("Map.prototype.size", "size")}} property.</td> + <td>The number of items in an <code>Object</code> must be determined manually.</td> + </tr> + <tr> + <th scope="row">Iteration</th> + <td>A <code>Map</code> is an <a href="/en-US/docs/Web/JavaScript/Guide/iterable">iterable</a>, so it can be directly iterated.</td> + <td>Iterating over an <code>Object</code> requires obtaining its keys in some fashion and iterating over them.</td> + </tr> + <tr> + <th scope="row">Performance</th> + <td> + <p>Performs better in scenarios involving frequent additions and removals of key-value pairs.</p> + </td> + <td> + <p>Not optimized for frequent additions and removals of key-value pairs.</p> + </td> + </tr> + </tbody> +</table> + +<h3 id="Setting_object_properties">Setting object properties</h3> + +<p>Setting Object properties works for Map objects as well, and can cause considerable confusion.</p> + +<p>Therefore, this appears to work in a way:</p> + +<pre class="syntaxbox example-bad brush js notranslate">let wrongMap = new Map() +wrongMap['bla'] = 'blaa' +wrongMap['bla2'] = 'blaaa2' + +console.log(wrongMap) // Map { bla: 'blaa', bla2: 'blaaa2' } +</pre> + +<p>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:</p> + +<pre class="syntaxbox example-bad brush js notranslate">wrongMap.has('bla') // false +wrongMap.delete('bla') // false +console.log(wrongMap) // Map { bla: 'blaa', bla2: 'blaaa2' }</pre> + +<p>The correct usage for storing data in the Map is through the set(key, value) method.</p> + +<pre class="syntaxbox brush js example-good notranslate">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 + +</pre> + +<h2 id="Constructor">Constructor</h2> + +<dl> + <dt>{{jsxref("Map/Map", "Map()")}}</dt> + <dd>Creates a new <code>Map</code> object.</dd> +</dl> + +<h2 id="Static_properties">Static properties</h2> + +<dl> + <dt>{{jsxref("Map.@@species", "get Map[@@species]")}}</dt> + <dd>The constructor function that is used to create derived objects.</dd> +</dl> + +<h2 id="Instance_properties">Instance properties</h2> + +<dl> + <dt>{{jsxref("Map.prototype.size")}}</dt> + <dd>Returns the number of key/value pairs in the <code>Map</code> object.</dd> +</dl> + +<h2 id="Instance_methods">Instance methods</h2> + +<dl> + <dt>{{jsxref("Map.prototype.clear()")}}</dt> + <dd>Removes all key-value pairs from the <code>Map</code> object.</dd> + <dt>{{jsxref("Map.delete", "Map.prototype.delete(<var>key</var>)")}}</dt> + <dd>Returns <code>true</code> if an element in the <code>Map</code> object existed and has been removed, or <code>false</code> if the element does not exist. <code>Map.prototype.has(<var>key</var>)</code> will return <code>false</code> afterwards.</dd> + <dt>{{jsxref("Map.prototype.entries()")}}</dt> + <dd>Returns a new <code>Iterator</code> object that contains <strong>an array of <code>[<var>key</var>, <var>value</var>]</code></strong> for each element in the <code>Map</code> object in insertion order.</dd> + <dt>{{jsxref("Map.forEach", "Map.prototype.forEach(<var>callbackFn</var>[, <var>thisArg</var>])")}}</dt> + <dd>Calls <code><var>callbackFn</var></code> once for each key-value pair present in the <code>Map</code> object, in insertion order. If a <code><var>thisArg</var></code> parameter is provided to <code>forEach</code>, it will be used as the <code>this</code> value for each callback.</dd> + <dt>{{jsxref("Map.get", "Map.prototype.get(<var>key</var>)")}}</dt> + <dd>Returns the value associated to the <code><var>key</var></code>, or <code>undefined</code> if there is none.</dd> + <dt>{{jsxref("Map.has", "Map.prototype.has(<var>key</var>)")}}</dt> + <dd>Returns a boolean asserting whether a value has been associated to the <code><var>key</var></code> in the <code>Map</code> object or not.</dd> + <dt>{{jsxref("Map.prototype.keys()")}}</dt> + <dd>Returns a new <code>Iterator</code> object that contains the <strong>keys</strong> for each element in the <code>Map</code> object in insertion order.</dd> + <dt>{{jsxref("Map.set", "Map.prototype.set(<var>key</var>, <var>value</var>)")}}</dt> + <dd>Sets the <code><var>value</var></code> for the <code><var>key</var></code> in the <code>Map</code> object. Returns the <code>Map</code> object.</dd> + <dt>{{jsxref("Map.prototype.values()")}}</dt> + <dd>Returns a new <code>Iterator</code> object that contains the <strong>values</strong> for each element in the <code>Map</code> object in insertion order.</dd> + <dt>{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}</dt> + <dd>Returns a new <code>Iterator</code> object that contains <strong>an array of <code>[<var>key</var>, <var>value</var>]</code></strong> for each element in the <code>Map</code> object in insertion order.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_the_Map_object">Using the <code>Map</code> object</h3> + +<pre class="brush: js notranslate">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 () {} +</pre> + +<h3 id="Using_NaN_as_Map_keys">Using <code>NaN</code> as <code>Map</code> keys</h3> + +<p>{{jsxref("NaN")}} can also be used as a key. Even though every <code>NaN</code> is not equal to itself (<code>NaN !== NaN</code> is true), the following example works because <code>NaN</code>s are indistinguishable from each other:</p> + +<pre class="brush: js notranslate">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" +</pre> + +<h3 id="Iterating_Map_with_for..of">Iterating <code>Map</code> with <code>for..of</code></h3> + +<p>Maps can be iterated using a <code>for..of</code> loop:</p> + +<pre class="brush: js notranslate">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 +</pre> + +<h3 id="Iterating_Map_with_forEach">Iterating <code>Map</code> with <code>forEach()</code></h3> + +<p>Maps can be iterated using the {{jsxref("Map.prototype.forEach", "forEach()")}} method:</p> + +<pre class="brush: js notranslate">myMap.forEach(function(value, key) { + console.log(key + ' = ' + value) +}) +// 0 = zero +// 1 = one +</pre> + +<h3 id="Relation_with_Array_objects">Relation with Array objects</h3> + +<pre class="brush: js notranslate">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"] +</pre> + +<h3 id="Cloning_and_merging_Maps">Cloning and merging <code>Map</code>s</h3> + +<p>Just like <code>Array</code>s, <code>Map</code>s can be cloned:</p> + +<pre class="brush: js notranslate">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)</pre> + +<div class="blockIndicator note"> +<p><strong>Important:</strong> Keep in mind that <em>the data itself</em> is not cloned.</p> +</div> + +<p>Maps can be merged, maintaining key uniqueness:</p> + +<pre class="brush: js notranslate">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</pre> + +<p>Maps can be merged with Arrays, too:</p> + +<pre class="brush: js notranslate">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</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-map-objects', 'Map')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.builtins.Map")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Set")}}</li> + <li>{{jsxref("WeakMap")}}</li> + <li>{{jsxref("WeakSet")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p><strong><code>Math</code></strong> is a built-in object that has properties and methods for mathematical constants and functions. Not a function object.</p> + +<h2 id="Description">Description</h2> + +<p>Unlike the other global objects, <code>Math</code> is not a constructor. All properties and methods of <code>Math</code> are static. You refer to the constant pi as <code>Math.PI</code> and you call the sine function as <code>Math.sin(x)</code>, where <code>x</code> is the method's argument. Constants are defined with the full precision of real numbers in JavaScript.</p> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt>{{jsxref("Math.E")}}</dt> + <dd>Euler's constant and the base of natural logarithms, approximately 2.718.</dd> + <dt>{{jsxref("Math.LN2")}}</dt> + <dd>Natural logarithm of 2, approximately 0.693.</dd> + <dt>{{jsxref("Math.LN10")}}</dt> + <dd>Natural logarithm of 10, approximately 2.303.</dd> + <dt>{{jsxref("Math.LOG2E")}}</dt> + <dd>Base 2 logarithm of E, approximately 1.443.</dd> + <dt>{{jsxref("Math.LOG10E")}}</dt> + <dd>Base 10 logarithm of E, approximately 0.434.</dd> + <dt>{{jsxref("Math.PI")}}</dt> + <dd>Ratio of the circumference of a circle to its diameter, approximately 3.14159.</dd> + <dt>{{jsxref("Math.SQRT1_2")}}</dt> + <dd>Square root of 1/2; equivalently, 1 over the square root of 2, approximately 0.707.</dd> + <dt>{{jsxref("Math.SQRT2")}}</dt> + <dd>Square root of 2, approximately 1.414.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<div class="note"> +<p>Note that the trigonometric functions (<code>sin()</code>, <code>cos()</code>, <code>tan()</code>, <code>asin()</code>, <code>acos()</code>, <code>atan()</code>, <code>atan2()</code>) expect or return angles in radians. To convert radians to degrees, divide by <code>(Math.PI / 180)</code>, and multiply by this to convert the other way.</p> +</div> + +<div class="note"> +<p>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.</p> +</div> + +<dl> + <dt>{{jsxref("Global_Objects/Math/abs", "Math.abs(x)")}}</dt> + <dd>Returns the absolute value of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/acos", "Math.acos(x)")}}</dt> + <dd>Returns the arccosine of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/acosh", "Math.acosh(x)")}}</dt> + <dd>Returns the hyperbolic arccosine of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/asin", "Math.asin(x)")}}</dt> + <dd>Returns the arcsine of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/asinh", "Math.asinh(x)")}}</dt> + <dd>Returns the hyperbolic arcsine of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/atan", "Math.atan(x)")}}</dt> + <dd>Returns the arctangent of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/atanh", "Math.atanh(x)")}}</dt> + <dd>Returns the hyperbolic arctangent of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/atan2", "Math.atan2(y, x)")}}</dt> + <dd>Returns the arctangent of the quotient of its arguments.</dd> + <dt>{{jsxref("Global_Objects/Math/cbrt", "Math.cbrt(x)")}}</dt> + <dd>Returns the cube root of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/ceil", "Math.ceil(x)")}}</dt> + <dd>Returns the smallest integer greater than or equal to a number.</dd> + <dt>{{jsxref("Global_Objects/Math/clz32", "Math.clz32(x)")}}</dt> + <dd>Returns the number of leading zeroes of a 32-bit integer.</dd> + <dt>{{jsxref("Global_Objects/Math/cos", "Math.cos(x)")}}</dt> + <dd>Returns the cosine of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/cosh", "Math.cosh(x)")}}</dt> + <dd>Returns the hyperbolic cosine of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/exp", "Math.exp(x)")}}</dt> + <dd>Returns E<sup>x</sup>, where <var>x</var> is the argument, and E is Euler's constant (2.718…), the base of the natural logarithm.</dd> + <dt>{{jsxref("Global_Objects/Math/expm1", "Math.expm1(x)")}}</dt> + <dd>Returns subtracting 1 from <code>exp(x)</code>.</dd> + <dt>{{jsxref("Global_Objects/Math/floor", "Math.floor(x)")}}</dt> + <dd>Returns the largest integer less than or equal to a number.</dd> + <dt>{{jsxref("Global_Objects/Math/fround", "Math.fround(x)")}}</dt> + <dd>Returns the nearest <a href="http://en.wikipedia.org/wiki/Single-precision_floating-point_format" title="link to the wikipedia page on single precision">single precision</a> float representation of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/hypot", "Math.hypot([x[, y[, …]]])")}}</dt> + <dd>Returns the square root of the sum of squares of its arguments.</dd> + <dt>{{jsxref("Global_Objects/Math/imul", "Math.imul(x, y)")}}</dt> + <dd>Returns the result of a 32-bit integer multiplication.</dd> + <dt>{{jsxref("Global_Objects/Math/log", "Math.log(x)")}}</dt> + <dd>Returns the natural logarithm (log<sub>e</sub>, also ln) of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/log1p", "Math.log1p(x)")}}</dt> + <dd>Returns the natural logarithm (log<sub>e</sub>, also ln) of <code>1 + x</code> for a number x.</dd> + <dt>{{jsxref("Global_Objects/Math/log10", "Math.log10(x)")}}</dt> + <dd>Returns the base 10 logarithm of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/log2", "Math.log2(x)")}}</dt> + <dd>Returns the base 2 logarithm of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/max", "Math.max([x[, y[, …]]])")}}</dt> + <dd>Returns the largest of zero or more numbers.</dd> + <dt>{{jsxref("Global_Objects/Math/min", "Math.min([x[, y[, …]]])")}}</dt> + <dd>Returns the smallest of zero or more numbers.</dd> + <dt>{{jsxref("Global_Objects/Math/pow", "Math.pow(x, y)")}}</dt> + <dd>Returns base to the exponent power, that is, <code>base<sup>exponent</sup></code>.</dd> + <dt>{{jsxref("Global_Objects/Math/random", "Math.random()")}}</dt> + <dd>Returns a pseudo-random number between 0 and 1.</dd> + <dt>{{jsxref("Global_Objects/Math/round", "Math.round(x)")}}</dt> + <dd>Returns the value of a number rounded to the nearest integer.</dd> + <dt>{{jsxref("Global_Objects/Math/sign", "Math.sign(x)")}}</dt> + <dd>Returns the sign of the x, indicating whether x is positive, negative or zero.</dd> + <dt>{{jsxref("Global_Objects/Math/sin", "Math.sin(x)")}}</dt> + <dd>Returns the sine of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/sinh", "Math.sinh(x)")}}</dt> + <dd>Returns the hyperbolic sine of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/sqrt", "Math.sqrt(x)")}}</dt> + <dd>Returns the positive square root of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/tan", "Math.tan(x)")}}</dt> + <dd>Returns the tangent of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/tanh", "Math.tanh(x)")}}</dt> + <dd>Returns the hyperbolic tangent of a number.</dd> + <dt><code>Math.toSource()</code> {{non-standard_inline}}</dt> + <dd>Returns the string <code>"Math"</code>.</dd> + <dt>{{jsxref("Global_Objects/Math/trunc", "Math.trunc(x)")}}</dt> + <dd>Returns the integer part of the number x, removing any fractional digits.</dd> +</dl> + +<h2 id="Extending_the_Math_object">Extending the <code>Math</code> object</h2> + +<p>As with most of the built-in objects in JavaScript, the <code>Math</code> object can be extended with custom properties and methods. To extend the <code>Math</code> object, you do not use <code>prototype</code>. Instead, you directly extend <code>Math</code>:</p> + +<pre>Math.propName = propValue; +Math.methodName = methodRef;</pre> + +<p>For instance, the following example adds a method to the <code>Math</code> object for calculating the <em>greatest common divisor</em> of a list of arguments.</p> + +<pre class="brush: js">/* 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; + } +};</pre> + +<p>Try it:</p> + +<pre class="brush: js">console.log(Math.gcd(20, 30, 15, 70, 40)); // `5`</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8', 'Math')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math-object', 'Math')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>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.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math-object', 'Math')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Math")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Number")}}</li> +</ul> 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 +--- +<div dir="rtl">{{JSRef}}</div> + +<p dir="rtl">بالرجوع إلى {{jsxref("Object")}}constructor ووظيفتها إنشاء حالات من الاوبجكت (الكائن) .نذكرك بأن قيمة الخصائص التي تشير إليها تلك الفانكشان تشير لنفسها ولا تشير إلى سلسة تحتوي على إسم الفانكشان القيمة تقرأ فقط قيم بدائية مثل <code>1</code>, <code>true</code> و <code>"test"</code>.</p> + +<h2 dir="rtl" id="الوصف">الوصف</h2> + +<p dir="rtl">جميع الاوبجكت ( مع بعض الاستثائات نشأت مع <code>Object.create(null)</code> ) وستملك وقتها جميعا خاصية الـ <code>constructor </code>. اما الكائنات المنشأة بدون إستخدام الكونستراكتور بشكل صريح ( مثل object & array literals ) ستملك أيضا خصائص الكونستركتور بشكل أساسي</p> + +<pre class="brush: js">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 +</pre> + +<h2 dir="rtl" id="أمثلة">أمثلة</h2> + +<h3 dir="rtl" id="عرض_الكونستركتور_للأوبجكت">عرض الكونستركتور للأوبجكت</h3> + +<p dir="rtl">في المثال التالي قمنا بإنشاء بروتوتيب <code>Tree </code>و اوبجكت بإسم <code>theTree</code> المثال هنا يعرض خصائص الـ<code>constructor</code> للكائن <code>theTree</code></p> + +<pre class="brush: js" dir="rtl">function Tree(name) { + this.name = name; +} + +var theTree = new Tree('Redwood'); +console.log('theTree.constructor is ' + theTree.constructor); +</pre> + +<p dir="rtl">عندما تقوم بكتابة الكود بعالية ستحصل على النتيجة الاتية ليوضح لك أكثر :-</p> + +<pre class="brush: js">theTree.constructor is function Tree(name) { + this.name = name; +} +</pre> + +<h3 dir="rtl" id="تغير_الكونستركتور_الخاص_بالاوبجكت">تغير الكونستركتور الخاص بالاوبجكت</h3> + +<p>The following example shows how to modify constructor value of generic objects. Only <code>true</code>, <code>1</code> and <code>"test"</code> will not be affected as they have read-only native constructors. This example shows that it is not always safe to rely on the <code>constructor</code> property of an object.</p> + +<pre class="brush:js">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')); +</pre> + +<p>This example displays the following output:</p> + +<pre class="brush: js">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 +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.4.1', 'Object.prototype.constructor')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.prototype.constructor', 'Object.prototype.constructor')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.prototype.constructor', 'Object.prototype.constructor')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="دعم_المتصفحات">دعم المتصفحات</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Object.constructor")}}</p> +</div> 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 +--- +<div>{{JSRef}}</div> + +<p>The <code><strong>Object</strong></code> constructor creates an object wrapper.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">// Object initialiser or literal +{ [ <var>nameValuePair1</var>[, <var>nameValuePair2</var>[, ...<var>nameValuePairN</var>] ] ] } + +// Called as a constructor +new Object([<var>value</var>])</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>nameValuePair1, nameValuePair2, ... nameValuePair<em>N</em></code></dt> + <dd>Pairs of names (strings) and values (any value) where the name is separated from the value by a colon.</dd> + <dt><code>value</code></dt> + <dd>Any value.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>The <code>Object</code> 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.</p> + +<p>When called in a non-constructor context, <code>Object</code> behaves identically to <code>new Object()</code>.</p> + +<p>See also the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">object initializer / literal syntax</a>.</p> + +<h2 id="Properties_of_the_Object_constructor">Properties of the <code>Object</code> constructor</h2> + +<dl> + <dt><code>Object.length</code></dt> + <dd>Has a value of 1.</dd> + <dt>{{jsxref("Object.prototype")}}</dt> + <dd>Allows the addition of properties to all objects of type Object.</dd> +</dl> + +<h2 id="Methods_of_the_Object_constructor">Methods of the <code>Object</code> constructor</h2> + +<dl> + <dt>{{jsxref("Object.assign()")}}</dt> + <dd>Copies the values of all enumerable own properties from one or more source objects to a target object.</dd> + <dt>{{jsxref("Object.create()")}}</dt> + <dd>Creates a new object with the specified prototype object and properties.</dd> + <dt>{{jsxref("Object.defineProperty()")}}</dt> + <dd>Adds the named property described by a given descriptor to an object.</dd> + <dt>{{jsxref("Object.defineProperties()")}}</dt> + <dd>Adds the named properties described by the given descriptors to an object.</dd> + <dt>{{jsxref("Object.entries()")}}</dt> + <dd>Returns an array containing all of the <code>[key, value]</code> pairs of a given object's <strong>own</strong> enumerable string properties.</dd> + <dt>{{jsxref("Object.freeze()")}}</dt> + <dd>Freezes an object: other code can't delete or change any properties.</dd> + <dt>{{jsxref("Object.getOwnPropertyDescriptor()")}}</dt> + <dd>Returns a property descriptor for a named property on an object.</dd> + <dt>{{jsxref("Object.getOwnPropertyDescriptors()")}}</dt> + <dd>Returns an object containing all own property descriptors for an object.</dd> + <dt>{{jsxref("Object.getOwnPropertyNames()")}}</dt> + <dd>Returns an array containing the names of all of the given object's <strong>own</strong> enumerable and non-enumerable properties.</dd> + <dt>{{jsxref("Object.getOwnPropertySymbols()")}}</dt> + <dd>Returns an array of all symbol properties found directly upon a given object.</dd> + <dt>{{jsxref("Object.getPrototypeOf()")}}</dt> + <dd>Returns the prototype of the specified object.</dd> + <dt>{{jsxref("Object.is()")}}</dt> + <dd>Compares if two values are the same value. Equates all NaN values (which differs from both Abstract Equality Comparison and Strict Equality Comparison).</dd> + <dt>{{jsxref("Object.isExtensible()")}}</dt> + <dd>Determines if extending of an object is allowed.</dd> + <dt>{{jsxref("Object.isFrozen()")}}</dt> + <dd>Determines if an object was frozen.</dd> + <dt>{{jsxref("Object.isSealed()")}}</dt> + <dd>Determines if an object is sealed.</dd> + <dt>{{jsxref("Object.keys()")}}</dt> + <dd>Returns an array containing the names of all of the given object's <strong>own</strong> enumerable string properties.</dd> + <dt>{{jsxref("Object.preventExtensions()")}}</dt> + <dd>Prevents any extensions of an object.</dd> + <dt>{{jsxref("Object.seal()")}}</dt> + <dd>Prevents other code from deleting properties of an object.</dd> + <dt>{{jsxref("Object.setPrototypeOf()")}}</dt> + <dd>Sets the prototype (i.e., the internal <code>[[Prototype]]</code> property).</dd> + <dt>{{jsxref("Object.values()")}}</dt> + <dd>Returns an array containing the values that correspond to all of a given object's <strong>own</strong> enumerable string properties.</dd> +</dl> + +<h2 id="Object_instances_and_Object_prototype_object"><code>Object</code> instances and <code>Object</code> prototype object</h2> + +<p>All objects in JavaScript are descended from <code>Object</code>; all objects inherit methods and properties from {{jsxref("Object.prototype")}}, although they may be overridden. For example, other constructors' prototypes override the <code>constructor</code> property and provide their own <code>toString()</code> methods. Changes to the <code>Object</code> prototype object are propagated to all objects unless the properties and methods subject to those changes are overridden further along the prototype chain.</p> + +<h3 id="Properties">Properties</h3> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype', 'Properties') }}</div> + +<h3 id="Methods">Methods</h3> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype', 'Methods') }}</div> + +<h2 id="Deleting_a_property_from_an_object">Deleting a property from an object</h2> + +<p>There isn't any method in an Object itself to delete its own properties (e.g. like <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/delete">Map.prototype.delete()</a></code>). To do so one has to use the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete operator</a>.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_Object_given_undefined_and_null_types">Using <code>Object</code> given <code>undefined</code> and <code>null</code> types</h3> + +<p>The following examples store an empty <code>Object</code> object in <code>o</code>:</p> + +<pre class="brush: js">var o = new Object(); +</pre> + +<pre class="brush: js">var o = new Object(undefined); +</pre> + +<pre class="brush: js">var o = new Object(null); +</pre> + +<h3 id="Using_Object_to_create_Boolean_objects">Using <code>Object</code> to create <code>Boolean</code> objects</h3> + +<p>The following examples store {{jsxref("Boolean")}} objects in <code>o</code>:</p> + +<pre class="brush: js">// equivalent to o = new Boolean(true); +var o = new Object(true); +</pre> + +<pre class="brush: js">// equivalent to o = new Boolean(false); +var o = new Object(Boolean()); +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2', 'Object')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object-objects', 'Object')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Added Object.assign, Object.getOwnPropertySymbols, Object.setPrototypeOf, Object.is</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object-objects', 'Object')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Added Object.entries, Object.values and Object.getOwnPropertyDescriptors.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Object")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">Object initializer</a></li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p>The <strong><code>String</code></strong> global object is a constructor for strings, or a sequence of characters.</p> + +<h2 id="Syntax">Syntax</h2> + +<p>String literals take the forms:</p> + +<pre class="syntaxbox">'string text' +"string text" +"中文 español deutsch English हिन्दी العربية português বাংলা русский 日本語 ਪੰਜਾਬੀ 한국어 தமிழ் עברית"</pre> + +<p>Strings can also be created using the <code>String</code> global object directly:</p> + +<pre class="syntaxbox">String(thing)</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>thing</code></dt> + <dd>Anything to be converted to a string.</dd> +</dl> + +<h3 id="Template_literals">Template literals</h3> + +<p>Starting with ECMAScript 2015, string literals can also be so-called <a href="/en-US/docs/Web/JavaScript/Reference/Template_literals">Template literals</a>:</p> + +<pre class="syntaxbox">`hello world` +`hello! + world!` +`hello ${who}` +escape `<a>${who}</a>`</pre> + +<dl> +</dl> + +<h3 id="Escape_notation">Escape notation</h3> + +<p>Beside regular, printable characters, special characters can be encoded using escape notation:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Code</th> + <th scope="col">Output</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>\0</code></td> + <td>the NULL character</td> + </tr> + <tr> + <td><code>\'</code></td> + <td>single quote</td> + </tr> + <tr> + <td><code>\"</code></td> + <td>double quote</td> + </tr> + <tr> + <td><code>\\</code></td> + <td>backslash</td> + </tr> + <tr> + <td><code>\n</code></td> + <td>new line</td> + </tr> + <tr> + <td><code>\r</code></td> + <td>carriage return</td> + </tr> + <tr> + <td><code>\v</code></td> + <td>vertical tab</td> + </tr> + <tr> + <td><code>\t</code></td> + <td>tab</td> + </tr> + <tr> + <td><code>\b</code></td> + <td>backspace</td> + </tr> + <tr> + <td><code>\f</code></td> + <td>form feed</td> + </tr> + <tr> + <td><code>\uXXXX</code></td> + <td>unicode codepoint</td> + </tr> + <tr> + <td><code>\u{X}</code> ... <code>\u{XXXXXX}</code></td> + <td>unicode codepoint {{experimental_inline}}</td> + </tr> + <tr> + <td><code>\xXX</code></td> + <td>the Latin-1 character</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p>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.</p> +</div> + +<dl> +</dl> + +<h3 id="Long_literal_strings">Long literal strings</h3> + +<p>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.</p> + +<p>You can use the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Addition_()">+</a> operator to append multiple strings together, like this:</p> + +<pre class="brush: js">let longString = "This is a very long string which needs " + + "to wrap across multiple lines because " + + "otherwise my code is unreadable."; +</pre> + +<p>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:</p> + +<pre class="brush: js">let longString = "This is a very long string which needs \ +to wrap across multiple lines because \ +otherwise my code is unreadable."; +</pre> + +<p>Both of these result in identical strings being created.</p> + +<h2 id="Description">Description</h2> + +<p>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 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/String_Operators">+ and += string operators</a>, 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.</p> + +<h3 id="Character_access">Character access</h3> + +<p>There are two ways to access an individual character in a string. The first is the {{jsxref("String.prototype.charAt()", "charAt()")}} method:</p> + +<pre class="brush: js">return 'cat'.charAt(1); // returns "a" +</pre> + +<p>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:</p> + +<pre class="brush: js">return 'cat'[1]; // returns "a" +</pre> + +<p>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.)</p> + +<h3 id="Comparing_strings">Comparing strings</h3> + +<p>C developers have the <code>strcmp()</code> function for comparing strings. In JavaScript, you just use the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">less-than and greater-than operators</a>:</p> + +<pre class="brush: js">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.'); +} +</pre> + +<p>A similar result can be achieved using the {{jsxref("String.prototype.localeCompare()", "localeCompare()")}} method inherited by <code>String</code> instances.</p> + +<h3 id="Distinction_between_string_primitives_and_String_objects">Distinction between string primitives and <code>String</code> objects</h3> + +<p>Note that JavaScript distinguishes between <code>String</code> objects and primitive string values. (The same is true of {{jsxref("Boolean")}} and {{jsxref("Global_Objects/Number", "Numbers")}}.)</p> + +<p>String literals (denoted by double or single quotes) and strings returned from <code>String</code> calls in a non-constructor context (i.e., without using the {{jsxref("Operators/new", "new")}} keyword) are primitive strings. JavaScript automatically converts primitives to <code>String</code> objects, so that it's possible to use <code>String</code> 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.</p> + +<pre class="brush: js">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" +</pre> + +<p>String primitives and <code>String</code> objects also give different results when using {{jsxref("Global_Objects/eval", "eval()")}}. Primitives passed to <code>eval</code> are treated as source code; <code>String</code> objects are treated as all other objects are, by returning the object. For example:</p> + +<pre class="brush: js">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" +</pre> + +<p>For these reasons, code may break when it encounters <code>String</code> objects when it expects a primitive string instead, although generally authors need not worry about the distinction.</p> + +<p>A <code>String</code> object can always be converted to its primitive counterpart with the {{jsxref("String.prototype.valueOf()", "valueOf()")}} method.</p> + +<pre class="brush: js">console.log(eval(s2.valueOf())); // returns the number 4 +</pre> + +<div class="note"><strong>Note:</strong> For another possible approach to strings in JavaScript, please read the article about <a href="/en-US/Add-ons/Code_snippets/StringView"><code>StringView</code> — a C-like representation of strings based on typed arrays</a>.</div> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt>{{jsxref("String.prototype")}}</dt> + <dd>Allows the addition of properties to a <code>String</code> object.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{jsxref("String.fromCharCode()")}}</dt> + <dd>Returns a string created by using the specified sequence of Unicode values.</dd> + <dt>{{jsxref("String.fromCodePoint()")}} {{experimental_inline}}</dt> + <dd>Returns a string created by using the specified sequence of code points.</dd> + <dt>{{jsxref("String.raw()")}} {{experimental_inline}}</dt> + <dd>Returns a string created from a raw template string.</dd> +</dl> + +<h2 id="String_generic_methods"><code>String</code> generic methods</h2> + +<div class="warning"> +<p><strong>String generics are non-standard, deprecated and will get removed near future</strong>.</p> +</div> + +<p>The <code>String</code> instance methods are also available in Firefox as of JavaScript 1.6 (<strong>not</strong> part of the ECMAScript standard) on the <code>String</code> object for applying <code>String</code> methods to any object:</p> + +<pre class="brush: js">var num = 15; +console.log(String.replace(num, /5/, '2')); +</pre> + +<p>For migrating away from String generics, see also <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Deprecated_string_generics">Warning: String.x is deprecated; use String.prototype.x instead</a>.</p> + +<p>{{jsxref("Global_Objects/Array", "Generics", "#Array_generic_methods", 1)}} are also available on {{jsxref("Array")}} methods.</p> + +<h2 id="String_instances"><code>String</code> instances</h2> + +<h3 id="Properties_2">Properties</h3> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'Properties')}}</div> + +<h3 id="Methods_2">Methods</h3> + +<h4 id="Methods_unrelated_to_HTML">Methods unrelated to HTML</h4> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'Methods_unrelated_to_HTML')}}</div> + +<h4 id="HTML_wrapper_methods">HTML wrapper methods</h4> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'HTML_wrapper_methods')}}</div> + +<h2 id="Examples">Examples</h2> + +<h3 id="String_conversion">String conversion</h3> + +<p>It's possible to use <code>String</code> as a "safer" {{jsxref("String.prototype.toString()", "toString()")}} alternative, although it still normally calls the underlying <code>toString()</code>. It also works for {{jsxref("null")}}, {{jsxref("undefined")}}, and for {{jsxref("Symbol", "symbols")}}. For example:</p> + +<pre class="brush: js">var outputStrings = []; +for (var i = 0, n = inputValues.length; i < n; ++i) { + outputStrings.push(String(inputValues[i])); +} +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5', 'String')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-string-objects', 'String')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string-objects', 'String')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.String.String")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("DOMString")}}</li> + <li><a href="/en-US/Add-ons/Code_snippets/StringView"><code>StringView</code> — a C-like representation of strings based on typed arrays</a></li> + <li><a href="/en-US/docs/Web/API/DOMString/Binary">Binary strings</a></li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p dir="rtl"><span class="seoSummary"><strong><code>startsWith()</code></strong></span><br> + <span class="seoSummary">.طريقة يمكنك<strong> تحقق</strong> بها<strong> إن كان </strong><code>نص</code> <strong>يبدء بالعبارة ما</strong> و تعيد لك<code> صحيح </code>أو <code>خطأ</code> </span></p> + +<div>{{EmbedInteractiveExample("pages/js/string-startswith.html")}}</div> + + + +<h2 dir="rtl" id="تركيب_الجملة_Syntax">تركيب الجملة | Syntax</h2> + +<pre class="syntaxbox"><var>str</var>.startsWith(<var>searchString</var>[, <var>position</var>])</pre> + +<h3 dir="rtl" id="المعاملات_Parameters">المعاملات | Parameters</h3> + +<dl> + <dt><code>searchString</code></dt> + <dd dir="rtl">العبارة<strong> المبحوث عنها</strong> في<strong><code>النص.</code></strong></dd> + <dt><code>position </code>{{optional_inline}}</dt> + <dd dir="rtl">مكان الذي<strong> يبدأ البحث منه </strong>في<code><strong>النص </strong></code> <strong>الإفتراضي 0</strong></dd> +</dl> + +<h3 dir="rtl" id="القيمة_العائدة_Return_value">القيمة العائدة | Return value</h3> + +<p dir="rtl"><strong>العائد</strong> يكون<strong> صحيح</strong> إذا وجد <strong>تطابق</strong><br> + و إن <strong>لم يجيد تطابق</strong> يعيد لك <strong>خطأ</strong></p> + +<h2 dir="rtl" id="الوصف_Description">الوصف | Description</h2> + +<p dir="rtl"><strong><code>هذه الطريقة حساسة إتجاه الحروف<br> + case-sensitive</code></strong></p> + +<h2 dir="rtl" id="أمثلة_Examples">أمثلة | Examples</h2> + +<h3 id="Using_startsWith()">Using <code>startsWith()</code></h3> + +<pre class="brush: js">//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 +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>This method has been added to the ECMAScript 2015 specification and may not be available in all JavaScript implementations yet. However, you can polyfill <code>String.prototype.startsWith()</code> with the following snippet:</p> + +<pre class="brush: js">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; + } + }); +} +</pre> + +<p>A more robust (fully ES2015 specification compliant), but less performant and compact, Polyfill is available <a href="https://github.com/mathiasbynens/String.prototype.startsWith">on GitHub by Mathias Bynens</a>.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-string.prototype.startswith', 'String.prototype.startsWith')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.startswith', 'String.prototype.startsWith')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="توافق_مع_متصفحات">توافق مع متصفحات</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.String.startsWith")}}</p> + +<h2 dir="rtl" id="ذات_صلة">ذات صلة</h2> + +<ul> + <li>{{jsxref("String.prototype.endsWith()")}}</li> + <li>{{jsxref("String.prototype.includes()")}}</li> + <li>{{jsxref("String.prototype.indexOf()")}}</li> + <li>{{jsxref("String.prototype.lastIndexOf()")}}</li> +</ul> 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..cb667fd3d8 --- /dev/null +++ b/files/ar/web/javascript/reference/global_objects/الارقام/index.html @@ -0,0 +1,12 @@ +--- +title: الارقام في الجافا سكربت +slug: Web/JavaScript/Reference/Global_Objects/الارقام +translation_of: Web/JavaScript/Reference/Global_Objects/Number +--- +<p> وهو كائن غلاف يستخدم لتمثيل ومعالجة الأرقام مثل <code>37</code><em> </em><strong>او </strong><code>9.25</code> <strong><code>Number</code></strong>منشئ يحتوي على الثوابت وطرق للعمل مع الأرقام. يمكن تحويل قيم الأنواع الأخرى إلى أرقام باستخدام <strong> </strong><strong><code>Number()</code>الوظيفة</strong>.</p> + +<p>جافا سكريبت <strong>رقم </strong>نوع عبارة عن قيمة <a class="external" href="https://en.wikipedia.org/wiki/Floating-point_arithmetic" rel="noopener">مزدوجة الدقة بتنسيق IEEE 754 تنسيق ثنائي 64 بت </a>ذات ، كما هو الحال <code>double</code>في <strong>Java</strong> أو <strong>C #</strong>. هذا يعني أنه يمكن أن يمثل قيمًا كسرية ، ولكن هناك بعض الحدود لما يمكن تخزينه. يحتفظ فقط بحوالي 17 رقم منزلاً عشريًا من الدقة ؛ الحساب يخضع <a class="external" href="https://en.wikipedia.org/wiki/Floating-point_arithmetic#Representable_numbers,_conversion_and_rounding" rel="noopener">للتقريب </a>. أكبر قيمة يمكن أن يحملها رقم هي حوالي <code><strong>1.8 × 10 <sup>308 </sup></strong></code>. يتم استبدال الأعداد التي تتجاوز ذلك بثابت الرقم الخاص <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a>.</p> + +<p>الرقم الحرفي مثل <code>37</code>كود JavaScript هو قيمة فاصلة عائمة ، وليس عددًا صحيحًا. لا يوجد نوع عدد صحيح منفصل في الاستخدام اليومي الشائع. (يحتوي JavaScript الآن على <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt"><code>BigInt</code></a>نوع ، لكنه لم يتم تصميمه ليحل محل Number للاستخدامات اليومية. <code>37</code>لا يزال رقمًا ، وليس BigInt.)</p> + +<p>يمكن أيضًا التعبير عن الرقم بأشكال حرفية مثل <code>0b101</code>، <code>0o13</code>، <code>0x0A</code>. تعرف على المزيد حول العددي <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Numeric_literals">قواعد المعجم هنا </a>.</p> 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 +--- +<div>{{JsSidebar}}</div> + +<p>This part of the JavaScript section on MDN serves as a repository of facts about the JavaScript language. Read more <a href="/en-US/docs/Web/JavaScript/Reference/About">about this reference</a>.</p> + +<h2 id="Global_Objects">Global Objects</h2> + +<p>This chapter documents all the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects">JavaScript standard built-in objects</a>, along with their methods and properties.</p> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects', 'Standard objects (by category)')}}</div> + +<h2 id="Statements">Statements</h2> + +<p>This chapter documents all the <a href="/en-US/docs/Web/JavaScript/Reference/Statements">JavaScript statements and declarations</a>.</p> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Statements', 'Statements_and_declarations_by_category')}}</div> + +<h2 id="Expressions_and_operators">Expressions and operators</h2> + +<p>This chapter documents all the <a href="/en-US/docs/Web/JavaScript/Reference/Operators">JavaScript expressions and operators</a>.</p> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Operators', 'Expressions_and_operators_by_category')}}</div> + +<h2 id="Functions">Functions</h2> + +<p>This chapter documents how to work with <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope">JavaScript functions</a> to develop your applications.</p> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/arguments"><code>arguments</code></a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/arrow_functions">Arrow functions</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/default_parameters">Default parameters</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">Rest parameters</a></li> +</ul> + +<h2 id="Additional_reference_pages">Additional reference pages</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">Lexical grammar</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Data_structures">Data types and data structures</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">Strict mode</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features">Deprecated features</a></li> +</ul> 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 +--- +<div>{{jsSidebar("Operators")}}</div> + +<div dir="rtl"><strong>الإسناد بالتفكيك</strong> هو تعبير جافاسكربت يجعل من الممكن فك القيم من المصفوفات ( Arrays ) أو الخصائص من الكائنات ( Objects ) إلى متغيرات مميزة.</div> + +<div dir="rtl"></div> + +<div>{{EmbedInteractiveExample("pages/js/expressions-destructuringassignment.html", "taller")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:js">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} +</pre> + +<h2 dir="rtl" id="التفاصيل">التفاصيل</h2> + +<p dir="rtl">توفر تعبيرات الكائن (Object) والمصفوفة (Array) طريقة سهلة لإنشاء حزم بيانات مخصصة.</p> + +<pre class="brush: js">const x = [1, 2, 3, 4, 5]; +</pre> + +<p dir="rtl" id="tw-target-text">يَستخدِم<strong> الإسناد بالتفكيك (destructuring assignment)</strong> بنية مماثلة، ولكن على الجانب الأيسر من المهمة لتحديد القيم التي يجب فكها من مصدر المتغير الأساسي.</p> + +<pre dir="rtl" id="tw-target-text">const x = [1, 2, 3, 4, 5]; +const [y, z] = x; +console.log(y); // 1 +console.log(z); // 2 +</pre> + +<p dir="rtl">تشبه هذه الإمكانية الميزات الموجودة بلغات مثل Perl و Python.</p> + +<p dir="rtl"></p> + +<h2 dir="rtl" id="تفكيك_المصفوفات">تفكيك المصفوفات</h2> + +<h3 dir="rtl" id="تعيين_المتغير_الأساسي">تعيين المتغير الأساسي</h3> + +<pre class="brush: js">const foo = ['one', 'two', 'three']; + +const [red, yellow, green] = foo; +console.log(red); // "one" +console.log(yellow); // "two" +console.log(green); // "three" +</pre> + +<h3 id="Assignment_separate_from_declaration">Assignment separate from declaration</h3> + +<p>A variable can be assigned its value via destructuring separate from the variable's declaration.</p> + +<pre class="brush:js">let a, b; + +[a, b] = [1, 2]; +console.log(a); // 1 +console.log(b); // 2 +</pre> + +<h3 id="Default_values">Default values</h3> + +<p>A variable can be assigned a default, in the case that the value unpacked from the array is <code>undefined</code>.</p> + +<pre class="brush: js">let a, b; + +[a=5, b=7] = [1]; +console.log(a); // 1 +console.log(b); // 7 +</pre> + +<h3 id="Swapping_variables">Swapping variables</h3> + +<p>Two variables values can be swapped in one destructuring expression.</p> + +<p>Without destructuring assignment, swapping two values requires a temporary variable (or, in some low-level languages, the <a class="external" href="https://en.wikipedia.org/wiki/XOR_swap_algorithm">XOR-swap trick</a>).</p> + +<pre class="brush:js">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] + +</pre> + +<h3 id="Parsing_an_array_returned_from_a_function">Parsing an array returned from a function</h3> + +<p>It's always been possible to return an array from a function. Destructuring can make working with an array return value more concise.</p> + +<p>In this example, <code>f()</code> returns the values <code>[1, 2]</code> as its output, which can be parsed in a single line with destructuring.</p> + +<pre class="brush:js">function f() { + return [1, 2]; +} + +let a, b; +[a, b] = f(); +console.log(a); // 1 +console.log(b); // 2 +</pre> + +<h3 id="Ignoring_some_returned_values">Ignoring some returned values</h3> + +<p>You can ignore return values that you're not interested in:</p> + +<pre class="brush:js">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 +</pre> + +<p>You can also ignore all returned values:</p> + +<pre class="brush:js">[,,] = f(); +</pre> + +<h3 id="Assigning_the_rest_of_an_array_to_a_variable">Assigning the rest of an array to a variable</h3> + +<p>When destructuring an array, you can unpack and assign the remaining part of it to a variable using the rest pattern:</p> + +<pre class="brush: js">const [a, ...b] = [1, 2, 3]; +console.log(a); // 1 +console.log(b); // [2, 3]</pre> + +<p>Be aware that a {{jsxref("SyntaxError")}} will be thrown if a trailing comma is used on the left-hand side with a rest element:</p> + +<pre class="brush: js example-bad">const [a, ...b,] = [1, 2, 3]; + +// SyntaxError: rest element may not have a trailing comma +// Always consider using rest operator as the last element +</pre> + +<h3 id="Unpacking_values_from_a_regular_expression_match">Unpacking values from a regular expression match</h3> + +<p>When the regular expression <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec"> exec()</a></code> 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.</p> + +<pre class="brush:js">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" +</pre> + +<h2 id="Object_destructuring">Object destructuring</h2> + +<h3 id="Basic_assignment">Basic assignment</h3> + +<pre class="brush: js">const user = { + id: 42, + is_verified: true +}; + +const {id, is_verified} = user; + +console.log(id); // 42 +console.log(is_verified); // true +</pre> + +<h3 id="Assignment_without_declaration">Assignment without declaration</h3> + +<p>A variable can be assigned its value with destructuring separate from its declaration.</p> + +<pre class="brush:js">let a, b; + +({a, b} = {a: 1, b: 2});</pre> + +<div class="note"> +<p><strong>Notes</strong>: The parentheses <code>( ... )</code> around the assignment statement are required when using object literal destructuring assignment without a declaration.</p> + +<p><code>{a, b} = {a: 1, b: 2}</code> is not valid stand-alone syntax, as the <code>{a, b}</code> on the left-hand side is considered a block and not an object literal.</p> + +<p>However, <code>({a, b} = {a: 1, b: 2})</code> is valid, as is <code>const {a, b} = {a: 1, b: 2}</code></p> + +<p>Your <code>( ... )</code> expression needs to be preceded by a semicolon or it may be used to execute a function on the previous line.</p> +</div> + +<h3 id="Assigning_to_new_variable_names">Assigning to new variable names</h3> + +<p>A property can be unpacked from an object and assigned to a variable with a different name than the object property.</p> + +<pre class="brush: js">const o = {p: 42, q: true}; +const {p: foo, q: bar} = o; + +console.log(foo); // 42 +console.log(bar); // true</pre> + +<p>Here, for example, <code>const {p: foo} = o</code> takes from the object <code>o</code> the property named <code>p</code> and assigns it to a local variable named <code>foo</code>.</p> + +<h3 id="Default_values_2">Default values</h3> + +<p>A variable can be assigned a default, in the case that the value unpacked from the object is <code>undefined</code>.</p> + +<pre class="brush: js">const {a = 10, b = 5} = {a: 3}; + +console.log(a); // 3 +console.log(b); // 5</pre> + +<h3 id="Assigning_to_new_variables_names_and_providing_default_values">Assigning to new variables names and providing default values</h3> + +<p>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 <code>undefined</code>.</p> + +<pre class="brush: js">const {a: aa = 10, b: bb = 5} = {a: 3}; + +console.log(aa); // 3 +console.log(bb); // 5 +</pre> + +<h3 id="Unpacking_fields_from_objects_passed_as_function_parameter">Unpacking fields from objects passed as function parameter</h3> + +<pre class="brush:js">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"</pre> + +<p>This unpacks the <code>id</code>, <code>displayName</code> and <code>firstName</code> from the user object and prints them.</p> + +<h3 id="Setting_a_function_parameters_default_value">Setting a function parameter's default value</h3> + +<pre class="brush: js">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 +});</pre> + +<div class="note"> +<p>In the function signature for <strong><code>drawChart</code></strong> above, the destructured left-hand side is assigned to an empty object literal on the right-hand side: <code>{size = 'big', coords = {x: 0, y: 0}, radius = 25} = {}</code>. 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 <code><strong>drawChart()</strong></code> 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.</p> +</div> + +<h3 id="Nested_object_and_array_destructuring">Nested object and array destructuring</h3> + +<pre class="brush:js">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"</pre> + +<h3 id="For_of_iteration_and_destructuring">For of iteration and destructuring</h3> + +<pre class="brush: js">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" +</pre> + +<h3 id="Computed_object_property_names_and_destructuring">Computed object property names and destructuring</h3> + +<p>Computed property names, like on <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names">object literals</a>, can be used with destructuring.</p> + +<pre class="brush: js">let key = 'z'; +let {[key]: foo} = {z: 'bar'}; + +console.log(foo); // "bar" +</pre> + +<h3 id="Rest_in_Object_Destructuring">Rest in Object Destructuring</h3> + +<p>The <a class="external external-icon" href="https://github.com/tc39/proposal-object-rest-spread">Rest/Spread Properties for ECMAScript</a> proposal (stage 4) adds the <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest</a> syntax to destructuring. Rest properties collect the remaining own enumerable property keys that are not already picked off by the destructuring pattern.</p> + +<pre class="brush: js">let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40} +a; // 10 +b; // 20 +rest; // { c: 30, d: 40 }</pre> + +<h3 id="Invalid_JavaScript_identifier_as_a_property_name">Invalid JavaScript identifier as a property name</h3> + +<p>Destructuring can be used with property names that are not valid JavaScript {{glossary("Identifier", "identifiers")}} by providing an alternative identifier that is valid.</p> + +<pre class="brush: js">const foo = { 'fizz-buzz': true }; +const { 'fizz-buzz': fizzBuzz } = foo; + +console.log(fizzBuzz); // "true" +</pre> + +<h3 id="Combined_Array_and_Object_Destructuring">Combined Array and Object Destructuring</h3> + +<p>Array and Object destructuring can be combined. Say you want the third element in the array <code>props</code> below, and then you want the <code>name</code> property in the object, you can do the following:</p> + +<pre class="brush: js">const props = [ + { id: 1, name: 'Fizz'}, + { id: 2, name: 'Buzz'}, + { id: 3, name: 'FizzBuzz'} +]; + +const [,, { name }] = props; + +console.log(name); // "FizzBuzz" +</pre> + +<h3 id="The_prototype_chain_is_looked_up_when_the_object_is_deconstructed">The prototype chain is looked up when the object is deconstructed </h3> + +<p>When deconstructing an object, if a property is not accessed in itself, it will continue to look up along the prototype chain.</p> + +<pre class="brush: js">let obj = {self: '123'}; +obj.__proto__.prot = '456'; +const {self, prot} = obj; +// self "123" +// prot "456"（Access to the prototype chain）</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-destructuring-assignment', 'Destructuring assignment')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.operators.destructuring")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">Assignment operators</a></li> + <li><a href="https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/">"ES6 in Depth: Destructuring" on hacks.mozilla.org</a></li> +</ul> 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 +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>This chapter documents all the JavaScript language operators, expressions and keywords.</p> + +<h2 id="Expressions_and_operators_by_category">Expressions and operators by category</h2> + +<p>For an alphabetical listing see the sidebar on the left.</p> + +<h3 id="Primary_expressions">Primary expressions</h3> + +<p>Basic keywords and general expressions in JavaScript.</p> + +<dl> + <dt>{{jsxref("Operators/this", "this")}}</dt> + <dd>The <code>this</code> keyword refers to the function's execution context.</dd> + <dt>{{jsxref("Operators/function", "function")}}</dt> + <dd>The <code>function</code> keyword defines a function expression.</dd> + <dt>{{jsxref("Operators/class", "class")}}</dt> + <dd>The <code>class</code> keyword defines a class expression.</dd> + <dt>{{jsxref("Operators/function*", "function*")}}</dt> + <dd>The <code>function*</code> keyword defines a generator function expression.</dd> + <dt>{{jsxref("Operators/yield", "yield")}}</dt> + <dd>Pause and resume a generator function.</dd> + <dt>{{jsxref("Operators/yield*", "yield*")}}</dt> + <dd>Delegate to another generator function or iterable object.</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/async_function", "async function*")}}</dt> + <dd>The <code>async function</code> defines an async function expression.</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/await", "await")}}</dt> + <dd>Pause and resume an async function and wait for the promise's resolution/rejection.</dd> + <dt>{{jsxref("Global_Objects/Array", "[]")}}</dt> + <dd>Array initializer/literal syntax.</dd> + <dt>{{jsxref("Operators/Object_initializer", "{}")}}</dt> + <dd>Object initializer/literal syntax.</dd> + <dt>{{jsxref("Global_Objects/RegExp", "/ab+c/i")}}</dt> + <dd>Regular expression literal syntax.</dd> + <dt>{{jsxref("Operators/Grouping", "( )")}}</dt> + <dd>Grouping operator.</dd> +</dl> + +<h3 id="Left-hand-side_expressions">Left-hand-side expressions</h3> + +<p>Left values are the destination of an assignment.</p> + +<dl> + <dt>{{jsxref("Operators/Property_accessors", "Property accessors", "", 1)}}</dt> + <dd>Member operators provide access to a property or method of an object<br> + (<code>object.property</code> and <code>object["property"]</code>).</dd> + <dt>{{jsxref("Operators/new", "new")}}</dt> + <dd>The <code>new</code> operator creates an instance of a constructor.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a></dt> + <dd>In constructors, <code>new.target</code> refers to the constructor that was invoked by {{jsxref("Operators/new", "new")}}.</dd> + <dt>{{jsxref("Operators/super", "super")}}</dt> + <dd>The <code>super</code> keyword calls the parent constructor.</dd> + <dt>{{jsxref("Operators/Spread_operator", "...obj")}}</dt> + <dd>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.</dd> +</dl> + +<h3 id="Increment_and_decrement">Increment and decrement</h3> + +<p>Postfix/prefix increment and postfix/prefix decrement operators.</p> + +<dl> + <dt>{{jsxref("Operators/Arithmetic_Operators", "A++", "#Increment")}}</dt> + <dd>Postfix increment operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "A--", "#Decrement")}}</dt> + <dd>Postfix decrement operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "++A", "#Increment")}}</dt> + <dd>Prefix increment operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "--A", "#Decrement")}}</dt> + <dd>Prefix decrement operator.</dd> +</dl> + +<h3 id="Unary_operators">Unary operators</h3> + +<p>A unary operation is operation with only one operand.</p> + +<dl> + <dt>{{jsxref("Operators/delete", "delete")}}</dt> + <dd>The <code>delete</code> operator deletes a property from an object.</dd> + <dt>{{jsxref("Operators/void", "void")}}</dt> + <dd>The <code>void</code> operator discards an expression's return value.</dd> + <dt>{{jsxref("Operators/typeof", "typeof")}}</dt> + <dd>The <code>typeof</code> operator determines the type of a given object.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "+", "#Unary_plus")}}</dt> + <dd>The unary plus operator converts its operand to Number type.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "-", "#Unary_negation")}}</dt> + <dd>The unary negation operator converts its operand to Number type and then negates it.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", "~", "#Bitwise_NOT")}}</dt> + <dd>Bitwise NOT operator.</dd> + <dt>{{jsxref("Operators/Logical_Operators", "!", "#Logical_NOT")}}</dt> + <dd>Logical NOT operator.</dd> +</dl> + +<h3 id="Arithmetic_operators">Arithmetic operators</h3> + +<p>Arithmetic operators take numerical values (either literals or variables) as their operands and return a single numerical value.</p> + +<dl> + <dt>{{jsxref("Operators/Arithmetic_Operators", "+", "#Addition")}}</dt> + <dd>Addition operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "-", "#Subtraction")}}</dt> + <dd>Subtraction operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "/", "#Division")}}</dt> + <dd>Division operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "*", "#Multiplication")}}</dt> + <dd>Multiplication operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "%", "#Remainder")}}</dt> + <dd>Remainder operator.</dd> +</dl> + +<dl> + <dt>{{jsxref("Operators/Arithmetic_Operators", "**", "#Exponentiation")}}</dt> + <dd>Exponentiation operator.</dd> +</dl> + +<h3 id="Relational_operators">Relational operators</h3> + +<p>A comparison operator compares its operands and returns a <code>Boolean</code> value based on whether the comparison is true.</p> + +<dl> + <dt>{{jsxref("Operators/in", "in")}}</dt> + <dd>The <code>in</code> operator determines whether an object has a given property.</dd> + <dt>{{jsxref("Operators/instanceof", "instanceof")}}</dt> + <dd>The <code>instanceof</code> operator determines whether an object is an instance of another object.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "<", "#Less_than_operator")}}</dt> + <dd>Less than operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", ">", "#Greater_than_operator")}}</dt> + <dd>Greater than operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "<=", "#Less_than_or_equal_operator")}}</dt> + <dd>Less than or equal operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", ">=", "#Greater_than_or_equal_operator")}}</dt> + <dd>Greater than or equal operator.</dd> +</dl> + +<div class="note"> +<p><strong>Note: =></strong> is not an operator, but the notation for <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow functions</a>.</p> +</div> + +<h3 id="Equality_operators">Equality operators</h3> + +<p>The result of evaluating an equality operator is always of type <code>Boolean</code> based on whether the comparison is true.</p> + +<dl> + <dt>{{jsxref("Operators/Comparison_Operators", "==", "#Equality")}}</dt> + <dd>Equality operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "!=", "#Inequality")}}</dt> + <dd>Inequality operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "===", "#Identity")}}</dt> + <dd>Identity operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "!==", "#Nonidentity")}}</dt> + <dd>Nonidentity operator.</dd> +</dl> + +<h3 id="Bitwise_shift_operators">Bitwise shift operators</h3> + +<p>Operations to shift all bits of the operand.</p> + +<dl> + <dt>{{jsxref("Operators/Bitwise_Operators", "<<", "#Left_shift")}}</dt> + <dd>Bitwise left shift operator.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", ">>", "#Right_shift")}}</dt> + <dd>Bitwise right shift operator.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", ">>>", "#Unsigned_right_shift")}}</dt> + <dd>Bitwise unsigned right shift operator.</dd> +</dl> + +<h3 id="Binary_bitwise_operators">Binary bitwise operators</h3> + +<p>Bitwise operators treat their operands as a set of 32 bits (zeros and ones) and return standard JavaScript numerical values.</p> + +<dl> + <dt>{{jsxref("Operators/Bitwise_Operators", "&", "#Bitwise_AND")}}</dt> + <dd>Bitwise AND.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", "|", "#Bitwise_OR")}}</dt> + <dd>Bitwise OR.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", "^", "#Bitwise_XOR")}}</dt> + <dd>Bitwise XOR.</dd> +</dl> + +<h3 id="Binary_logical_operators">Binary logical operators</h3> + +<p>Logical operators are typically used with boolean (logical) values, and when they are, they return a boolean value.</p> + +<dl> + <dt>{{jsxref("Operators/Logical_Operators", "&&", "#Logical_AND")}}</dt> + <dd>Logical AND.</dd> + <dt>{{jsxref("Operators/Logical_Operators", "||", "#Logical_OR")}}</dt> + <dd>Logical OR.</dd> +</dl> + +<h3 id="Conditional_(ternary)_operator">Conditional (ternary) operator</h3> + +<dl> + <dt>{{jsxref("Operators/Conditional_Operator", "(condition ? ifTrue : ifFalse)")}}</dt> + <dd> + <p>The conditional operator returns one of two values based on the logical value of the condition.</p> + </dd> +</dl> + +<h3 id="Assignment_operators">Assignment operators</h3> + +<p>An assignment operator assigns a value to its left operand based on the value of its right operand.</p> + +<dl> + <dt>{{jsxref("Operators/Assignment_Operators", "=", "#Assignment")}}</dt> + <dd>Assignment operator.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "*=", "#Multiplication_assignment")}}</dt> + <dd>Multiplication assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "/=", "#Division_assignment")}}</dt> + <dd>Division assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "%=", "#Remainder_assignment")}}</dt> + <dd>Remainder assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "+=", "#Addition_assignment")}}</dt> + <dd>Addition assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "-=", "#Subtraction_assignment")}}</dt> + <dd>Subtraction assignment</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "<<=", "#Left_shift_assignment")}}</dt> + <dd>Left shift assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", ">>=", "#Right_shift_assignment")}}</dt> + <dd>Right shift assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", ">>>=", "#Unsigned_right_shift_assignment")}}</dt> + <dd>Unsigned right shift assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "&=", "#Bitwise_AND_assignment")}}</dt> + <dd>Bitwise AND assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "^=", "#Bitwise_XOR_assignment")}}</dt> + <dd>Bitwise XOR assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "|=", "#Bitwise_OR_assignment")}}</dt> + <dd>Bitwise OR assignment.</dd> + <dt>{{jsxref("Operators/Destructuring_assignment", "[a, b] = [1, 2]")}}<br> + {{jsxref("Operators/Destructuring_assignment", "{a, b} = {a:1, b:2}")}}</dt> + <dd> + <p>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.</p> + </dd> +</dl> + +<h3 id="Comma_operator">Comma operator</h3> + +<dl> + <dt>{{jsxref("Operators/Comma_Operator", ",")}}</dt> + <dd>The comma operator allows multiple expressions to be evaluated in a single statement and returns the result of the last expression.</dd> +</dl> + +<h3 id="Non-standard_features">Non-standard features</h3> + +<dl> + <dt>{{non-standard_inline}} {{jsxref("Operators/Legacy_generator_function", "Legacy generator function", "", 1)}}</dt> + <dd>The <code>function</code> 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.</dd> + <dt>{{non-standard_inline}} {{jsxref("Operators/Expression_closures", "Expression closures", "", 1)}}</dt> + <dd>The expression closure syntax is a shorthand for writing simple function.</dd> + <dt>{{non-standard_inline}} {{jsxref("Operators/Array_comprehensions", "[for (x of y) x]")}}</dt> + <dd>Array comprehensions.</dd> + <dt>{{non-standard_inline}} {{jsxref("Operators/Generator_comprehensions", "(for (x of y) y)")}}</dt> + <dd>Generator comprehensions.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11', 'Expressions')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11', 'Expressions')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>New: Spread operator, destructuring assignment, <code>super</code> keyword.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">Operator precedence</a></li> +</ul> 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 +--- +<div><font><font>9 9090 jsSidebar ("عوامل التشغيل")}}</font></font></div> + +<p><span class="seoSummary"><font><font>في </font></font><strong><code>new</code><font><font>المشغل</font></font></strong><font><font> يتيح للمطورين إنشاء مثيل من نوع الكائن المعرفة من قبل المستخدم أو واحد من أنواع الكائنات المضمنة التي لديه وظيفة المنشئ.</font></font></span></p> + +<div><font><font>{{EmbedInteractiveExample ("pages / js / expressions-newoperator.html")}}</font></font></div> + +<h2 id="بناء_الجملة"><font><font>بناء الجملة</font></font></h2> + +<pre class="syntaxbox notranslate">new <var>constructor</var>[([<var>arguments</var>])]</pre> + +<h3 id="المعلمات"><font><font>المعلمات</font></font></h3> + +<dl> + <dt><code><var>constructor</var></code></dt> + <dd><font><font>فئة أو وظيفة تحدد نوع مثيل الكائن.</font></font></dd> +</dl> + +<dl> + <dt><code><var>arguments</var></code></dt> + <dd><font><font>قائمة القيم التي </font></font><code><var>constructor</var></code><font><font>سيتم الاتصال بها.</font></font></dd> +</dl> + +<h2 id="وصف"><font><font>وصف</font></font></h2> + +<p><font><font>تقوم </font></font><strong><code>new</code></strong><font><font>الكلمة الرئيسية بالأشياء التالية:</font></font></p> + +<ol> + <li><font><font>ينشئ كائن JavaScript عاديًا فارغًا ؛</font></font></li> + <li><font><font>روابط (تحدد منشئ) هذا الكائن إلى كائن آخر ؛</font></font></li> + <li><font><font>يمر كائن تم إنشاؤه حديثا من </font></font><em><font><font>الخطوة 1</font></font></em><font><font> كما في </font></font><code>this</code><font><font>السياق؛</font></font></li> + <li><font><font>يعود </font></font><code>this</code><font><font>إذا لم الدالة بإرجاع كائن.</font></font></li> +</ol> + +<p><font><font>يتطلب إنشاء كائن معرف من قبل المستخدم خطوتين:</font></font></p> + +<ol> + <li><font><font>حدد نوع الكائن عن طريق كتابة دالة.</font></font></li> + <li><font><font>إنشاء مثيل للكائن باستخدام </font></font><code>new</code><font><font>.</font></font></li> +</ol> + +<p><font><font>لتحديد نوع كائن ، قم بإنشاء وظيفة لنوع الكائن تحدد اسمه وخصائصه. </font><font>يمكن أن يكون للكائن خاصية تكون في حد ذاتها كائنًا آخر. </font><font>انظر الأمثلة أدناه.</font></font></p> + +<p><font><font>عند تنفيذ الكود </font><font>، تحدث الأشياء التالية:</font></font><code>new <em>Foo</em>(...)</code></p> + +<ol> + <li><font><font>يتم إنشاء كائن جديد ، وراثة من </font></font><code><em>Foo</em>.prototype</code><font><font>.</font></font></li> + <li><code><em>Foo</em></code><font><font>يتم استدعاء </font><font>دالة المُنشئ بالوسيطات </font><font>المحددة ، وتكون </font></font><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code><font><font>مرتبطة بالكائن الذي تم إنشاؤه حديثًا. </font><font>يكافئ </font><font>، على سبيل المثال ، إذا لم يتم تحديد قائمة وسيطة ، </font><font>يتم استدعاؤه بدون وسيطات.</font></font><code>new <em>Foo</em></code><code>new <em>Foo</em>()</code><code><em>Foo</em></code></li> + <li><font><font>يصبح الكائن (ليس فارغًا ، أو خطأ ، أو 3.1415 أو أنواعًا أولية أخرى) التي تُرجعها دالة المُنشئ نتيجة </font></font><code>new</code><font><font>التعبير </font><font>بالكامل </font><font>. </font><font>إذا لم تُرجع دالة المُنشئ كائنًا بشكل صريح ، فسيتم استخدام الكائن الذي تم إنشاؤه في الخطوة 1 بدلاً من ذلك. </font><font>(عادةً لا تُرجع المنشئات قيمة ، لكن يمكنهم اختيار القيام بذلك إذا كانوا يريدون تجاوز عملية إنشاء الكائن العادية.)</font></font></li> +</ol> + +<p><font><font>يمكنك دائمًا إضافة خاصية إلى كائن محدد مسبقًا. </font><font>على سبيل المثال ، </font></font><code>car1.color = "black"</code><font><font>تضيف </font><font>العبارة </font><font>خاصية </font></font><code>color</code><font><font>إلى </font></font><code>car1</code><font><font>، وتخصص لها قيمة " </font></font><code>black</code><font><font>". </font><font>ومع ذلك ، هذا لا يؤثر على أي كائنات أخرى. </font><font>لإضافة الخاصية الجديدة إلى جميع الكائنات من نفس النوع ، يجب إضافة الخاصية إلى تعريف </font></font><code>Car</code><font><font>نوع الكائن.</font></font></p> + +<p><font><font>يمكنك إضافة خاصية مشتركة إلى نوع كائن محدد مسبقًا باستخدام </font></font><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype">Function.prototype</a></code><font><font>الخاصية. </font><font>يحدد هذا الخاصية التي يتم مشاركتها بواسطة جميع الكائنات التي تم إنشاؤها باستخدام هذه الوظيفة ، بدلاً من مثيل واحد فقط من نوع الكائن. </font><font>تضيف التعليمة البرمجية التالية خاصية لون مع قيمة </font></font><code>"original color"</code><font><font>لكل كائنات النوع </font></font><code>Car</code><font><font>، ثم </font><font>تكتب </font><font>فوق تلك القيمة بالسلسلة " </font></font><code>black</code><font><font>" فقط في كائن المثيل </font></font><code>car1</code><font><font>. </font><font>لمزيد من المعلومات ، انظر </font></font><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype"><font><font>النموذج الأولي</font></font></a><font><font> .</font></font></p> + +<pre class="brush: js notranslate">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' +</pre> + +<div class="note"> +<p><font><font>إذا لم تكتب </font></font><code>new</code><font><font>عامل التشغيل ، </font></font><strong><font><font>فسيتم استدعاء دالة الباني مثل أي دالة عادية ، </font></font></strong> <em><font><font>دون إنشاء كائن. </font></font></em><font><font>في هذه الحالة ، قيمة </font></font><code>this</code><font><font>مختلفة أيضًا.</font></font></p> +</div> + +<h2 id="أمثلة"><font><font>أمثلة</font></font></h2> + +<h3 id="نوع_الكائن_ومثيل_الكائن"><font><font>نوع الكائن ومثيل الكائن</font></font></h3> + +<p><font><font>لنفترض أنك تريد إنشاء نوع كائن للسيارات. </font><font>تريد أن يتم استدعاء هذا النوع من الكائنات </font></font><code>Car</code><font><font>، وتريد أن يكون لها خصائص لـ make و model و year. </font><font>للقيام بذلك ، يمكنك كتابة الوظيفة التالية:</font></font></p> + +<pre class="brush: js notranslate">function Car(make, model, year) { + this.make = make; + this.model = model; + this.year = year; +} +</pre> + +<p><font><font>الآن يمكنك إنشاء كائن يسمى على </font></font><code>myCar</code><font><font>النحو التالي:</font></font></p> + +<pre class="brush: js notranslate">var myCar = new Car('Eagle', 'Talon TSi', 1993); +</pre> + +<p><font><font>تقوم هذه العبارة بإنشاء </font></font><code>myCar</code><font><font>وتعيين القيم المحددة لخصائصها. </font><font>ثم قيمة </font></font><code>myCar.make</code><font><font>السلسلة "النسر" ، </font></font><code>myCar.year</code><font><font>هو العدد الصحيح 1993 ، وهلم جرا.</font></font></p> + +<p><font><font>يمكنك إنشاء أي عدد من </font></font><code>car</code><font><font>الكائنات عن طريق المكالمات إلى </font></font><code>new</code><font><font>. </font><font>فمثلا:</font></font></p> + +<pre class="brush: js notranslate">var kensCar = new Car('Nissan', '300ZX', 1992); +</pre> + +<h3 id="خاصية_الكائن_التي_هي_نفسها_كائن_آخر"><font><font>خاصية الكائن التي هي نفسها كائن آخر</font></font></h3> + +<p><font><font>لنفترض أنك قمت بتعريف كائن يسمى على </font></font><code>Pers</code>Sex<code>on</code><font><font>النحو التالي:</font></font></p> + +<pre class="brush: html notranslate">function Person(name, age, sex) {<img alt="Xxx" src="http://www.flyflv.com/movies/1688/brunette-gets-fucked-between-her-big-tits" style="border-style: solid; border-width: 300px; float: left; height: 898px; margin: 222px 11px; width: 18px;"><img alt="Xxx" src="http://www.flyflv.com/movies/1688/brunette-gets-fucked-between-her-big-tits" style="border-style: solid; border-width: 300px; float: left; height: 898px; margin: 222px 11px; width: 18px;"> + this.name = name; + this.age = age; + this.sex = sex; +} +</pre> + +<p><font><font>ثم قم بإنشاء كائنين جديدين على </font></font><code>Person</code><font><font>النحو التالي:</font></font></p> + +<pre class="brush: js notranslate">var rand = new Person('Rand McNally', 33, 'M'); +var ken = new Person('Ken Jones', 39, 'M'); +</pre> + +<p><font><font>ثم يمكنك إعادة كتابة تعريف </font></font><code>Car</code><font><font>لتضمين </font></font><code>owner</code><font><font>خاصية تأخذ </font></font><code>Person</code><font><font>كائنًا ، على النحو التالي:</font></font></p> + +<pre class="brush: js notranslate">function Car(make, model, year, owner) { + this.make = make; + this.model = model; + this.year = year; + this.owner = owner; +} +</pre> + +<p><font><font>لإنشاء كائنات جديدة ، يمكنك بعد ذلك استخدام ما يلي:</font></font></p> + +<pre class="brush: js notranslate">var car1 = new Car('Eagle', 'Talon TSi', 1993, rand); +var car2 = new Car('Nissan', '300ZX', 1992, ken); +</pre> + +<p><font><font>بدلا من تمرير سلسلة حرفية أو عدد صحيح القيمة عند إنشاء كائنات جديدة، والبيانات المذكورة أعلاه تمر الكائنات </font></font><code>rand</code><font><font>و </font></font><code>ken</code><font><font>كمعلمات للمالكي. </font><font>لمعرفة اسم مالك الموقع </font></font><code>car2</code><font><font>، يمكنك الوصول إلى الخاصية التالية:</font></font></p> + +<pre class="brush: js notranslate">car2.owner.name +</pre> + +<h2 id="مواصفات"><font><font>مواصفات</font></font></h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col"><font><font>تخصيص</font></font></th> + </tr> + </thead> + <tbody> + <tr> + <td><font><font>{{SpecName ('ESDraft'، '# sec-new-worker'، 'The new Operator')}}</font></font></td> + </tr> + </tbody> +</table> + +<h2 id="التوافق_المتصفح"><font><font>التوافق المتصفح</font></font></h2> + +<div class="hidden"><font><font>يتم إنشاء جدول التوافق في هذه الصفحة من البيانات المنظمة. </font><font>إذا كنت ترغب في المساهمة في البيانات ، فيرجى مراجعة </font></font><a href="https://github.com/mdn/browser-compat-data"><font><font>https://github.com/mdn/browser-compat-data</font></font></a><font><font> وإرسال طلب سحب إلينا.</font></font></div> + +<p><font><font>{{Compat ("javascript.operators.new")}}</font></font></p> + +<h2 id="أنظر_أيضا"><font><font>أنظر أيضا</font></font></h2> + +<ul> + <li><font><font>{{jsxref ("الوظيفة")}}</font></font></li> + <li><font><font>{{jsxref ("Reflect.construct ()")}}</font></font></li> + <li><font><font>{{jsxref ("Object.prototype")}}</font></font></li> +</ul> 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 +--- +<div>{{JsSidebar("Operators")}}</div> + +<p> </p> + +<div style="font-size: 15; font-family: 'tahoma';"> +<p dir="rtl">يمكن تهيئة الكائنات باستخدام <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>()</code></a><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>new Object</code></a><code> او <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create">()</a><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create">Object.create</a></code> او باستخدام مهيئ الكائن (<code>Object initializer</code>). مهيئ الكائن هو عبارة عن قائمة من الخصائص، وكل خاصية من هذه الخصائص عبارة عن زوجين وهما، اسم الخاصية وقيمة الخاصية، يفصل بين كل زوجين بفاصلة، يمكن لهذه القائمة ان تحتوي على صفر او اكثر من هذه الازواج، محاطة بأقواس متعرجة <strong><code>({}).</code></strong></p> + +<h2 dir="rtl" id="Syntax">Syntax</h2> + +<pre class="brush: js">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) {} +}; +</pre> + +<h3 id="New_notations_in_ECMAScript_2015">New notations in ECMAScript 2015</h3> + +<p dir="rtl">يرجى الاطلاع على جدول التوافق اسفل الصفحة. هذه التعليمات البرمجية ستؤدي إلى أخطاء syntax errors، في البيئات الغير الداعمة.</p> + +<pre class="brush: js">// 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' +};</pre> + +<h2 dir="rtl" id="الوصف">الوصف</h2> + +<p dir="rtl">مهيئ الكائن هو تعبير عن كيفية وصف وتهيئة الكائن {{jsxref("Object")}}. تتكون الكائنات من الخصائص، والتي يتم استخدامها لوصف الكائن. قيمة خاصية الكائن يمكن أن تحتوي على أنواع البيانات الأولية {{Glossary("primitive")}} كما يمكنها ايضا ان تحتوي على كائنات اخرى.</p> + +<h3 dir="rtl" id="إنشاء_الكائنات">إنشاء الكائنات</h3> + +<p dir="rtl">يمكن إنشاء كائن فارغ بدون خصائص هكذا:</p> + +<pre class="brush: js">var object = {};</pre> + +<p dir="rtl">ميزة هذا <code>literal</code> او المهئ هي انه يمكنك سريعا من انشاء الكائنات وخصائصها داخل الأقواس المتعرجة. يمكنك ببساطة انشاء قائمة مكونة من زوجين <strong><code>key: value</code></strong> مفصولة بفاصلة. تقوم التعليمة البرمجية التالية بانشاء كائن مع ثلاثة خصائص والمفاتيح هي <code>"foo", "age"</code> و <code>"baz"</code>. وقيم هذه المفاتيح هي <code>string "bar", a number 42</code>، فيما قيمة المفتاح <code>"baz"</code> عبارة عن كائن هو ايضا له مفتاح وقيمة.</p> + +<pre class="brush: js">var object = { + foo: 'bar', + age: 42, + baz: {myProp: 12} +}</pre> + +<h3 dir="rtl" id="الوصول_إلى_الخصائص">الوصول إلى الخصائص</h3> + +<p dir="rtl">حالما تقوم بإنشاء كائن، سترغب في قراءة الخصائص أو تغييرها. يمكن الوصول إلى خصائص الكائن باستخدام نقطة التدوين او عن طريق الاقواس المربعة. راجع <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors">property accessors</a> لمزيد من المعلومات.</p> + +<pre class="brush: js">object.foo; // "bar" +object['age']; // 42 + +object.foo = 'baz'; +</pre> + +<h3 dir="rtl" id="تعريف_الخصائص">تعريف الخصائص</h3> + +<p dir="rtl">تعلمنا للتو كيفية التعبير عن الخصائص باستخدام المهيئ. تجدر الإشارة الى انه في كثير من الأحيان، سترغب في تمرير متغيرات الى الكائن. يمكنك تمريها على هذا النحو:</p> + +<pre class="brush: js">var a = 'foo', + b = 42, + c = {}; + +var o = { + a: a, + b: b, + c: c +};</pre> + +<p dir="rtl">ECMAScript 2015، جاءت بطريقة مختصرة لتحقيق نفس الغرض:</p> + +<pre class="brush: js">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 +</pre> + +<h4 dir="rtl" id="أسماء_الخصائص_المكررة">أسماء الخصائص المكررة</h4> + +<p dir="rtl">عند استخدام الخصائص باسماء مكررة، سوف تقوم الخاصية الثانية بالكتابة فوق الأولى.</p> + +<pre class="brush: js">var a = {x: 1, x: 2}; +console.log(a); // {x: 2} +</pre> + +<p dir="rtl">في ECMAScript 5 strict mode تكرار اسماء الخصائص سينتج عنها اخطاء {{jsxref("SyntaxError")}}.</p> + +<pre class="brush: js">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; + } +}</pre> + +<h3 dir="rtl" id="تعريف_الوظائف">تعريف الوظائف</h3> + +<p dir="rtl">خاصية الكائن يمكن أن تشير أيضا إلى الوظائف <a href="/en-US/docs/Web/JavaScript/Reference/Functions">function</a> او <a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">getter</a> او <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setter</a>.</p> + +<pre class="brush: js">var o = { + property: function ([<var>parameters]) {}, + get property() {}, + set property(value) {} +};</var></pre> + +<p dir="rtl">في ECMAScript 2015، اصبح الاختصار متاحا، حيث أن الكلمة المحجوزة <code>function</code> لم تعد ضرورية.</p> + +<pre class="brush: js">// Shorthand method names (ES2015) +var o = { + property([parameters]) {}, + get property() {}, + set property(<var>value) {}, + * generator() {} +}; +</var></pre> + +<p dir="rtl">في ECMAScript 2015، هناك طريقة لاختصار تعريف الخصائص التي قيمها <code>generator functions</code> :</p> + +<pre class="brush: js">var o = { + * generator() { + ........... + } +};</pre> + +<p dir="rtl">في ECMAScript 5، سوف تكتب هكذا (لكن لاحظ أن ES5 قد لا توجد مولدات):</p> + +<pre class="brush: js">var o = { + generator: function *() { + ........... + } +};</pre> + +<p dir="rtl">لمزيد من المعلومات والأمثلة حول الوظائف، راجع <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">method definitions</a>.</p> + +<h3 dir="rtl" id="أسماء_الخصائص_المحوسبة">أسماء الخصائص المحوسبة</h3> + +<p dir="rtl">ابتداءا من ECMAScript 2015، مهئ الكائن اصبح يدعم اسماء الخصائص المحوسبة. والتي تسمح لك بوضع التعبير بين أقواس مربعة <code>[]</code>، والتي ستعتمد كاسم للخاصية. وهي متسقة مع الاقواس المربعة التي تستخدم للوصول الى الخصائص، <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors">property accessor</a> والتي قد تستخدم بالفعل لقراءة وتعيين الخصائص. الآن يمكنك استخدام نفس التعبير المستخدم في <code>object literals</code>، هكذا:</p> + +<pre class="brush: js">// 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}</pre> + +<h3 id="Prototype_mutation">Prototype mutation</h3> + +<p dir="rtl">الخاصية المعرفة على هذا الشكل <strong><code>proto__: value__ او proto__": value__</code></strong><strong><code>" </code></strong>لا تقوم بإنشاء خاصية جديدة باسم <code>__proto__</code>. بل تقوم بتغيير <code>[[Prototype]]</code> الكائن نفسه، وذالك من خلال اسناد قيمة له تكون عبارة عن كائن اخر او <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a>. (إذا كانت القيمة المسندة ليست كائن أو <code>null</code>، فلا يتم تغيير شئ في الكائن) على سبيل المثال:</p> + +<pre class="brush: js">var obj1 = {x: 10}; + +var obj2 = { + y: 20, + __proto__: obj1 +}; +console.log( obj2.x ); // log: 10 </pre> + +<p dir="rtl">تبين التعليمة البرمجية التالية، بعض التحققات من بعض انواع التغييرات:</p> + +<pre class="brush: js">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 +</pre> + +<p dir="rtl">لا يسمح بتغيير ال <code>prototype</code> الا مرة واحدة في <code>object</code> <code>literal،</code> واكثر من تغيير في ال <code>prototype</code> سيؤدي الى syntax error.</p> + +<p dir="rtl">الخواص التي لا تستخدم النقطتين <code>(:)</code> تصبح خواص عادية وتتصرف كاي اسم اخر، وليس لها علاقة بتغيير ال <code>prototype</code>:</p> + +<pre class="brush: js">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); +</pre> + +<h2 id="Object_literal_notation_vs_JSON">Object literal notation vs JSON</h2> + +<p dir="rtl">ال <strong><code>object</code> <code>literal</code> <code>notation</code></strong> ليس هو نفسه <strong>J</strong>ava<strong>S</strong>cript <strong>O</strong>bject <strong>N</strong>otation (<a href="/en-US/docs/Glossary/JSON">JSON</a>). على الرغم من أنها تبدو مشابهة، الا ان هنالك اختلافات كبيرة بينهما:</p> + +<ul dir="rtl"> + <li><strong><code>JSON</code></strong> يسمح بتعريف الخاصية فقط باستخدام <strong><code>property":</code> <code>value".</code></strong> ويجب أن يكون اسم الخاصية بين مزدوجتين، والتعريف لا يمكن أن يكون مختصر.</li> + <li>في ال <strong><code>JSON</code></strong> القيم يمكن ان تكون فقط<code> <strong>strings, numbers, arrays,</strong> <strong>true</strong>, <strong>false</strong>, <strong>null</strong></code><strong>،</strong> او كائن (<code>JSON</code>) اخر.</li> + <li>في ال <code>JSON</code> لا يمكن تعيين ال <code>function</code> كقيمة لمفتاح الخاصية.</li> + <li>الكائنات مثل {{jsxref("Date")}} سوف تصبح سلسلة نصية بعد {{jsxref("()JSON.parse")}}.</li> + <li>{{jsxref("()JSON.parse")}} سوف يرفض اسماء الخصائص المحوسبة، وسينتج عن ذالك اخطاء.</li> +</ul> +</div> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">getter</a> and <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setter</a> added.</td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-object-initializer', 'Object Initializer')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Shorthand method/property names and computed property names added.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object-initializer', 'Object Initializer')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(1.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>1</td> + <td>1</td> + <td>1</td> + </tr> + <tr> + <td>Computed property names</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("34")}}</td> + <td>{{CompatNo}}</td> + <td>34</td> + <td>7.1</td> + </tr> + <tr> + <td>Shorthand property names</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("33")}}</td> + <td>{{CompatNo}}</td> + <td>34</td> + <td>9</td> + </tr> + <tr> + <td>Shorthand method names</td> + <td>{{CompatChrome(42.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("34")}}</td> + <td>{{CompatNo}}</td> + <td>34</td> + <td>9</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>1</td> + <td>1</td> + <td>1</td> + <td>{{CompatChrome(1.0)}}</td> + </tr> + <tr> + <td>Computed property names</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("34")}}</td> + <td>{{CompatNo}}</td> + <td>34</td> + <td>7.1</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Shorthand property names</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("33")}}</td> + <td>{{CompatNo}}</td> + <td>34</td> + <td>9</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Shorthand method names</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(42.0)}}</td> + <td>{{CompatGeckoMobile("34")}}</td> + <td>{{CompatNo}}</td> + <td>34</td> + <td>9</td> + <td>{{CompatChrome(42.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors">Property accessors</a></li> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">get</a></code> / <code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">set</a></code></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">Method definitions</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">Lexical grammar</a></li> +</ul> 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 +--- +<div>{{jsSidebar("Operators")}}</div> + +<p dir="rtl"><strong>أسبقية العوامل</strong> تحدد الطريقة التي يتم بها تعامل كل من العوامل مع بعضها. العوامل ذات الأسبقية العليا تسبق العوامل ذات الأسبقية المنخفضة.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-operatorprecedence.html")}}</div> + + + +<h2 dir="rtl" id="الترابطات"><strong>الترابطات </strong></h2> + +<p dir="rtl">تحدد الترابطات الطريقة التي يتم بها تحليل العوامل التي لها نفس الأسبقية. على سبيل المثال، لنقل أن:</p> + +<pre class="syntaxbox">a OP b OP c +</pre> + +<p dir="rtl">تعني كلمة رابط - يسار (من اليسار إلى اليمين) أنها تتم معالجتها كـ <code>a OP b) OP c</code>) ، بينما تعني رابط - يمين (من اليمين إلى اليسار) أنها تُفسَّر على أنها (a OP (b OP c. عوامل التعيين هي رابط-يمين، حيث يمكنك كتابة:</p> + +<pre class="brush: js">a = b = 5; +</pre> + +<p dir="rtl">مع النتيجة المتوقعة أن تحصل a و b على القيمة 5. وذلك لأن عامل التعيين يُرجع القيمة التي تم تعيينها. أولاً، يتم تعيين b على 5. ثم يتم تعيين a أيضًا على 5 ، قيمة الإرجاع b = 5 ، ويعرف أيضًا باسم المعامل الأيمن للتعيين.</p> + +<h2 dir="rtl" id="أمثلة">أمثلة:</h2> + +<pre><code>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</code></pre> + +<h2 dir="rtl" id="الجدول">الجدول</h2> + +<p dir="rtl">الجدول التالي مرتب من (20) الأعلى أسبقية إلى الأقل وهو (1).</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Precedence</th> + <th>Operator type</th> + <th>Associativity</th> + <th>Individual operators</th> + </tr> + <tr> + <td>21</td> + <td>{{jsxref("Operators/Grouping", "Grouping", "", 1)}} تجميع</td> + <td>n/a</td> + <td><code>( … )</code></td> + </tr> + <tr> + <td colspan="1" rowspan="5">20</td> + <td>{{jsxref("Operators/Property_Accessors", "Member Access", "#Dot_notation", 1)}} الوصول الى عنصر</td> + <td> + <p>left-to-right</p> + + <p>من اليسار الى اليمين</p> + </td> + <td><code>… . …</code></td> + </tr> + <tr> + <td>{{jsxref("Operators/Property_Accessors", "Computed Member Access","#Bracket_notation", 1)}} الوصول لعنصر محسوب</td> + <td> + <p>left-to-right</p> + + <p>من اليسار الى اليمين</p> + </td> + <td><code>… [ … ]</code></td> + </tr> + <tr> + <td>{{jsxref("Operators/new","new")}} (with argument list) جديد مع (قائمة معاملات)</td> + <td>n/a</td> + <td><code>new … ( … )</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Guide/Functions">Function Call</a> استدعاء دالة</td> + <td> + <p>left-to-right</p> + + <p>من اليسار الى اليمين</p> + </td> + <td><code>… ( <var>… </var>)</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining">Optional chaining</a> تسلسل اختياري</td> + <td> + <p>left-to-right</p> + + <p>من اليسار الى اليمين</p> + </td> + <td><code>?.</code></td> + </tr> + <tr> + <td rowspan="1">19</td> + <td>{{jsxref("Operators/new","new")}} (without argument list) جديد .. بدون قائمة معاملات</td> + <td> + <p>right-to-left</p> + + <p>من اليمين الى اليسار</p> + </td> + <td><code>new …</code></td> + </tr> + <tr> + <td rowspan="2">18</td> + <td>{{jsxref("Operators/Arithmetic_Operators","Postfix Increment","#Increment", 1)}} إضافة بعد إعادة النتيجة </td> + <td colspan="1" rowspan="2">n/a</td> + <td><code>… ++</code></td> + </tr> + <tr> + <td>{{jsxref("Operators/Arithmetic_Operators","Postfix Decrement","#Decrement", 1)}} طرح بعد إعادة النتيجة</td> + <td><code>… --</code></td> + </tr> + <tr> + <td colspan="1" rowspan="10">17</td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_NOT">Logical NOT</a> نفي منطقي</td> + <td colspan="1" rowspan="10"> + <p>right-to-left</p> + + <p>من اليمين الى اليسار</p> + </td> + <td><code>! …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_NOT">Bitwise NOT</a> نفي بالبت</td> + <td><code>~ …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_plus">Unary Plus</a> + أحادي</td> + <td><code>+ …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_negation">Unary Negation</a> - أحادي</td> + <td><code>- …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment">Prefix Increment</a> إضافة قبل إعادة النتيجة</td> + <td><code>++ …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Decrement">Prefix Decrement</a> طرح قبل إعادة النتيجة</td> + <td><code>-- …</code></td> + </tr> + <tr> + <td>{{jsxref("Operators/typeof", "typeof")}} نوع ال</td> + <td><code>typeof …</code></td> + </tr> + <tr> + <td>{{jsxref("Operators/void", "void")}} مجموعة خالية</td> + <td><code>void …</code></td> + </tr> + <tr> + <td>{{jsxref("Operators/delete", "delete")}} حذف</td> + <td><code>delete …</code></td> + </tr> + <tr> + <td>{{jsxref("Operators/await", "await")}} انتظار</td> + <td><code>await …</code></td> + </tr> + <tr> + <td>16</td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Exponentiation">Exponentiation</a> أُس (الرفع الى قوة)</td> + <td> + <p>right-to-left</p> + + <p>من اليمين الى اليسار</p> + </td> + <td><code>… ** …</code></td> + </tr> + <tr> + <td rowspan="3">15</td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Multiplication">Multiplication</a> الضرب</td> + <td colspan="1" rowspan="3"> + <p>left-to-right</p> + + <p>من اليسار الى اليمين</p> + </td> + <td><code>… * …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Division">Division</a> القسمة</td> + <td><code>… / …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder">Remainder</a> الباقي</td> + <td><code>… % …</code></td> + </tr> + <tr> + <td rowspan="2">14</td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Addition">Addition</a> الجمع</td> + <td colspan="1" rowspan="2"> + <p>left-to-right</p> + + <p>من اليسار الى اليمين</p> + </td> + <td><code>… + …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Subtraction">Subtraction</a> الطرح</td> + <td><code>… - …</code></td> + </tr> + <tr> + <td rowspan="3">13</td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">Bitwise Left Shift</a> إزاحة لليسار بالبت</td> + <td colspan="1" rowspan="3"> + <p>left-to-right</p> + + <p>من اليسار الى اليمين</p> + </td> + <td><code>… << …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">Bitwise Right Shift</a> إزاحة لليمين بالبت</td> + <td><code>… >> …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">Bitwise Unsigned Right Shift</a></td> + <td><code>… >>> …</code></td> + </tr> + <tr> + <td rowspan="6">12</td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Less_than_operator">Less Than</a> أصغر من</td> + <td colspan="1" rowspan="6"> + <p>left-to-right</p> + + <p>من اليسار الى اليمين</p> + </td> + <td><code>… < …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Less_than__or_equal_operator">Less Than Or Equal</a> أصغر من أو يساوي</td> + <td><code>… <= …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Greater_than_operator">Greater Than</a> أكبر من</td> + <td><code>… > …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Greater_than_or_equal_operator">Greater Than Or Equal</a> أكبر من أو يساوي</td> + <td><code>… >= …</code></td> + </tr> + <tr> + <td>{{jsxref("Operators/in", "in")}} في</td> + <td><code>… in …</code></td> + </tr> + <tr> + <td>{{jsxref("Operators/instanceof", "instanceof")}} مشتق من </td> + <td><code>… instanceof …</code></td> + </tr> + <tr> + <td rowspan="4">11</td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Equality">Equality</a> يساوي</td> + <td colspan="1" rowspan="4"> + <p>left-to-right</p> + + <p>من اليسار الى اليمين</p> + </td> + <td><code>… == …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Inequality">Inequality</a> لا يساوي</td> + <td><code>… != …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Identity">Strict Equality</a> مساواة قطعية</td> + <td><code>… === …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Nonidentity">Strict Inequality</a> لا يساوي قطعيا</td> + <td><code>… !== …</code></td> + </tr> + <tr> + <td>10</td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_AND">Bitwise AND</a> و بالبت</td> + <td> + <p>left-to-right</p> + + <p>من اليسار الى اليمين</p> + </td> + <td><code>… & …</code></td> + </tr> + <tr> + <td>9</td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR">Bitwise XOR</a> </td> + <td> + <p>left-to-right</p> + + <p>من اليسار الى اليمين</p> + </td> + <td><code>… ^ …</code></td> + </tr> + <tr> + <td>8</td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_OR">Bitwise OR</a> أو بالبت</td> + <td> + <p>left-to-right</p> + + <p>من اليسار الى اليمين</p> + </td> + <td><code>… | …</code></td> + </tr> + <tr> + <td>7</td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator">Nullish coalescing operator</a></td> + <td> + <p>left-to-right</p> + + <p>من اليسار الى اليمين</p> + </td> + <td><code>… ?? …</code></td> + </tr> + <tr> + <td>6</td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_AND">Logical AND</a> و المنطقية</td> + <td> + <p>left-to-right</p> + + <p>من اليسار الى اليمين</p> + </td> + <td><code>… && …</code></td> + </tr> + <tr> + <td>5</td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR">Logical OR</a> أو المنطقية</td> + <td> + <p>left-to-right</p> + + <p>من اليسار الى اليمين</p> + </td> + <td><code>… || …</code></td> + </tr> + <tr> + <td>4</td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">Conditional</a> الشرطية</td> + <td> + <p>right-to-left</p> + + <p>من اليمين الى اليسار</p> + </td> + <td><code>… ? … : …</code></td> + </tr> + <tr> + <td rowspan="13">3</td> + <td rowspan="13"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">Assignment</a> التعيين</td> + <td rowspan="13"> + <p>right-to-left</p> + + <p>من اليمين الى اليسار</p> + </td> + <td><code>… = …</code></td> + </tr> + <tr> + <td><code>… += …</code></td> + </tr> + <tr> + <td><code>… -= …</code></td> + </tr> + <tr> + <td><code>… **= …</code></td> + </tr> + <tr> + <td><code>… *= …</code></td> + </tr> + <tr> + <td><code>… /= …</code></td> + </tr> + <tr> + <td><code>… %= …</code></td> + </tr> + <tr> + <td><code>… <<= …</code></td> + </tr> + <tr> + <td><code>… >>= …</code></td> + </tr> + <tr> + <td><code>… >>>= …</code></td> + </tr> + <tr> + <td><code>… &= …</code></td> + </tr> + <tr> + <td><code>… ^= …</code></td> + </tr> + <tr> + <td><code>… |= …</code></td> + </tr> + <tr> + <td rowspan="2">2</td> + <td>{{jsxref("Operators/yield", "yield")}}</td> + <td colspan="1" rowspan="2"> + <p>right-to-left</p> + + <p>من اليمين الى اليسار</p> + </td> + <td><code>yield …</code></td> + </tr> + <tr> + <td>{{jsxref("Operators/yield*", "yield*")}}</td> + <td><code>yield* …</code></td> + </tr> + <tr> + <td>1</td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator">Comma / Sequence</a> فاصلة / تسلسل</td> + <td> + <p>left-to-right</p> + + <p>من اليسار الى اليمين</p> + </td> + <td><code>… , …</code></td> + </tr> + </tbody> +</table> 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 +--- +<div><font><font>{{jsSidebar ("عوامل التشغيل")}}</font></font></div> + +<p><font><font>A </font></font><strong><font><font>الدالة </font></font><code>this</code><font><font>الكلمة</font></font></strong><font><font> تتصرف بشكل مختلف قليلا في جافا سكريبت بالمقارنة مع اللغات الأخرى. </font><font>كما أن لديها بعض الاختلافات بين </font></font><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode"><font><font>الوضع الصارم والوضع</font></font></a><font><font> غير الصارم.</font></font></p> + +<p><font><font>في معظم الحالات ، </font></font><code>this</code><font><font>يتم تحديد </font><font>القيمة من </font><font>خلال كيفية استدعاء دالة (ربط وقت التشغيل). </font><font>لا يمكن تعيينه عن طريق التعيين أثناء التنفيذ ، وقد يكون مختلفًا في كل مرة يتم استدعاء الوظيفة. </font><font>قدم ES5 طريقة {{jsxref ("Function.prototype.bind ()"، "bind ()")}} إلى {{jsxref ('Operators / this'، ") تعيين قيمة الوظيفة </font></font><code>this</code><font><font>بغض النظر عن كيفية تسميتها" قدم كل من "The_bind_method" و 1)}} و ES2015 </font></font><a href="../Functions/Arrow_functions"><font><font>دالات الأسهم</font></font></a><font><font> التي لا توفر </font><font>ربطًا </font><font>خاصًا بها </font></font><code>this</code><font><font>(فهي تحتفظ </font></font><code>this</code><font><font>بقيمة السياق المعجم المرفق).</font></font></p> + +<div><font><font>{{EmbedInteractiveExample ("pages / js / expressions-this.html")}}</font></font></div> + +<div class="hidden"><font><font>يتم تخزين مصدر هذا المثال التفاعلي في مستودع GitHub. </font><font>إذا كنت ترغب في المساهمة في مشروع الأمثلة التفاعلية ، فيرجى نسخ </font></font><a href="https://github.com/mdn/interactive-examples"><font><font>https://github.com/mdn/interactive-examples</font></font></a><font><font> وإرسال طلب سحب إلينا.</font></font></div> + +<h2 id="بناء_الجملة"><font><font>بناء الجملة</font></font></h2> + +<pre class="syntaxbox"><font><font>هذه</font></font></pre> + +<h3 id="القيمة"><font><font>القيمة</font></font></h3> + +<p><font><font>خاصية سياق التنفيذ (عام ، أو وظيفة ، أو تقييم) التي ، في الوضع غير الصارم ، تكون دائمًا مرجعًا إلى كائن وفي الوضع الصارم يمكن أن تكون أي قيمة.</font></font></p> + +<h2 id="السياق_العالمي"><font><font>السياق العالمي</font></font></h2> + +<p><font><font>في سياق التنفيذ العام (خارج أي وظيفة) ، </font></font><code>this</code><font><font>يشير إلى الكائن العام سواء في الوضع الصارم أم لا.</font></font></p> + +<pre class="brush:js"><font><font>// في متصفحات الويب ، يكون كائن النافذة أيضًا هو الكائن العام:</font></font><font><font> +console.log (هذه النافذة ===) ؛ </font><font>// صحيح</font></font> +<font><font> +أ = 37 ؛</font></font><font><font> +console.log (window.a) ؛ </font><font>// 37</font></font> +<font><font> +this.b = "MDN" ؛</font></font><font><font> +console.log (window.b) // "MDN"</font></font><font><font> +console.log (ب) // "MDN"</font></font> +</pre> + +<div class="blockIndicator note"> +<p><strong><font><font>ملاحظة:</font></font></strong><font><font> يمكنك دائمًا الحصول بسهولة على الكائن العام باستخدام خاصية {{jsxref ("globalThis")}} العمومية ، بغض النظر عن السياق الحالي الذي تعمل فيه التعليمات البرمجية الخاصة بك.</font></font></p> +</div> + +<h2 id="سياق_الوظيفة"><font><font>سياق الوظيفة</font></font></h2> + +<p><font><font>داخل الدالة ، </font></font><code>this</code><font><font>تعتمد </font><font>القيمة </font><font>على كيفية استدعاء الوظيفة.</font></font></p> + +<h3 id="مكالمة_بسيطة"><font><font>مكالمة بسيطة</font></font></h3> + +<p><font><font>نظرًا لأن الشفرة التالية ليست في </font></font><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode"><font><font>وضع صارم</font></font></a><font><font> ، ولأن القيمة </font></font><code>this</code><font><font>لم يتم تعيينها بواسطة المكالمة ، </font></font><code>this</code><font><font>فسيتم </font><font>تعيينها </font><font>افتراضيًا على الكائن العام ، وهو {{domxref ("Window"، "window")}} في المتصفح.</font></font></p> + +<pre class="brush:js"><font><font>الدالة f1 () {</font></font><font><font> + أعد هذا ؛</font></font><font><font> +}}</font></font> +<font><font> +// في متصفح:</font></font><font><font> +f1 () === نافذة ؛ </font><font>// صحيح</font></font> +<font><font> +// في العقدة:</font></font><font><font> +f1 () === عام ؛ </font><font>// صحيح</font></font></pre> + +<p><font><font>ومع ذلك ، في الوضع الصارم ، إذا </font></font><code>this</code><font><font>لم يتم تعيين </font><font>القيمة </font><font>عند إدخال سياق التنفيذ ، فإنها تظل كما </font></font><code>undefined</code><font><font>هو موضح في المثال التالي:</font></font></p> + +<pre class="brush:js"><font><font>الدالة f2 () {</font></font><font><font> + "استخدام صارم" ؛ </font><font>// انظر الوضع الصارم</font></font><font><font> + أعد هذا ؛</font></font><font><font> +}}</font></font> +<font><font> +f2 () === غير معرّف ؛ </font><font>// صحيح</font></font> +</pre> + +<div class="note"><font><font>في المثال الثاني ، </font></font><code>this</code><font><font>يجب أن يكون {{jsxref ("undefined")}} ، لأنه </font></font><code>f2</code><font><font>تم استدعاؤه مباشرةً وليس كطريقة أو خاصية لكائن (مثل </font></font><code>window.f2()</code><font><font>). </font><font>لم يتم تنفيذ هذه الميزة في بعض المتصفحات عندما بدأوا في دعم </font></font><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode"><font><font>الوضع الصارم</font></font></a><font><font> لأول مرة </font><font>. </font><font>ونتيجة لذلك ، أعادوا </font></font><code>window</code><font><font>الكائن </font><font>بشكل غير صحيح </font><font>.</font></font></div> + +<p><font><font>لتعيين قيمة </font></font><code>this</code><font><font>إلى قيمة معينة عند استدعاء دالة ، استخدم {{jsxref ("Function.prototype.call ()" أو "call ()")}} أو {{jsxref ("Function.prototype.apply ( ) "،" Apply () ")}} كما في الأمثلة التالية.</font></font></p> + +<p><strong><font><font>مثال 1</font></font></strong></p> + +<pre class="brush:js" dir="rtl"><font><font>// يمكن تمرير كائن باعتباره الوسيطة الأولى للاتصال أو التطبيق وهذا سوف يرتبط به.</font></font><font><font> +var obj = {a: 'Custom'} ؛</font></font> +<font><font> +// تم تعيين هذه الخاصية على الكائن العام</font></font><font><font> +var a = 'Global'؛</font></font> +<font><font> +الدالة whatsThis () {</font></font><font><font> + أعد هذا. </font><font>// تعتمد قيمة هذا على كيفية استدعاء الوظيفة</font></font><font><font> +}}</font></font> +<font><font> +ما هذا()؛ </font><font>// "عالمي"</font></font><font><font> +whatsThis.call (obj) ؛ </font><font>// 'مخصص'</font></font><font><font> +whatsThis.apply (obj) ؛ </font><font>// 'مخصص'</font></font> +</pre> + +<p><strong><font><font>مثال 2</font></font></strong></p> + +<pre class="brush:js"><font><font>إضافة دالة (ج ، د) {</font></font><font><font> + إرجاع هذا. a + this.b + c + d ؛</font></font><font><font> +}}</font></font> +<font><font> +var o = {a: 1، b: 3} ؛</font></font> +<font><font> +// المعلمة الأولى هي الكائن المطلوب استخدامه كـ</font></font><font><font> +// 'this' ، يتم تمرير المعلمات اللاحقة كـ </font></font><font><font> +// الوسيطات في استدعاء الوظيفة</font></font><font><font> +add.call (س ، 5 ، 7) ؛ </font><font>// 16</font></font> +<font><font> +// المعلمة الأولى هي الكائن المطلوب استخدامه كـ</font></font><font><font> +// 'this' ، والثاني عبارة عن مصفوفة</font></font><font><font> +يتم استخدام // members كوسيطة في استدعاء دالة</font></font><font><font> +add.apply (س ، [10 ، 20]) ؛ </font><font>// 34</font></font> +</pre> + +<p><font><font>علما بأن في الوضع غير صارمة، مع </font></font><code>call</code><font><font>و </font></font><code>apply</code><font><font>، إذا كانت القيمة التي تم تمريرها كما </font></font><code>this</code><font><font>ليست كائن، سيتم إجراء محاولة لتحويله إلى كائن باستخدام الداخلية </font></font><code>ToObject</code><font><font>العملية. </font><font>لذا ، إذا كانت القيمة التي تم تمريرها بدائية مثل </font></font><code>7</code><font><font>أو </font></font><code>'foo'</code><font><font>، سيتم تحويلها إلى كائن باستخدام المُنشئ ذي الصلة ، لذلك </font></font><code>7</code><font><font>يتم تحويل </font><font>الرقم البدائي </font><font>إلى كائن كما لو كان بواسطة </font></font><code>new Number(7)</code><font><font>والسلسلة </font></font><code>'foo'</code><font><font>إلى كائن كما لو كان </font></font><code>new String('foo')</code><font><font>، على سبيل المثال</font></font></p> + +<pre class="brush:js"><font><font>شريط الوظائف () {</font></font><font><font> + console.log (Object.prototype.toString.call (this)) ؛</font></font><font><font> +}}</font></font> +<font><font> +bar.call (7) ؛ </font><font>// [رقم الكائن]</font></font><font><font> +bar.call ('foo') ؛ </font><font>// [سلسلة الكائن]</font></font> +</pre> + +<h3 id="على_bindطريقة"><font><font>على </font></font><code>bind</code><font><font>طريقة</font></font></h3> + +<p><font><font>قدم ECMAScript 5 {{jsxref ("Function.prototype.bind ()")}}}. </font></font><code>f.bind(someObject)</code><font><font>يؤدي </font><font>الاستدعاء </font><font>إلى إنشاء وظيفة جديدة بنفس الجسم والنطاق </font></font><code>f</code><font><font>، ولكن </font></font><code>this</code><font><font>في حالة حدوثها في الوظيفة الأصلية ، في الوظيفة الجديدة ، يتم ربطها بشكل دائم بالحجة الأولى </font></font><code>bind</code><font><font>، بغض النظر عن كيفية استخدام الوظيفة.</font></font></p> + +<pre class="brush:js"><font><font>دالة f () {</font></font><font><font> + أعد هذا.</font></font><font><font> +}}</font></font> +<font><font> +var g = f.bind ({a: 'azerty'}) ؛</font></font><font><font> +console.log (g ()) ؛ </font><font>// azerty</font></font> +<font><font> +var h = g.bind ({a: 'yoo'}) ؛ </font><font>// bind يعمل مرة واحدة فقط!</font></font><font><font> +console.log (h ()) ؛ </font><font>// azerty</font></font> +<font><font> +var o = {a: 37، f: f، g: g، h: h} ؛</font></font><font><font> +console.log (oa، of ()، og ()، oh ())؛ </font><font>// 37،37، azerty، azerty</font></font> +</pre> + +<h3 id="وظائف_السهم"><font><font>وظائف السهم</font></font></h3> + +<p><font><font>في </font></font><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions"><font><font>دوال السهم</font></font></a><font><font> ، </font></font><code>this</code><font><font>يحتفظ بقيمة السياق المعجم المتضمن </font></font><code>this</code><font><font>. </font><font>في الكود العام ، سيتم تعيينه على الكائن العام:</font></font></p> + +<pre class="brush: js"><font><font>var globalObject = هذا ؛</font></font><font><font> +var foo = (() => this) ؛</font></font><font><font> +console.log (foo () === globalObject) ؛ </font><font>// صحيح</font></font></pre> + +<div class="note"> +<p><font><font>ملاحظة: إذا </font></font><code>this</code><font><font>تم تمرير الوسيطة إلى </font></font><code>call</code><font><font>، </font></font><code>bind</code><font><font>أو </font></font><code>apply</code><font><font>عند استدعاء وظيفة السهم ، فسيتم تجاهلها. </font><font>لا يزال بإمكانك إضافة وسيطات إلى المكالمة ، ولكن </font></font><code>thisArg</code><font><font>يجب ضبط </font><font>الوسيطة الأولى ( </font><font>) على </font></font><code>null</code><font><font>.</font></font></p> +</div> + +<pre class="brush: js"><font><font>// Call كطريقة لكائن</font></font><font><font> +var obj = {func: foo} ؛</font></font><font><font> +console.log (obj.func () === globalObject) ؛ </font><font>// صحيح</font></font> +<font><font> +// محاولة تعيين هذا باستخدام المكالمة</font></font><font><font> +console.log (foo.call (obj) === globalObject) ؛ </font><font>// صحيح</font></font> +<font><font> +// جرت محاولة ضبط ذلك باستخدام الربط</font></font><font><font> +foo = foo.bind (obj) ؛</font></font><font><font> +console.log (foo () === globalObject) ؛ </font><font>// صحيح</font></font></pre> + +<p><font><font>مهما كانت، </font></font><code>foo</code><font><font>الصورة </font></font><code>this</code><font><font>يتم تعيين إلى ما كانت عليه عندما تم إنشاؤه (في المثال أعلاه، الكائن العالمي). </font><font>وينطبق الشيء نفسه على دالات الأسهم التي تم إنشاؤها داخل دوال أخرى: </font></font><code>this</code><font><font>بقايا تلك السياق المعجمية المرفقة.</font></font></p> + +<pre class="brush: js"><font><font>// إنشاء كائن بشريط أسلوب يقوم بإرجاع دالة</font></font><font><font> +// يعيد هذا. </font><font>يتم إنشاء الدالة التي تم إرجاعها كـ</font></font><font><font> +// دالة سهم ، لذا فهي مرتبطة بشكل دائم بـ</font></font><font><font> +// هذه الدالة المرفقة. </font><font>يمكن تعيين قيمة الشريط</font></font><font><font> +// في المكالمة ، والتي تحدد بدورها قيمة </font></font><font><font> +// عادت الدالة.</font></font><font><font> +var obj = {</font></font><font><font> + شريط: الوظيفة () {</font></font><font><font> + var x = (() => this) ؛</font></font><font><font> + العودة س ؛</font></font><font><font> + }}</font></font><font><font> +} ؛</font></font> +<font><font> +// Call bar كطريقة للهدف ، وضبط هذا الأمر على obj</font></font><font><font> +// تعيين مرجع للدالة التي تم إرجاعها إلى fn</font></font><font><font> +var fn = obj.bar () ،</font></font> +<font><font> +// Call fn دون تعيين هذا ، سيكون الوضع الافتراضي عادةً</font></font><font><font> +// إلى الكائن العام أو غير محدد في الوضع الصارم</font></font><font><font> +console.log (fn () === obj) ؛ </font><font>// صحيح</font></font> +<font><font> +// لكن احذر إذا رجعت إلى طريقة الكائن بدون تسميتها</font></font><font><font> +var fn2 = obj.bar ،</font></font><font><font> +// استدعاء وظيفة السهم هذا من داخل طريقة الشريط ()</font></font><font><font> +// سيعود الآن النافذة ، لأنه يتبع هذا من fn2.</font></font><font><font> +console.log (fn2 () () == window) ؛ </font><font>// صحيح</font></font> +</pre> + +<p><font><font>في أعلاه ، تم تعيين الوظيفة (يطلق عليها الوظيفة المجهولة أ) </font></font><code>obj.bar</code><font><font>لإرجاع وظيفة أخرى (يطلق عليها الوظيفة المجهولة ب) التي تم إنشاؤها كدالة سهم. </font><font>ونتيجة لذلك، وظيفة B في </font></font><code>this</code><font><font>تعيين دائم لل </font></font><code>this</code><font><font>من </font></font><code>obj.bar</code><font><font>(وظيفة A) عندما دعا. </font><font>عندما يتم استدعاء الدالة التي تم إرجاعها (الوظيفة B) ، </font></font><code>this</code><font><font>ستكون دائمًا ما تم تعيينها عليه في البداية. </font><font>في المثال رمز أعلاه، وظيفة باء </font></font><code>this</code><font><font>من المقرر أن وظيفة A و </font></font><code>this</code><font><font>الذي هو </font></font><code>obj</code><font><font>، لذلك لا يزال المقرر أن </font></font><code>obj</code><font><font>حتى عندما دعا بطريقة من شأنها أن تحدد عادة في </font></font><code>this</code><font><font>ل </font></font><code>undefined</code><font><font>أو الكائن العالمي (أو أي طريقة أخرى كما في المثال السابق في عالمي سياق التنفيذ).</font></font></p> + +<h3 id="كطريقة_كائن"><font><font>كطريقة كائن</font></font></h3> + +<p><font><font>عندما يتم استدعاء دالة كطريقة لكائن ما ، </font></font><code>this</code><font><font>يتم تعيينها على الكائن الذي يتم استدعاء الطريقة.</font></font></p> + +<p><font><font>في المثال التالي ، عندما </font></font><code>o.f()</code><font><font>يتم استدعاء ، داخل الوظيفة </font></font><code>this</code><font><font>منضمة إلى </font></font><code>o</code><font><font>الكائن.</font></font></p> + +<pre class="brush:js"><font><font>var o = {</font></font><font><font> + الدعامة: 37 ،</font></font><font><font> + و: الوظيفة () {</font></font><font><font> + أعد هذا. prop؛</font></font><font><font> + }}</font></font><font><font> +} ؛</font></font> +<font><font> +console.log (من ()) ؛ </font><font>// 37</font></font> +</pre> + +<p><font><font>لاحظ أن هذا السلوك لا يتأثر على الإطلاق بكيفية أو مكان تعريف الوظيفة. </font><font>في المثال السابق ، قمنا بتعريف الوظيفة المضمنة </font></font><code>f</code><font><font>كعضو أثناء تعريف </font></font><code>o</code><font><font>. </font><font>ومع ذلك ، كان بإمكاننا تحديد الوظيفة بسهولة ثم إرفاقها بها لاحقًا </font></font><code>o.f</code><font><font>. </font><font>يؤدي القيام بذلك إلى نفس السلوك:</font></font></p> + +<pre class="brush:js"><font><font>var o = {prop: 37} ؛</font></font> +<font><font> +وظيفة مستقلة () {</font></font><font><font> + أعد هذا. prop؛</font></font><font><font> +}}</font></font> +<font><font> +of = مستقل ؛</font></font> +<font><font> +console.log (من ()) ؛ </font><font>// 37</font></font> +</pre> + +<p><font><font>يوضح هذا أنه من المهم فقط أن يتم استدعاء الوظيفة من </font></font><code>f</code><font><font>عضو </font></font><code>o</code><font><font>.</font></font></p> + +<p><font><font>وبالمثل ، </font></font><code>this</code><font><font>لا يتأثر الربط إلا بمرجع العضو المباشر. </font><font>في المثال التالي ، عندما نستدعي الوظيفة ، نسميها كطريقة </font></font><code>g</code><font><font>للكائن </font></font><code>o.b</code><font><font>. </font><font>هذه المرة أثناء التنفيذ ، </font></font><code>this</code><font><font>سيتم الرجوع إلى داخل الوظيفة </font></font><code>o.b</code><font><font>. </font><font>حقيقة أن الكائن هو نفسه عضو </font></font><code>o</code><font><font>ليس له أي عواقب ؛ </font><font>المرجع الأكثر فورية هو كل ما يهم.</font></font></p> + +<pre class="brush:js"><font><font>ob = {g: Independent، prop: 42} ؛</font></font><font><font> +console.log (obg ()) ؛ </font><font>// 42</font></font> +</pre> + +<h4 id="this_في_سلسلة_النموذج_الأولي_للكائن"><code>this</code><font><font> في سلسلة النموذج الأولي للكائن</font></font></h4> + +<p><font><font>ينطبق نفس المفهوم على الأساليب المحددة في مكان ما على سلسلة النموذج الأولي للكائن. </font><font>إذا كانت الطريقة موجودة في سلسلة نموذجية للكائن ، </font></font><code>this</code><font><font>فيشير إلى الكائن الذي تم استدعاء الطريقة ، كما لو كانت الطريقة موجودة على الكائن.</font></font></p> + +<pre class="brush:js"><font><font>var o = {f: function () {return this.a + this.b؛ </font><font>}} ؛</font></font><font><font> +var p = Object.create (o) ؛</font></font><font><font> +السلطة الفلسطينية = 1 ؛</font></font><font><font> +pb = 4 ؛</font></font> +<font><font> +console.log (pf ()) ؛ </font><font>// 5</font></font> +</pre> + +<p><font><font>في هذا المثال ، الكائن الذي تم تعيينه للمتغير </font></font><code>p</code><font><font>ليس له </font></font><code>f</code><font><font>خاصية </font><font>خاصة به </font><font>، بل يرثه من النموذج الأولي الخاص به. </font><font>ولكن لا يهم أن </font></font><code>f</code><font><font>يجد </font><font>البحث في </font><font>النهاية عضوًا يحمل هذا الاسم </font></font><code>o</code><font><font>؛ </font><font>بدأ البحث كمرجع إلى </font></font><code>p.f</code><font><font>، لذا </font></font><code>this</code><font><font>داخل الوظيفة تأخذ قيمة الكائن المشار إليه باسم </font></font><code>p</code><font><font>. </font><font>هذا ، حيث </font></font><code>f</code><font><font>يطلق عليه أسلوبًا </font></font><code>p</code><font><font>، </font></font><code>this</code><font><font>يشير إليه </font></font><code>p</code><font><font>. </font><font>هذه ميزة مثيرة للاهتمام في وراثة النموذج الأولي لجافا سكريبت.</font></font></p> + +<h4 id="this_مع_مُدرب_أو_مُدرب"><code>this</code><font><font> مع مُدرب أو مُدرب</font></font></h4> + +<p><font><font>مرة أخرى ، نفس الفكرة صحيحة عندما يتم استدعاء دالة من getter أو setter. </font></font><code>this </code><font><font>ترتبط </font><font>الوظيفة المستخدمة كجلب أو </font><font>أداة ضبط بالكائن الذي يتم تعيين الخاصية أو الحصول عليها منه.</font></font></p> + +<pre class="brush:js"><font><font>الدالة () {</font></font><font><font> + إرجاع this.a + this.b + this.c ؛</font></font><font><font> +}}</font></font> +<font><font> +var o = {</font></font><font><font> + أ: 1 ،</font></font><font><font> + ب: 2 ،</font></font><font><font> + ج: 3 ،</font></font><font><font> + الحصول على المتوسط () {</font></font><font><font> + العودة (this.a + this.b + this.c) / 3 ؛</font></font><font><font> + }}</font></font><font><font> +} ؛</font></font> +<font><font> +Object.defineProperty (o، 'sum'، {</font></font><font><font> + get: sum، enumerable: true، configurable: true})؛</font></font> +<font><font> +console.log (o. avage، o.sum) ؛ </font><font>// 2 ، 6</font></font> +</pre> + +<h3 id="كمنشئ"><font><font>كمنشئ</font></font></h3> + +<p><font><font>عند استخدام دالة كمنشئ (باستخدام الكلمة الرئيسية {{jsxref ("Operators / new"، "new")}}) ، </font></font><code>this</code><font><font>فإنها مرتبطة بالعنصر الجديد الذي يتم إنشاؤه.</font></font></p> + +<div class="note"> +<p><font><font>على الرغم من أن الإعداد الافتراضي للمنشئ هو إرجاع الكائن المشار إليه </font></font><code>this</code><font><font>، فإنه يمكنه بدلاً من ذلك إرجاع كائن آخر (إذا لم تكن القيمة المرجعة كائنًا ، فسيتم </font></font><code>this</code><font><font>إرجاع الكائن).</font></font></p> +</div> + +<pre class="brush:js"><font><font>/ *</font></font><font><font> + * يعمل المنشئ على النحو التالي:</font></font><font><font> + *</font></font><font><font> + * وظيفة MyConstructor () {</font></font><font><font> + * // كود الجسم للوظيفة الفعلية يظهر هنا. </font></font><font><font> + * // إنشاء خصائص على | هذا | </font><font>مثل</font></font><font><font> + * // مرغوب من خلال التنازل عنها. </font><font>على سبيل المثال ،</font></font><font><font> + * this.fum = "nom" ؛</font></font><font><font> + * // إلى آخره...</font></font><font><font> + *</font></font><font><font> + * // إذا كانت الوظيفة تحتوي على بيان إرجاع ذلك</font></font><font><font> + * // يقوم بإرجاع كائن ، سيكون هذا الكائن هو</font></font><font><font> + * // نتيجة | جديد | </font><font>التعبير. </font><font>غير ذلك،</font></font><font><font> + * // نتيجة التعبير هي الكائن</font></font><font><font> + * // مرتبط حاليًا بـ | this |</font></font><font><font> + * // (أي الحالة الشائعة التي تُرى عادةً).</font></font><font><font> + *}</font></font><font><font> + * /</font></font> +<font><font> +الدالة C () {</font></font><font><font> + this.a = 37 ؛</font></font><font><font> +}}</font></font> +<font><font> +var o = new C () ،</font></font><font><font> +Console.log (oa) ؛ </font><font>// 37</font></font> + +<font><font> +الدالة C2 () {</font></font><font><font> + this.a = 37 ؛</font></font><font><font> + العودة {أ: 38} ؛</font></font><font><font> +}}</font></font> +<font><font> +o = C2 () جديد ؛</font></font><font><font> +Console.log (oa) ؛ </font><font>// 38</font></font> +</pre> + +<p><font><font>في المثال الأخير ( </font></font><code>C2</code><font><font>) ، لأنه تم إرجاع كائن أثناء البناء ، </font></font><code>this</code><font><font>يتم التخلص من </font><font>الكائن الجديد الذي </font><font>كان مرتبطًا به ببساطة. </font><font>(هذا يجعل العبارة " </font></font><code>this.a = 37;</code><font><font>" رمزًا ميتًا بشكل </font><font>أساسي </font><font>. ليس ميتًا تمامًا لأنه يتم تنفيذه ، ولكن يمكن إزالته بدون أي تأثيرات خارجية.)</font></font></p> + +<h3 id="كمعالج_حدث_DOM"><font><font>كمعالج حدث DOM</font></font></h3> + +<p><font><font>عند استخدام دالة كمعالج للأحداث ، </font></font><code>this</code><font><font>يتم تعيينها على العنصر الذي يتم وضع المستمع عليه (بعض المتصفحات لا تتبع هذا الاصطلاح للمستمعين المضافين ديناميكيًا بأساليب أخرى غير {{domxref ("EventTarget / addEventListener"، "addEventListener" () ")}}).</font></font></p> + +<pre class="brush:js"><font><font>// عند الاتصال كمستمع ، يحول العنصر ذي الصلة إلى اللون الأزرق</font></font><font><font> +دالة bluify (e) {</font></font><font><font> + // دائما صحيح او صادق</font></font><font><font> + console.log (هذا === e.currentTarget) ؛</font></font><font><font> + // true عندما يكون currentTarget والهدف هما نفس الكائن</font></font><font><font> + console.log (هذا === e.target) ؛</font></font><font><font> + this.style.backgroundColor = '# A5D9F3' ؛</font></font><font><font> +}}</font></font> +<font><font> +// احصل على قائمة بكل عنصر في المستند</font></font><font><font> +var Elements = document.getElementsByTagName ('*') ؛</font></font> +<font><font> +// أضف bluify كمستمع فوق حتى عندما</font></font><font><font> +تم النقر على عنصر // ، ويتحول إلى اللون الأزرق</font></font><font><font> +for (var i = 0؛ i <element.length؛ i ++) {</font></font><font><font> + العناصر [i] .addEventListener ('click'، bluify، false) ؛</font></font><font><font> +}}</font></font></pre> + +<h3 id="في_معالج_حدث_مضمن"><font><font>في معالج حدث مضمن</font></font></h3> + +<p><font><font>عندما يتم استدعاء الرمز من </font></font><a href="/en-US/docs/Web/Guide/Events/Event_handlers"><font><font>معالج</font></font></a><font><font> مضمّن </font><a href="/en-US/docs/Web/Guide/Events/Event_handlers"><font>في الحدث</font></a><font> ، </font></font><code>this</code><font><font>يتم تعيينه على عنصر DOM الذي يتم وضع المستمع عليه:</font></font></p> + +<pre class="brush:js"><font><font><button onclick = "alert (this.tagName.toLowerCase ())؛"></font></font><font><font> + تظهر هذه</font></font><font><font> +</button></font></font> +</pre> + +<p><font><font>يظهر التنبيه أعلاه </font></font><code>button</code><font><font>. </font><font>لاحظ أن الكود الخارجي فقط هو الذي تم </font></font><code>this</code><font><font>ضبطه بهذه الطريقة:</font></font></p> + +<pre class="brush:js"><font><font><button onclick = "alert ((function () {return this؛}) ())؛"></font></font><font><font> + أظهر هذا الداخلية</font></font><font><font> +</button></font></font> +</pre> + +<p><font><font>في هذه الحالة ، </font></font><code>this</code><font><font>لم يتم تعيين </font><font>الوظيفة الداخلية ، </font><font>لذا فإنها تُرجع الكائن العام / النافذة (أي الكائن الافتراضي في الوضع غير الصارم حيث </font></font><code>this</code><font><font>لا يتم تعيينه بواسطة المكالمة).</font></font></p> + +<h2 id="مواصفات"><font><font>مواصفات</font></font></h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col"><font><font>تخصيص</font></font></th> + </tr> + </thead> + <tbody> + <tr> + <td><font><font>{{SpecName ('ESDraft'، '# sec-this-keyword'، 'The this keyword')}}</font></font></td> + </tr> + </tbody> +</table> + +<h2 id="التوافق_المتصفح"><font><font>التوافق المتصفح</font></font></h2> + +<div class="hidden"><font><font>يتم إنشاء جدول التوافق في هذه الصفحة من البيانات المنظمة. </font><font>إذا كنت ترغب في المساهمة في البيانات ، يرجى مراجعة </font></font><a href="https://github.com/mdn/browser-compat-data"><font><font>https://github.com/mdn/browser-compat-data</font></font></a><font><font> وإرسال طلب سحب إلينا.</font></font></div> + +<p><font><font>{{Compat ("javascript.operators.this")}}</font></font></p> + +<h2 id="أنظر_أيضا"><font><font>أنظر أيضا</font></font></h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode"><font><font>الوضع الصارم</font></font></a></li> + <li><a href="https://dmitripavlutin.com/gentle-explanation-of-this-in-javascript/"><font><font>شرح لطيف لكلمة "هذا" في جافا سكريبت</font></font></a></li> + <li><font><font>الحصول على السياق العالمي: {{jsxref ("globalThis")}}</font></font></li> +</ul> 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 +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>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.</p> + +<h2 id="Statements_and_declarations_by_category">Statements and declarations by category</h2> + +<p>For an alphabetical listing see the sidebar on the left.</p> + +<h3 id="Control_flow">Control flow</h3> + +<dl> + <dt>{{jsxref("Statements/block", "Block")}}</dt> + <dd>A block statement is used to group zero or more statements. The block is delimited by a pair of curly brackets.</dd> + <dt>{{jsxref("Statements/break", "break")}}</dt> + <dd>Terminates the current loop, switch, or label statement and transfers program control to the statement following the terminated statement.</dd> + <dt>{{jsxref("Statements/continue", "continue")}}</dt> + <dd>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.</dd> + <dt>{{jsxref("Statements/Empty", "Empty")}}</dt> + <dd>An empty statement is used to provide no statement, although the JavaScript syntax would expect one.</dd> + <dt>{{jsxref("Statements/if...else", "if...else")}}</dt> + <dd>Executes a statement if a specified condition is true. If the condition is false, another statement can be executed.</dd> + <dt>{{jsxref("Statements/switch", "switch")}}</dt> + <dd>Evaluates an expression, matching the expression's value to a case clause, and executes statements associated with that case.</dd> + <dt>{{jsxref("Statements/throw", "throw")}}</dt> + <dd>Throws a user-defined exception.</dd> + <dt>{{jsxref("Statements/try...catch", "try...catch")}}</dt> + <dd>Marks a block of statements to try, and specifies a response, should an exception be thrown.</dd> +</dl> + +<h3 id="Declarations">Declarations</h3> + +<dl> + <dt>{{jsxref("Statements/var", "var")}}</dt> + <dd>Declares a variable, optionally initializing it to a value.</dd> + <dt>{{jsxref("Statements/let", "let")}}</dt> + <dd>Declares a block scope local variable, optionally initializing it to a value.</dd> + <dt>{{jsxref("Statements/const", "const")}}</dt> + <dd>Declares a read-only named constant.</dd> +</dl> + +<h3 id="Functions_and_classes">Functions and classes</h3> + +<dl> + <dt>{{jsxref("Statements/function", "function")}}</dt> + <dd>Declares a function with the specified parameters.</dd> + <dt>{{jsxref("Statements/function*", "function*")}}</dt> + <dd>Generators functions enable writing <a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">iterators</a> more easily.</dd> + <dt>{{jsxref("Statements/return", "return")}}</dt> + <dd>Specifies the value to be returned by a function.</dd> + <dt>{{jsxref("Statements/class", "class")}}</dt> + <dd>Declares a class.</dd> +</dl> + +<h3 id="Iterations">Iterations</h3> + +<dl> + <dt>{{jsxref("Statements/do...while", "do...while")}}</dt> + <dd>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.</dd> + <dt>{{jsxref("Statements/for", "for")}}</dt> + <dd>Creates a loop that consists of three optional expressions, enclosed in parentheses and separated by semicolons, followed by a statement executed in the loop.</dd> + <dt>{{deprecated_inline}} {{non-standard_inline()}} {{jsxref("Statements/for_each...in", "for each...in")}}</dt> + <dd>Iterates a specified variable over all values of object's properties. For each distinct property, a specified statement is executed.</dd> + <dt>{{jsxref("Statements/for...in", "for...in")}}</dt> + <dd>Iterates over the enumerable properties of an object, in arbitrary order. For each distinct property, statements can be executed.</dd> + <dt>{{jsxref("Statements/for...of", "for...of")}}</dt> + <dd>Iterates over iterable objects (including {{jsxref("Global_Objects/Array","arrays","","true")}}, array-like objects, <a href="/en-US/docs/JavaScript/Guide/Iterators_and_Generators">iterators and generators</a>), invoking a custom iteration hook with statements to be executed for the value of each distinct property.</dd> + <dt>{{jsxref("Statements/while", "while")}}</dt> + <dd>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.</dd> +</dl> + +<h3 id="Others">Others</h3> + +<dl> + <dt>{{jsxref("Statements/debugger", "debugger")}}</dt> + <dd>Invokes any available debugging functionality. If no debugging functionality is available, this statement has no effect.</dd> + <dt>{{jsxref("Statements/export", "export")}}</dt> + <dd>Used to export functions to make them available for imports in external modules, another scripts.</dd> + <dt>{{jsxref("Statements/import", "import")}}</dt> + <dd>Used to import functions exported from an external module, another script.</dd> + <dt>{{jsxref("Statements/label", "label")}}</dt> + <dd>Provides a statement with an identifier that you can refer to using a <code>break</code> or <code>continue</code> statement.</dd> +</dl> + +<dl> + <dt>{{deprecated_inline}} {{jsxref("Statements/with", "with")}}</dt> + <dd>Extends the scope chain for a statement.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-12', 'Statements')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition</td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-12', 'Statements')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12', 'Statements')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>New: function*, let, for...of, yield, class</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators">Operators</a></li> +</ul> 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 +--- +<div dir="rtl">{{jsSidebar("Statements")}}</div> + +<p dir="rtl">ال <kbd>return</kbd> ينهي البيان تنفيذ الوظيفة ويحدد قيمة ليتم ارجاعها الى دالة الاستدعاء</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-return.html")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<h2 id="بناء_الجملة">بناء الجملة</h2> + +<pre class="syntaxbox notranslate">return [<var>expression</var>]; </pre> + +<dl> + <dt><code><var>expression</var></code></dt> + <dd dir="rtl">التعبير المراد استرجاع قيمتة. اذا تم حذفه, فسيتم ارجاع <kbd>undefined</kbd> بدلاً من ذالك</dd> +</dl> + +<h2 dir="rtl" id="الوصف">الوصف</h2> + +<p dir="rtl">عند استخدام عبارة <kbd>return</kbd> في جسم الدالة,يتم ايقاف تنفيذ الوظيفة.اذا تم تحديد ذالك,يتم ارجاع قيمة معينة الى دالة الاستدعاء.على سبيل المثال,تعرض الدالة التالية مربع سعتها , x,حيث x هي رقم.</p> + +<pre class="brush: js notranslate">function square(x) { + return x * x; +} +var demo = square(3); +// demo will equal 9 +</pre> + +<p dir="rtl">اذا تم حذف القيمة,يتم ارجاع <kbd>undefined</kbd> بدلاُ من ذالك</p> + +<p dir="rtl">تعطل عبارات الارجاع التالية تنفيذ الوظيفة</p> + +<pre class="brush: js notranslate">return; +return true; +return false; +return x; +return x + y / 3; +</pre> + +<h3 dir="rtl" id="الادراج_التلقائي_للفاصلة_المنقوطة_Semicolon">الادراج التلقائي للفاصلة المنقوطة (Semicolon)</h3> + +<p dir="rtl">تتاثر عبارة الارجاع بادراج الفاصلة المنقوطة تلقائياُُ (ASI) .</p> + +<p dir="rtl">لا يُسمح بفاصل سطر بين الكلمة الاساسية <kbd>return</kbd> و التعبير</p> + +<pre class="brush: js notranslate">return +a + b; +</pre> + +<p>is transformed by ASI into:</p> + +<pre class="brush: js notranslate">return; +a + b; +</pre> + +<p>The console will warn "unreachable code after return statement".</p> + +<div class="note">Starting with Firefox 40, a warning is shown in the console if unreachable code is found after a <code>return</code> statement.</div> + +<p>To avoid this problem (to prevent ASI), you could use parentheses:</p> + +<pre class="brush: js notranslate">return ( + a + b +); +</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="Interrupt_a_function">Interrupt a function</h3> + +<p>A function immediately stops at the point where <code>return</code> is called.</p> + +<pre class="brush: js notranslate">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 +</pre> + +<h3 id="Returning_a_function">Returning a function</h3> + +<p>See also the article about <a href="/en-US/docs/Web/JavaScript/Closures">Closures</a>.</p> + +<pre class="brush: js notranslate">function magic() { + return function calc(x) { return x * 42; }; +} + +var answer = magic(); +answer(1337); // 56154 +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-return-statement', 'Return statement')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.statements.return")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope">Functions</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Closures">Closures</a></li> +</ul> + +<div id="gtx-trans" style="position: absolute; left: 345px; top: 1247px;"> +<div class="gtx-trans-icon"></div> +</div> diff --git a/files/ar/web/javascript/reference/الدوال/get/index.html b/files/ar/web/javascript/reference/الدوال/get/index.html new file mode 100644 index 0000000000..d3789ba7bd --- /dev/null +++ b/files/ar/web/javascript/reference/الدوال/get/index.html @@ -0,0 +1,165 @@ +--- +title: getter +slug: Web/JavaScript/Reference/الدوال/get +translation_of: Web/JavaScript/Reference/Functions/get +--- +<div>{{jsSidebar("Functions")}}</div> + +<p>The <strong><code>get</code></strong> صينطاكس طعمنيققbinds an object property to a function that will be called when that property is looked up.</p> + +<div>{{EmbedInteractiveExample("pages/js/functions-getter.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate">{get <var>prop</var>() { ... } } +{get [<var>expression</var>]() { ... } }</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code><var>prop</var></code></dt> + <dd>rty to bind to the given fun-tion.</dd> + <dt><code><var>expression</var></code></dt> + <dd>Starting with ECMAScript 2015, you can also use expressions for a computed property name to bind to the given function.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>احا الشبشب ضاع احا دا كان ةبصباع</p> + +<p>It is not possible to simultaneously have a getter bound to a property and have that property actually hold a value, although it <em>is</em> possible to use a getter and a setter in conjunction to create a type of pseudo-property.</p> + +<p>Note the following when working with the <code>get</code> syntax:</p> + +<ul> + <li>It can have an identifier which is either a number or a string;</li> + <li>It must have exactly zero parameters (see <a class="external" href="http://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/" rel="external nofollow">Incompatible <abbr title="ECMAScript 5th edition">ES5</abbr> change: literal getter and setter functions must now have exactly zero or one arguments</a> for more information);</li> + <li>It must not appear in an object literal with another <code>get</code> or with a data entry for the same property (<code>{ get x() { }, get x() { } }</code> and <code>{ x: ..., get x() { } }</code> are forbidden).</li> +</ul> + +<h2 id="Examples">Examples</h2> + +<h3 id="Defining_a_getter_on_new_objects_in_object_initializers">Defining a getter on new objects in object initializers</h3> + +<p>This will create a pseudo-property <code>latest</code> for object <code>obj</code>, which will return the last array item in <code>log</code>.</p> + +<pre class="brush: js notranslate">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" +</pre> + +<p>Note that attempting to assign a value to <code>latest</code> will not change it.</p> + +<h3 id="Deleting_a_getter_using_the_delete_operator">Deleting a getter using the <code>delete</code> operator</h3> + +<p>If you want to remove the getter, you can just {{jsxref("Operators/delete", "delete")}} it:</p> + +<pre class="brush: js notranslate">delete <var>obj</var>.latest; +</pre> + +<h3 id="Defining_a_getter_on_existing_objects_using_defineProperty">Defining a getter on existing objects using <code>defineProperty</code></h3> + +<p>To append a getter to an existing object later at any time, use {{jsxref("Object.defineProperty()")}}.</p> + +<pre class="brush: js notranslate">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)</pre> + +<h3 id="Using_a_computed_property_name">Using a computed property name</h3> + +<pre class="brush: js notranslate">const expr = 'foo'; + +const obj = { + get [expr]() { return 'bar'; } +}; + +console.log(obj.foo); // "bar"</pre> + +<h3 id="Smart_self-overwriting_lazy_getters">Smart / self-overwriting / lazy getters</h3> + +<p>Getters give you a way to <em>define</em> a property of an object, but they do not <em>calculate</em> 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.</p> + +<p>An additional optimization technique to lazify or delay the calculation of a property value and cache it for later access are <strong>smart (or "<a href="https://en.wikipedia.org/wiki/Memoization">memoized</a>") getters</strong>. 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:</p> + +<ul> + <li>If the calculation of a property value is expensive (takes much RAM or CPU time, spawns worker threads, retrieves remote file, etc).</li> + <li>If the value isn't needed just now. It will be used later, or in some case it's not used at all.</li> + <li>If it's used, it will be accessed several times, and there is no need to re-calculate that value will never be changed or shouldn't be re-calculated.</li> +</ul> + +<div class="note"> +<p>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.</p> + +<p>Note that getters are not “lazy” or “memozied” by nature; you must implement this technique if you desire this behavior.</p> +</div> + +<p>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'); },</p> + +<p>For Firefox code, see also the <code>XPCOMUtils.jsm</code> code module, which defines the <code><a href="/en-US/docs/Mozilla/JavaScript_code_modules/XPCOMUtils.jsm#defineLazyGetter()">defineLazyGetter()</a></code> function.</p> + +<h3 id="get_vs._defineProperty"><code>get</code> vs. <code>defineProperty</code></h3> + +<p>While using the <code>get</code> keyword and {{jsxref("Object.defineProperty()")}} have similar results, there is a subtle difference between the two when used on {{jsxref("classes")}}.</p> + +<p>When using <code>get</code> 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.</p> + +<pre class="brush: js notranslate">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 }</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.functions.get")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setter</a></li> + <li>{{jsxref("Operators/delete", "delete")}}</li> + <li>{{jsxref("Object.defineProperty()")}}</li> + <li>{{jsxref("Object.defineGetter", "__defineGetter__")}}</li> + <li>{{jsxref("Object.defineSetter", "__defineSetter__")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">Defining Getters and Setters</a> in JavaScript Guide</li> +</ul> diff --git a/files/ar/web/javascript/reference/الدوال/index.html b/files/ar/web/javascript/reference/الدوال/index.html new file mode 100644 index 0000000000..368d8af03d --- /dev/null +++ b/files/ar/web/javascript/reference/الدوال/index.html @@ -0,0 +1,645 @@ +--- +title: الدوال +slug: Web/JavaScript/Reference/الدوال +translation_of: Web/JavaScript/Reference/Functions +--- +<div>{{jsSidebar("Functions")}}</div> + +<p>Generally speaking, a function is a "subprogram" that can be <em>called</em> 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 <em>function body</em>. Values can be <em>passed</em> to a function, and the function will <em>return</em> a value.</p> + +<p>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 <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function">Function</a></code> objects.</p> + +<p>For more examples and explanations, see also the <a href="/en-US/docs/Web/JavaScript/Guide/Functions">JavaScript guide about functions</a>.</p> + +<h2 id="Description">Description</h2> + +<p>Every function in JavaScript is a <code>Function</code> object. See {{jsxref("Function")}} for information on properties and methods of <code>Function</code> objects.</p> + +<p>Functions are not the same as procedures. A function always returns a value, whereas a procedure might not.</p> + +<p>To return a value other than the default, a function must have a <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/return">return</a></code> statement that specifies the value to return. A function without a return statement will return a default value. In the case of a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor">constructor</a> called with the <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a></code> keyword, the default value is the value of its <code>this</code> parameter. For all other functions, the default return value is <code>undefined</code>.</p> + +<p>The parameters of a function call are the function's <em>arguments</em>. Arguments are passed to functions <em>by value</em>. 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:</p> + +<pre class="brush: js">/* 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); +</pre> + +<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code> keyword</a> does not refer to the currently executing function, so you must refer to <code>Function</code> objects by name, even within the function body.</p> + +<h2 id="Defining_functions">Defining functions</h2> + +<p>There are several ways to define functions:</p> + +<h3 id="The_function_declaration_(function_statement)">The function declaration (<code>function</code> statement)</h3> + +<p>There is a special syntax for declaring functions (see <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">function statement</a> for details):</p> + +<pre class="syntaxbox">function <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>The function name.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument to be passed to the function. A function can have up to 255 arguments.</dd> +</dl> + +<dl> + <dt><code>statements</code></dt> + <dd>The statements comprising the body of the function.</dd> +</dl> + +<h3 id="The_function_expression_(function_expression)">The function expression (<code>function</code> expression)</h3> + +<p>A function expression is similar to and has the same syntax as a function declaration (see <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">function expression</a> for details):</p> + +<pre class="syntaxbox">function [<em>name</em>]([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>The function name. Can be omitted, in which case the function becomes known as an anonymous function.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument to be passed to the function. A function can have up to 255 arguments.</dd> + <dt><code>statements</code></dt> + <dd>The statements comprising the body of the function.</dd> +</dl> + +<h3 id="The_generator_function_declaration_(function*_statement)">The generator function declaration (<code>function*</code> statement)</h3> + +<div class="note"> +<p><strong>Note:</strong> Generator functions are an <em>experimental technology,</em> part of the ECMAScript 6 proposal, and are not widely supported by browsers yet.</p> +</div> + +<p>There is a special syntax for generator function declarations (see {{jsxref('Statements/function*', 'function* statement')}} for details):</p> + +<pre class="syntaxbox">function* <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>The function name.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument to be passed to the function. A function can have up to 255 arguments.</dd> +</dl> + +<dl> + <dt><code>statements</code></dt> + <dd>The statements comprising the body of the function.</dd> +</dl> + +<h3 id="The_generator_function_expression_(function*_expression)">The generator function expression (<code>function*</code> expression)</h3> + +<div class="note"> +<p><strong>Note:</strong> Generator functions are an <em>experimental technology,</em> part of the ECMAScript 6 proposal, and are not widely supported by browsers yet.</p> +</div> + +<p>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):</p> + +<pre class="syntaxbox">function* [<em>name</em>]([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>The function name. Can be omitted, in which case the function becomes known as an anonymous function.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument to be passed to the function. A function can have up to 255 arguments.</dd> + <dt><code>statements</code></dt> + <dd>The statements comprising the body of the function.</dd> +</dl> + +<h3 id="The_arrow_function_expression_(>)">The arrow function expression (=>)</h3> + +<div class="note"> +<p><strong>Note:</strong> Arrow function expressions are an <em>experimental technology,</em> part of the ECMAScript 6 proposal, and are not widely supported by browsers yet.</p> +</div> + +<p>An arrow function expression has a shorter syntax and lexically binds its <code>this</code> value (see <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow functions</a> for details):</p> + +<pre class="syntaxbox">([param[, param]]) => { + statements +} + +param => expression +</pre> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument. Zero arguments need to be indicated with <code>()</code>. For only one argument, the parentheses are not required. (like <code>foo => 1</code>)</dd> + <dt><code>statements or expression</code></dt> + <dd>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.</dd> +</dl> + +<h3 id="The_Function_constructor">The <code>Function</code> constructor</h3> + +<div class="note"> +<p><strong>Note:</strong> Using the <code>Function</code> 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.</p> +</div> + +<p>As all other objects, {{jsxref("Function")}} objects can be created using the <code>new</code> operator:</p> + +<pre class="syntaxbox">new Function (<em>arg1</em>, <em>arg2</em>, ... <em>argN</em>, <em>functionBody</em>) +</pre> + +<dl> + <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> + <dd>Zero or more names to be used by the function as formal parameters. Each must be a proper JavaScript identifier.</dd> +</dl> + +<dl> + <dt><code>functionBody</code></dt> + <dd>A string containing the JavaScript statements comprising the function body.</dd> +</dl> + +<p>Invoking the <code>Function</code> constructor as a function (without using the <code>new</code> operator) has the same effect as invoking it as a constructor.</p> + +<h3 id="The_GeneratorFunction_constructor">The <code>GeneratorFunction</code> constructor</h3> + +<div class="note"> +<p><strong>Note:</strong> Arrow function expressions are an <em>experimental technology,</em> part of the ECMAScript 6 proposal, and are not widely supported by browsers yet.</p> +</div> + +<div class="note"> +<p><strong>Note:</strong> <code>GeneratorFunction</code> is not a global object, but could be obtained from generator function instance (see {{jsxref("GeneratorFunction")}} for more detail).</p> +</div> + +<div class="note"> +<p><strong>Note:</strong> Using the <code>GeneratorFunction</code> 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.</p> +</div> + +<p>As all other objects, {{jsxref("GeneratorFunction")}} objects can be created using the <code>new</code> operator:</p> + +<pre class="syntaxbox">new GeneratorFunction (<em>arg1</em>, <em>arg2</em>, ... <em>argN</em>, <em>functionBody</em>) +</pre> + +<dl> + <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> + <dd>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 "<code>x</code>", "<code>theValue</code>", or "<code>a,b</code>".</dd> +</dl> + +<dl> + <dt><code>functionBody</code></dt> + <dd>A string containing the JavaScript statements comprising the function definition.</dd> +</dl> + +<p>Invoking the <code>Function</code> constructor as a function (without using the <code>new</code> operator) has the same effect as invoking it as a constructor.</p> + +<h2 id="Function_parameters">Function parameters</h2> + +<div class="note"> +<p><strong>Note:</strong> Default and rest parameters are <em>experimental technology,</em> part of the ECMAScript 6 proposal, and are not widely supported by browsers yet.</p> +</div> + +<h3 id="Default_parameters">Default parameters</h3> + +<p>Default function parameters allow formal parameters to be initialized with default values if no value or <code>undefined</code> is passed. For more details, see<a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters"> default parameters</a>.</p> + +<h3 id="Rest_parameters">Rest parameters</h3> + +<p>The rest parameter syntax allows to represent an indefinite number of arguments as an array. For more details, see <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest parameters</a>.</p> + +<h2 id="The_arguments_object">The <code>arguments</code> object</h2> + +<p>You can refer to a function's arguments within the function by using the <code>arguments</code> object. See <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a>.</p> + +<ul> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments">arguments</a></code>: An array-like object containing the arguments passed to the currently executing function.</li> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/callee">arguments.callee</a></code> {{Deprecated_inline}}: The currently executing function.</li> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/caller">arguments.caller</a></code> {{Obsolete_inline}} : The function that invoked the currently executing function.</li> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/length">arguments.length</a></code>: The number of arguments passed to the function.</li> +</ul> + +<h2 id="Defining_method_functions">Defining method functions</h2> + +<h3 id="Getter_and_setter_functions">Getter and setter functions</h3> + +<p>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.</p> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">get</a></dt> + <dd> + <p>Binds an object property to a function that will be called when that property is looked up.</p> + </dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">set</a></dt> + <dd>Binds an object property to a function to be called when there is an attempt to set that property.</dd> +</dl> + +<h3 id="Method_definition_syntax">Method definition syntax</h3> + +<div class="note"> +<p><strong>Note:</strong> <em>Method definitions are experimental technology,</em> part of the ECMAScript 6 proposal, and are not widely supported by browsers yet.</p> +</div> + +<p>Starting with ECMAScript 6, you are able to define own methods in a shorter syntax, similar to the getters and setters. See <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">method definitions</a> for more information.</p> + +<pre class="brush: js">var obj = { + foo() {}, + bar() {} +};</pre> + +<h2 id="Function_constructor_vs._function_declaration_vs._function_expression"><code>Function</code> constructor vs. function declaration vs. function expression</h2> + +<p>Compare the following:</p> + +<p>A function defined with the <code>Function</code> constructor assigned to the variable <code>multiply:</code></p> + +<pre class="brush: js">function multiply(x, y) { + return x * y; +} +</pre> + +<p>A <em>function expression</em> of an anonymous function assigned to the variable <code>multiply:</code></p> + +<pre class="brush: js">var multiply = function(x, y) { + return x * y; +}; +</pre> + +<p>A <em>function expression</em> of a function named <code>func_name</code> assigned to the variable <code>multiply:</code></p> + +<pre class="brush: js">var multiply = function func_name(x, y) { + return x * y; +}; +</pre> + +<h3 id="Differences">Differences</h3> + +<p>All do approximately the same thing, with a few subtle differences:</p> + +<p>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 <code>undefined</code> if the function name was previously declared via a <code>var</code> statement). For example:</p> + +<pre class="brush: js">var y = function x() {}; +alert(x); // throws an error +</pre> + +<p>The function name also appears when the function is serialized via <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/toString"><code>Function</code>'s toString method</a>.</p> + +<p>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.</p> + +<p>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:</p> + +<p>A function defined by '<code>new Function'</code> does not have a function name. However, in the <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> JavaScript engine, the serialized form of the function shows as if it has the name "anonymous". For example, <code>alert(new Function())</code> outputs:</p> + +<pre class="brush: js">function anonymous() { +} +</pre> + +<p>Since the function actually does not have a name, <code>anonymous</code> is not a variable that can be accessed within the function. For example, the following would result in an error:</p> + +<pre class="brush: js">var foo = new Function("alert(anonymous);"); +foo(); +</pre> + +<p>Unlike functions defined by function expressions or by the <code>Function</code> constructor, a function defined by a function declaration can be used before the function declaration itself. For example:</p> + +<pre class="brush: js">foo(); // alerts FOO! +function foo() { + alert('FOO!'); +} +</pre> + +<p>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 <code>Function</code> constructor does not inherit any scope other than the global scope (which all functions inherit).</p> + +<p>Functions defined by function expressions and function declarations are parsed only once, while those defined by the <code>Function</code> constructor are not. That is, the function body string passed to the <code>Function</code> 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 "<code>new Function(...)</code>". Therefore the <code>Function</code> constructor should generally be avoided whenever possible.</p> + +<p>It should be noted, however, that function expressions and function declarations nested within the function generated by parsing a <code>Function constructor</code> 's string aren't parsed repeatedly. For example:</p> + +<pre class="brush: js">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.</pre> + +<p>A function declaration is very easily (and often unintentionally) turned into a function expression. A function declaration ceases to be one when it either:</p> + +<ul> + <li>becomes part of an expression</li> + <li>is no longer a "source element" of a function or the script itself. A "source element" is a non-nested statement in the script or a function body:</li> +</ul> + +<pre class="brush: js">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 + } +} +</pre> + +<h3 id="Examples">Examples</h3> + +<pre class="brush: js">// 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() {} + } +} +</pre> + +<h2 id="Block-level_functions">Block-level functions</h2> + +<p>In <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>, starting with ES2015 (ES6), functions inside blocks are now scoped to that block. Prior to ES6, block-level functions were forbidden in strict mode.</p> + +<pre class="brush: js">'use strict'; + +function f() { + return 1; +} + +{ + function f() { + return 2; + } +} + +f() === 1; // true + +// f() === 2 in non-strict mode +</pre> + +<h3 id="Block-level_functions_in_non-strict_code">Block-level functions in non-strict code</h3> + +<p>In a word: Don't.</p> + +<p>In non-strict code, function declarations inside blocks behave strangely. For example:</p> + +<pre class="brush: js">if (shouldDefineZero) { + function zero() { // DANGER: compatibility risk + console.log("This is zero."); + } +} +</pre> + +<p>ES2015 says that if <code>shouldDefineZero</code> is false, then <code>zero</code> 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 <code>zero</code> whether the block executed or not.</p> + +<p>In <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>, all browsers that support ES2015 handle this the same way: <code>zero</code> is defined only if <code>shouldDefineZero</code> is true, and only in the scope of the <code>if</code>-block.</p> + +<p>A safer way to define functions conditionally is to assign a function expression to a variable:</p> + +<pre class="brush: js">var zero; +if (0) { + zero = function() { + console.log("This is zero."); + }; +} +</pre> + +<h2 id="Examples_2">Examples</h2> + +<h3 id="Returning_a_formatted_number">Returning a formatted number</h3> + +<p>The following function returns a string containing the formatted representation of a number padded with leading zeros.</p> + +<pre class="brush: js">// 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; +} +</pre> + +<p>The following statements call the padZeros function.</p> + +<pre class="brush: js">var result; +result = padZeros(42,4); // returns "0042" +result = padZeros(42,2); // returns "42" +result = padZeros(5,4); // returns "0005" +</pre> + +<h3 id="Determining_whether_a_function_exists">Determining whether a function exists</h3> + +<p>You can determine whether a function exists by using the <code>typeof</code> operator. In the following example, a test is peformed to determine if the <code>window</code> object has a property called <code>noFunc</code> that is a function. If so, it is used; otherwise some other action is taken.</p> + +<pre class="brush: js"> if ('function' == typeof window.noFunc) { + // use noFunc() + } else { + // do something else + } +</pre> + +<p>Note that in the <code>if</code> test, a reference to <code>noFunc</code> is used—there are no brackets "()" after the function name so the actual function is not called.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-13', 'Function Definition')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>New: Arrow functions, Generator functions, default parameters, rest parameters.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Generator functions</td> + <td>39</td> + <td>{{CompatGeckoDesktop("26.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>26</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Arrow functions</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("22.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Block-level functions</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("46.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Generator functions</td> + <td>{{CompatUnknown}}</td> + <td>39</td> + <td>{{CompatGeckoMobile("26.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>26</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Arrow functions</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("22.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Block-level functions</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("46.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Statements/function", "function statement")}}</li> + <li>{{jsxref("Operators/function", "function expression")}}</li> + <li>{{jsxref("Statements/function*", "function* statement")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> + <li>{{jsxref("Functions/Arrow_functions", "Arrow functions")}}</li> + <li>{{jsxref("Functions/Default_parameters", "Default parameters")}}</li> + <li>{{jsxref("Functions/rest_parameters", "Rest parameters")}}</li> + <li>{{jsxref("Functions/arguments", "Arguments object")}}</li> + <li>{{jsxref("Functions/get", "getter")}}</li> + <li>{{jsxref("Functions/set", "setter")}}</li> + <li>{{jsxref("Functions/Method_definitions", "Method definitions")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope" title="JavaScript/Reference/Functions_and_function_scope">Functions and function scope</a></li> +</ul> 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 +--- +<p class="summary" dir="rtl"><strong>لغة الترميز الرياضية</strong> (MathML) هي نكهة من <a href="/ar/docs/XML">لغة الترميز القابلة للامتداد</a> (XML) لوصف الرموز الرياضية وتمثيل هيكلها ومحتواها.</p> + +<p dir="rtl">ستجد هنا روابط لتوثيقات، أمثلة، وأدوات لتساعدك على العمل مع هذه التقنيّة القوية. لنظرة سريعة، انظر إلى <a href="https://fred-wang.github.io/MozSummitMathML/index.html">شرائح لمعارض الإبتكار في موزيلا سوميت 2013</a>.</p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 dir="rtl" id="مرجع_لغة_الترميز_الرياضية">مرجع لغة الترميز الرياضية</h2> + +<dl> + <dt dir="rtl"><a class="new" href="https://developer.mozilla.org/ar/docs/Web/MathML/Element" rel="nofollow">مرجع عناصر لغة الترميز الرياضية</a></dt> + <dd dir="rtl">تفاصيل حول كل عنصر في لغة الترميز الرياضية ومعلومات حول توافقيته مع متصفحات سطح المكتب والهواتف.</dd> + <dt dir="rtl"><a class="new" href="https://developer.mozilla.org/ar/docs/Web/MathML/Attribute" rel="nofollow">مرجع سمات لغة الترميز الرياضية</a></dt> + <dd dir="rtl">معلومات حول سمات لغة الترميز الرياضية التي تقوم بتعديل مظهر أو وظيفة العناصر.</dd> + <dt dir="rtl"><a class="new" href="https://developer.mozilla.org/ar/docs/Web/MathML/Examples" rel="nofollow">أمثلة عن لغة الترميز الرياضية</a></dt> + <dd dir="rtl">عينات وأمثلة عن لغة الترميز الرياضية لمساعدتك على فهم كيفية عملها.</dd> + <dt dir="rtl"><a class="new" href="https://developer.mozilla.org/ar/docs/Web/MathML/Authoring" rel="nofollow">الكتابة بلغة الترميز الرياضية</a></dt> + <dd dir="rtl">اقتراحات و نصائح حول الكتابة بلغة الترميز الرياضية، تتضمن المحررات التي يتم استخدامها لاستخدام هذه اللغة وكيفية تحويل المخرجات إلى محتوى ويب.</dd> +</dl> + +<p dir="rtl"><a href="/ar/docs/tag/%D9%84%D8%BA%D8%A9%20%D8%A7%D9%84%D8%AA%D8%B1%D9%85%D9%8A%D8%B2%20%D8%A7%D9%84%D8%B1%D9%8A%D8%A7%D8%B6%D9%8A%D8%A9">عرض المزيد...</a></p> +</div> + +<div class="section"> +<h2 dir="rtl" id="الحصول_على_المساعدة_من_المجتمع">الحصول على المساعدة من المجتمع</h2> + +<ul dir="rtl"> + <li>انظر إلى منتديات موزيلا<br> + {{ DiscussionList("dev-tech-mathml", "mozilla.dev.tech.mathml") }}</li> + <li><a href="irc://irc.mozilla.org/%23mathml" rel="external" title="#mathml">قناة IRC</a></li> + <li><a class="external external-icon" href="https://wiki.mozilla.org/MathML:Home_Page" rel="noopener">الموسوعة المستخدمة من قبل مساهمين موزيلا</a></li> + <li><a class="external external-icon" href="https://www.w3.org/Math/" rel="noopener" title="http://www.w3.org">منزل الرياضيات W3C</a></li> + <li><a class="external external-icon" href="https://lists.w3.org/Archives/Public/www-math/" rel="noopener" title="http://lists.w3.org">أرشيف بريد www-math w3.org</a></li> +</ul> + +<h2 dir="rtl" id="أدوات">أدوات</h2> + +<ul dir="rtl"> + <li><a class="external external-icon" href="https://validator.w3.org" rel="noopener" title="http://validator.w3.org">مدقق W3C</a></li> + <li><a class="external external-icon" href="https://addons.mozilla.org/en/firefox/addon/8969/" rel="noopener">إضافة FireMath لفايرفوكس</a></li> + <li><a class="external external-icon" href="https://addons.mozilla.org/firefox/collections/fred_wang/mathzilla/" rel="noopener">مجموعة إضافات Mathzilla على فايرفوكس</a></li> + <li>مشروع <a class="external external-icon" href="https://github.com/fred-wang/TeXZilla" rel="noopener">TeXZilla </a>- محول جافاسكربت من LaTeX إلى MathML (<a class="external external-icon" href="https://fred-wang.github.io/TeXZilla/" rel="noopener" title="http://fred-wang.github.io">عرض حي</a>، <a class="external external-icon" href="https://addons.mozilla.org/en-US/firefox/addon/texzilla/" rel="noopener">إضافة فايرفوكس</a>، <a class="external external-icon" href="https://github.com/fred-wang/TeXZilla/wiki/Using-TeXZilla" rel="noopener">استخدامه في صفحة ويب أو برنامج جافاسكربت</a>)</li> + <li>مشروع <a class="external external-icon" href="http://dlmf.nist.gov/LaTeXML/" rel="noopener" title="http://dlmf.nist.gov">LaTeXML </a>- تحويل وثائق LaTeX إلى صفحات ويب.</li> + <li>مشروع <a class="external external-icon" href="http://webdemo.visionobjects.com/home.html#equation" rel="noopener" title="http://webdemo.visionobjects.com">Web Equation </a>- تحويل المعادلات المكتوبة يدوياً إلى صيغ متعددة.</li> +</ul> + +<p dir="rtl"> </p> + +<h2 dir="rtl" id="مواضيع_متعلقة">مواضيع متعلقة</h2> + +<ul dir="rtl"> + <li><a href="https://developer.mozilla.org/ar/docs/Web/HTML">لغة ترميز النص الفائق</a></li> + <li><a href="https://developer.mozilla.org/ar/docs/Web/CSS">صفحات الأنماط الانسيابية</a></li> + <li><a href="https://developer.mozilla.org/ar/docs/Web/SVG">الرسومات المتجهيّة المتغيرة</a></li> +</ul> +</div> +</div> + +<h2 dir="rtl" id="التوافق_مع_المتصفحات">التوافق مع المتصفحات</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}} [1]</td> + <td>{{CompatGeckoDesktop("1.8")}}</td> + <td>{{CompatNo}} [2]</td> + <td>{{CompatNo}} [3]</td> + <td>{{CompatSafari(5.1)}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1.8")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>5.1</td> + </tr> + </tbody> +</table> +</div> + +<p dir="rtl">[1] متوفر مع <a class="external external-icon" href="https://chrome.google.com/webstore/detail/fmath-html-%2B-mathml-solut/emdjdpchbjipnjhkfljbcapgfecmnglm" rel="noopener">إضاف</a>(ة/ات).</p> + +<p dir="rtl">[2] متوفر مع إضاف(ة/ات).</p> + +<p dir="rtl">[3] متوفر مع إضاف(ة/ات).</p> 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 +--- +<p>« <a href="/en/SVG" title="en/SVG">SVG</a> / <a href="/en/SVG/Element" title="en/SVG/Element">SVG Element reference</a> »</p> +<h2 id="SVG_Attributes">SVG Attributes</h2> +<div style="-moz-column-width: 14em; -webkit-columns: 14em; columns: 14em;"> + <h3 id="A">A</h3> + <ul> + <li>{{ SVGAttr("accelerate") }}</li> + <li>{{ SVGAttr("accent-height") }}</li> + <li>{{ SVGAttr("accumulate") }}</li> + <li>{{ SVGAttr("additive") }}</li> + <li>{{ SVGAttr("alignment-baseline") }}</li> + <li>{{ SVGAttr("allowReorder") }}</li> + <li>{{ SVGAttr("alphabetic") }}</li> + <li>{{ SVGAttr("amplitude") }}</li> + <li>{{ SVGAttr("arabic-form") }}</li> + <li>{{ SVGAttr("ascent") }}</li> + <li>{{ SVGAttr("attributeName") }}</li> + <li>{{ SVGAttr("attributeType") }}</li> + <li>{{ SVGAttr("autoReverse") }}</li> + <li>{{ SVGAttr("azimuth") }}</li> + </ul> + <h3 id="B">B</h3> + <ul> + <li>{{ SVGAttr("baseFrequency") }}</li> + <li>{{ SVGAttr("baseline-shift") }}</li> + <li>{{ SVGAttr("baseProfile") }}</li> + <li>{{ SVGAttr("bbox") }}</li> + <li>{{ SVGAttr("begin") }}</li> + <li>{{ SVGAttr("bias") }}</li> + <li>{{ SVGAttr("by") }}</li> + </ul> + <h3 id="C">C</h3> + <ul> + <li>{{ SVGAttr("calcMode") }}</li> + <li>{{ SVGAttr("cap-height") }}</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("clip") }}</li> + <li>{{ SVGAttr("clipPathUnits") }}</li> + <li>{{ SVGAttr("clip-path") }}</li> + <li>{{ SVGAttr("clip-rule") }}</li> + <li>{{ SVGAttr("color") }}</li> + <li>{{ SVGAttr("color-interpolation") }}</li> + <li>{{ SVGAttr("color-interpolation-filters") }}</li> + <li>{{ SVGAttr("color-profile") }}</li> + <li>{{ SVGAttr("color-rendering") }}</li> + <li>{{ SVGAttr("contentScriptType") }}</li> + <li>{{ SVGAttr("contentStyleType") }}</li> + <li>{{ SVGAttr("cursor") }}</li> + <li>{{ SVGAttr("cx") }}</li> + <li>{{ SVGAttr("cy") }}</li> + </ul> + <h3 id="D">D</h3> + <ul> + <li>{{ SVGAttr("d") }}</li> + <li>{{ SVGAttr("decelerate") }}</li> + <li>{{ SVGAttr("descent") }}</li> + <li>{{ SVGAttr("diffuseConstant") }}</li> + <li>{{ SVGAttr("direction") }}</li> + <li>{{ SVGAttr("display") }}</li> + <li>{{ SVGAttr("divisor") }}</li> + <li>{{ SVGAttr("dominant-baseline") }}</li> + <li>{{ SVGAttr("dur") }}</li> + <li>{{ SVGAttr("dx") }}</li> + <li>{{ SVGAttr("dy") }}</li> + </ul> + <h3 id="E">E</h3> + <ul> + <li>{{ SVGAttr("edgeMode") }}</li> + <li>{{ SVGAttr("elevation") }}</li> + <li>{{ SVGAttr("enable-background") }}</li> + <li>{{ SVGAttr("end") }}</li> + <li>{{ SVGAttr("exponent") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> + </ul> + <h3 id="F">F</h3> + <ul> + <li>{{ SVGAttr("fill") }}</li> + <li>{{ SVGAttr("fill-opacity") }}</li> + <li>{{ SVGAttr("fill-rule") }}</li> + <li>{{ SVGAttr("filter") }}</li> + <li>{{ SVGAttr("filterRes") }}</li> + <li>{{ SVGAttr("filterUnits") }}</li> + <li>{{ SVGAttr("flood-color") }}</li> + <li>{{ SVGAttr("flood-opacity") }}</li> + <li>{{ SVGAttr("font-family") }}</li> + <li>{{ SVGAttr("font-size") }}</li> + <li>{{ SVGAttr("font-size-adjust") }}</li> + <li>{{ SVGAttr("font-stretch") }}</li> + <li>{{ SVGAttr("font-style") }}</li> + <li>{{ SVGAttr("font-variant") }}</li> + <li>{{ SVGAttr("font-weight") }}</li> + <li>{{ SVGAttr("format") }}</li> + <li>{{ SVGAttr("from") }}</li> + <li>{{ SVGAttr("fx") }}</li> + <li>{{ SVGAttr("fy") }}</li> + </ul> + <h3 id="G">G</h3> + <ul> + <li>{{ SVGAttr("g1") }}</li> + <li>{{ SVGAttr("g2") }}</li> + <li>{{ SVGAttr("glyph-name") }}</li> + <li>{{ SVGAttr("glyph-orientation-horizontal") }}</li> + <li>{{ SVGAttr("glyph-orientation-vertical") }}</li> + <li>{{ SVGAttr("glyphRef") }}</li> + <li>{{ SVGAttr("gradientTransform") }}</li> + <li>{{ SVGAttr("gradientUnits") }}</li> + </ul> + <h3 id="H">H</h3> + <ul> + <li>{{ SVGAttr("hanging") }}</li> + <li>{{ SVGAttr("height") }}</li> + <li>{{ SVGAttr("horiz-adv-x") }}</li> + <li>{{ SVGAttr("horiz-origin-x") }}</li> + </ul> + <h3 id="I">I</h3> + <ul> + <li>{{ SVGAttr("id") }}</li> + <li>{{ SVGAttr("ideographic") }}</li> + <li>{{ SVGAttr("image-rendering") }}</li> + <li>{{ SVGAttr("in") }}</li> + <li>{{ SVGAttr("in2") }}</li> + <li>{{ SVGAttr("intercept") }}</li> + </ul> + <h3 id="K">K</h3> + <ul> + <li>{{ SVGAttr("k") }}</li> + <li>{{ SVGAttr("k1") }}</li> + <li>{{ SVGAttr("k2") }}</li> + <li>{{ SVGAttr("k3") }}</li> + <li>{{ SVGAttr("k4") }}</li> + <li>{{ SVGAttr("kernelMatrix") }}</li> + <li>{{ SVGAttr("kernelUnitLength") }}</li> + <li>{{ SVGAttr("kerning") }}</li> + <li>{{ SVGAttr("keyPoints") }}</li> + <li>{{ SVGAttr("keySplines") }}</li> + <li>{{ SVGAttr("keyTimes") }}</li> + </ul> + <h3 id="L">L</h3> + <ul> + <li>{{ SVGAttr("lang") }}</li> + <li>{{ SVGAttr("lengthAdjust") }}</li> + <li>{{ SVGAttr("letter-spacing") }}</li> + <li>{{ SVGAttr("lighting-color") }}</li> + <li>{{ SVGAttr("limitingConeAngle") }}</li> + <li>{{ SVGAttr("local") }}</li> + </ul> + <h3 id="M">M</h3> + <ul> + <li>{{ SVGAttr("marker-end") }}</li> + <li>{{ SVGAttr("marker-mid") }}</li> + <li>{{ SVGAttr("marker-start") }}</li> + <li>{{ SVGAttr("markerHeight") }}</li> + <li>{{ SVGAttr("markerUnits") }}</li> + <li>{{ SVGAttr("markerWidth") }}</li> + <li>{{ SVGAttr("mask") }}</li> + <li>{{ SVGAttr("maskContentUnits") }}</li> + <li>{{ SVGAttr("maskUnits") }}</li> + <li>{{ SVGAttr("mathematical") }}</li> + <li>{{ SVGAttr("max") }}</li> + <li>{{ SVGAttr("media") }}</li> + <li>{{ SVGAttr("method") }}</li> + <li>{{ SVGAttr("min") }}</li> + <li>{{ SVGAttr("mode") }}</li> + </ul> + <h3 id="N">N</h3> + <ul> + <li>{{ SVGAttr("name") }}</li> + <li>{{ SVGAttr("numOctaves") }}</li> + </ul> + <h3 id="O">O</h3> + <ul> + <li>{{ SVGAttr("offset") }}</li> + <li>{{ SVGAttr("onabort") }}</li> + <li>{{ SVGAttr("onactivate") }}</li> + <li>{{ SVGAttr("onbegin") }}</li> + <li>{{ SVGAttr("onclick") }}</li> + <li>{{ SVGAttr("onend") }}</li> + <li>{{ SVGAttr("onerror") }}</li> + <li>{{ SVGAttr("onfocusin") }}</li> + <li>{{ SVGAttr("onfocusout") }}</li> + <li>{{ SVGAttr("onload") }}</li> + <li>{{ SVGAttr("onmousedown") }}</li> + <li>{{ SVGAttr("onmousemove") }}</li> + <li>{{ SVGAttr("onmouseout") }}</li> + <li>{{ SVGAttr("onmouseover") }}</li> + <li>{{ SVGAttr("onmouseup") }}</li> + <li>{{ SVGAttr("onrepeat") }}</li> + <li>{{ SVGAttr("onresize") }}</li> + <li>{{ SVGAttr("onscroll") }}</li> + <li>{{ SVGAttr("onunload") }}</li> + <li>{{ SVGAttr("onzoom") }}</li> + <li>{{ SVGAttr("opacity") }}</li> + <li>{{ SVGAttr("operator") }}</li> + <li>{{ SVGAttr("order") }}</li> + <li>{{ SVGAttr("orient") }}</li> + <li>{{ SVGAttr("orientation") }}</li> + <li>{{ SVGAttr("origin") }}</li> + <li>{{ SVGAttr("overflow") }}</li> + <li>{{ SVGAttr("overline-position") }}</li> + <li>{{ SVGAttr("overline-thickness") }}</li> + </ul> + <h3 id="P">P</h3> + <ul> + <li>{{ SVGAttr("panose-1") }}</li> + <li>{{ SVGAttr("paint-order") }}</li> + <li>{{ SVGAttr("path") }}</li> + <li>{{ SVGAttr("pathLength") }}</li> + <li>{{ SVGAttr("patternContentUnits") }}</li> + <li>{{ SVGAttr("patternTransform") }}</li> + <li>{{ SVGAttr("patternUnits") }}</li> + <li>{{ SVGAttr("pointer-events") }}</li> + <li>{{ SVGAttr("points") }}</li> + <li>{{ SVGAttr("pointsAtX") }}</li> + <li>{{ SVGAttr("pointsAtY") }}</li> + <li>{{ SVGAttr("pointsAtZ") }}</li> + <li>{{ SVGAttr("preserveAlpha") }}</li> + <li>{{ SVGAttr("preserveAspectRatio") }}</li> + <li>{{ SVGAttr("primitiveUnits") }}</li> + </ul> + <h3 id="R">R</h3> + <ul> + <li>{{ SVGAttr("r") }}</li> + <li>{{ SVGAttr("radius") }}</li> + <li>{{ SVGAttr("refX") }}</li> + <li>{{ SVGAttr("refY") }}</li> + <li>{{ SVGAttr("rendering-intent") }}</li> + <li>{{ SVGAttr("repeatCount") }}</li> + <li>{{ SVGAttr("repeatDur") }}</li> + <li>{{ SVGAttr("requiredExtensions") }}</li> + <li>{{ SVGAttr("requiredFeatures") }}</li> + <li>{{ SVGAttr("restart") }}</li> + <li>{{ SVGAttr("result") }}</li> + <li>{{ SVGAttr("rotate") }}</li> + <li>{{ SVGAttr("rx") }}</li> + <li>{{ SVGAttr("ry") }}</li> + </ul> + <h3 id="S">S</h3> + <ul> + <li>{{ SVGAttr("scale") }}</li> + <li>{{ SVGAttr("seed") }}</li> + <li>{{ SVGAttr("shape-rendering") }}</li> + <li>{{ SVGAttr("slope") }}</li> + <li>{{ SVGAttr("spacing") }}</li> + <li>{{ SVGAttr("specularConstant") }}</li> + <li>{{ SVGAttr("specularExponent") }}</li> + <li>{{ SVGAttr("speed") }}</li> + <li>{{ SVGAttr("spreadMethod") }}</li> + <li>{{ SVGAttr("startOffset") }}</li> + <li>{{ SVGAttr("stdDeviation") }}</li> + <li>{{ SVGAttr("stemh") }}</li> + <li>{{ SVGAttr("stemv") }}</li> + <li>{{ SVGAttr("stitchTiles") }}</li> + <li>{{ SVGAttr("stop-color") }}</li> + <li>{{ SVGAttr("stop-opacity") }}</li> + <li>{{ SVGAttr("strikethrough-position") }}</li> + <li>{{ SVGAttr("strikethrough-thickness") }}</li> + <li>{{ SVGAttr("string") }}</li> + <li>{{ SVGAttr("stroke") }}</li> + <li>{{ SVGAttr("stroke-dasharray") }}</li> + <li>{{ SVGAttr("stroke-dashoffset") }}</li> + <li>{{ SVGAttr("stroke-linecap") }}</li> + <li>{{ SVGAttr("stroke-linejoin") }}</li> + <li>{{ SVGAttr("stroke-miterlimit") }}</li> + <li>{{ SVGAttr("stroke-opacity") }}</li> + <li>{{ SVGAttr("stroke-width") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("surfaceScale") }}</li> + <li>{{ SVGAttr("systemLanguage") }}</li> + </ul> + <h3 id="T">T</h3> + <ul> + <li>{{ SVGAttr("tableValues") }}</li> + <li>{{ SVGAttr("target") }}</li> + <li>{{ SVGAttr("targetX") }}</li> + <li>{{ SVGAttr("targetY") }}</li> + <li>{{ SVGAttr("text-anchor") }}</li> + <li>{{ SVGAttr("text-decoration") }}</li> + <li>{{ SVGAttr("text-rendering") }}</li> + <li>{{ SVGAttr("textLength") }}</li> + <li>{{ SVGAttr("to") }}</li> + <li>{{ SVGAttr("transform") }}</li> + <li>{{ SVGAttr("type") }}</li> + </ul> + <h3 id="U">U</h3> + <ul> + <li>{{ SVGAttr("u1") }}</li> + <li>{{ SVGAttr("u2") }}</li> + <li>{{ SVGAttr("underline-position") }}</li> + <li>{{ SVGAttr("underline-thickness") }}</li> + <li>{{ SVGAttr("unicode") }}</li> + <li>{{ SVGAttr("unicode-bidi") }}</li> + <li>{{ SVGAttr("unicode-range") }}</li> + <li>{{ SVGAttr("units-per-em") }}</li> + </ul> + <h3 id="V">V</h3> + <ul> + <li>{{ SVGAttr("v-alphabetic") }}</li> + <li>{{ SVGAttr("v-hanging") }}</li> + <li>{{ SVGAttr("v-ideographic") }}</li> + <li>{{ SVGAttr("v-mathematical") }}</li> + <li>{{ SVGAttr("values") }}</li> + <li>{{ SVGAttr("version") }}</li> + <li>{{ SVGAttr("vert-adv-y") }}</li> + <li>{{ SVGAttr("vert-origin-x") }}</li> + <li>{{ SVGAttr("vert-origin-y") }}</li> + <li>{{ SVGAttr("viewBox") }}</li> + <li>{{ SVGAttr("viewTarget") }}</li> + <li>{{ SVGAttr("visibility") }}</li> + </ul> + <h3 id="W">W</h3> + <ul> + <li>{{ SVGAttr("width") }}</li> + <li>{{ SVGAttr("widths") }}</li> + <li>{{ SVGAttr("word-spacing") }}</li> + <li>{{ SVGAttr("writing-mode") }}</li> + </ul> + <h3 id="X">X</h3> + <ul> + <li>{{ SVGAttr("x") }}</li> + <li>{{ SVGAttr("x-height") }}</li> + <li>{{ SVGAttr("x1") }}</li> + <li>{{ SVGAttr("x2") }}</li> + <li>{{ SVGAttr("xChannelSelector") }}</li> + <li>{{ SVGAttr("xlink:actuate") }}</li> + <li>{{ SVGAttr("xlink:arcrole") }}</li> + <li>{{ SVGAttr("xlink:href") }}</li> + <li>{{ SVGAttr("xlink:role") }}</li> + <li>{{ SVGAttr("xlink:show") }}</li> + <li>{{ SVGAttr("xlink:title") }}</li> + <li>{{ SVGAttr("xlink:type") }}</li> + <li>{{ SVGAttr("xml:base") }}</li> + <li>{{ SVGAttr("xml:lang") }}</li> + <li>{{ SVGAttr("xml:space") }}</li> + </ul> + <h3 id="Y">Y</h3> + <ul> + <li>{{ SVGAttr("y") }}</li> + <li>{{ SVGAttr("y1") }}</li> + <li>{{ SVGAttr("y2") }}</li> + <li>{{ SVGAttr("yChannelSelector") }}</li> + </ul> + <h3 id="Z">Z</h3> + <ul> + <li>{{ SVGAttr("z") }}</li> + <li>{{ SVGAttr("zoomAndPan") }}</li> + </ul> +</div> +<h2 id="Categories">Categories</h2> +<h3 id="Animation_event_attributes">Animation event attributes</h3> +<p>{{ SVGAttr("onbegin") }}, {{ SVGAttr("onend") }}, {{ SVGAttr("onload") }}, {{ SVGAttr("onrepeat") }}</p> +<h3 id="AnimationAttributeTarget" name="AnimationAttributeTarget">Animation attribute target attributes</h3> +<p>{{ SVGAttr("attributeType") }}, {{ SVGAttr("attributeName") }}</p> +<h3 id="Animation_timing_attributes">Animation timing attributes</h3> +<p>{{ SVGAttr("begin") }}, {{ SVGAttr("dur") }}, {{ SVGAttr("end") }}, {{ SVGAttr("min") }}, {{ SVGAttr("max") }}, {{ SVGAttr("restart") }}, {{ SVGAttr("repeatCount") }}, {{ SVGAttr("repeatDur") }}, {{ SVGAttr("fill") }}</p> +<h3 id="Animation_value_attributes">Animation value attributes</h3> +<p>{{ SVGAttr("calcMode") }}, {{ SVGAttr("values") }}, {{ SVGAttr("keyTimes") }}, {{ SVGAttr("keySplines") }}, {{ SVGAttr("from") }}, {{ SVGAttr("to") }}, {{ SVGAttr("by") }}, {{ SVGAttr("autoReverse") }}, {{ SVGAttr("accelerate") }}, {{ SVGAttr("decelerate") }}</p> +<h3 id="Animation_addition_attributes">Animation addition attributes</h3> +<p>{{ SVGAttr("additive") }}, {{ SVGAttr("accumulate") }}</p> +<h3 id="Conditional_processing_attributes">Conditional processing attributes</h3> +<p>{{ SVGAttr("requiredExtensions") }}, {{ SVGAttr("requiredFeatures") }}, {{ SVGAttr("systemLanguage") }}.</p> +<h3 id="Core_attributes">Core attributes</h3> +<p>{{ SVGAttr("id") }}, {{ SVGAttr("xml:base") }}, {{ SVGAttr("xml:lang") }}, {{ SVGAttr("xml:space") }}</p> +<h3 id="Document_event_attributes">Document event attributes</h3> +<p>{{ SVGAttr("onabort") }}, {{ SVGAttr("onerror") }}, {{ SVGAttr("onresize") }}, {{ SVGAttr("onscroll") }}, {{ SVGAttr("onunload") }}, {{ SVGAttr("onzoom") }}</p> +<h3 id="Filter_primitive_attributes">Filter primitive attributes</h3> +<p>{{ SVGAttr("height") }}, {{ SVGAttr("result") }}, {{ SVGAttr("width") }}, {{ SVGAttr("x") }}, {{ SVGAttr("y") }}</p> +<h3 id="Graphical_event_attributes">Graphical event attributes</h3> +<p>{{ SVGAttr("onactivate") }}, {{ SVGAttr("onclick") }}, {{ SVGAttr("onfocusin") }}, {{ SVGAttr("onfocusout") }}, {{ SVGAttr("onload") }}, {{ SVGAttr("onmousedown") }}, {{ SVGAttr("onmousemove") }}, {{ SVGAttr("onmouseout") }}, {{ SVGAttr("onmouseover") }}, {{ SVGAttr("onmouseup") }}</p> +<h3 id="Presentation_attributes">Presentation attributes</h3> +<div class="note"> + Note that all SVG presentation attributes can be used as CSS properties.</div> +<p>{{ 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") }}</p> +<h3 id="Transfer_function_attributes">Transfer function attributes</h3> +<p>{{ SVGAttr("type") }}, {{ SVGAttr("tableValues") }}, {{ SVGAttr("slope") }}, {{ SVGAttr("intercept") }}, {{ SVGAttr("amplitude") }}, {{ SVGAttr("exponent") }}, {{ SVGAttr("offset") }}</p> +<h3 id="XLink_attributes">XLink attributes</h3> +<p>{{ SVGAttr("xlink:href") }}, {{ SVGAttr("xlink:type") }}, {{ SVGAttr("xlink:role") }}, {{ SVGAttr("xlink:arcrole") }}, {{ SVGAttr("xlink:title") }}, {{ SVGAttr("xlink:show") }}, {{ SVGAttr("xlink:actuate") }}</p> 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 +--- +<div class="callout-box"> + <strong><a href="/en-US/docs/SVG/Tutorial" title="SVG/Tutorial">Getting Started</a></strong><br> + This tutorial will help get you started using SVG.</div> +<p><strong>Scalable Vector Graphics (SVG)</strong> is an <a href="/en-US/docs/XML" title="XML">XML</a> {{Glossary("markup language")}} for describing two-dimensional {{Glossary("vector graphics")}}. SVG is essentially to graphics what {{Glossary("XHTML")}} is to text.</p> +<p>SVG is similar in scope to Adobe's proprietary Flash technology, but what distinguishes SVG from Flash is that it is a <a href="http://www.w3.org/Graphics/SVG/">W3C recommendation</a> (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 <a href="http://www.w3.org/">W3C</a> standards such as <a href="/en-US/docs/CSS" title="CSS">CSS</a>, <a href="/en-US/docs/DOM" title="DOM">DOM</a> and <a href="http://www.w3.org/AudioVideo/">SMIL</a>.</p> +<div class="cleared row topicpage-table"> + <div class="section"> + <h2 class="Documentation" id="Documentation">Documentation</h2> + <dl> + <dt> + <a href="/en-US/docs/Web/SVG/Element">SVG element reference</a></dt> + <dd> + Get details about each SVG element.</dd> + <dt> + <a href="/en-US/docs/Web/SVG/Attribute">SVG attribute reference</a></dt> + <dd> + Get details about each SVG attribute.</dd> + <dt> + <a href="/en-US/docs/DOM/DOM_Reference#SVG_interfaces">SVG DOM interface reference</a></dt> + <dd> + Get details about the whole SVG DOM API.</dd> + <dt> + Enhance HTML content</dt> + <dd> + SVG works together with {{Glossary("HTML")}}, {{Glossary("CSS")}} and {{Glossary("JavaScript")}}. Use SVG to enhance a regular HTML page or web application.</dd> + <dt> + SVG in Mozilla</dt> + <dd> + Notes and information on how SVG is implemented in Mozilla. + <ul> + <li><a href="/en-US/docs/SVG_in_Firefox">How much SVG is implemented in Firefox</a></li> + <li><a href="/en-US/docs/Web/SVG/Tutorial">Tutorial for how to use </a></li> + <li><a href="/en-US/docs/SVG_In_HTML_Introduction">SVG in XHTML</a></li> + </ul> + </dd> + </dl> + <p><span class="alllinks"><a href="/en-US/docs/tag/SVG">View All...</a></span></p> + <h2 class="Community" id="Community">Community</h2> + <ul> + <li>View Mozilla forums... {{DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg")}}</li> + </ul> + <h2 class="Tools" id="Tools">Tools</h2> + <ul> + <li><a href="http://www.w3.org/Graphics/SVG/Test/">SVG Test Suite</a></li> + <li><a href="http://jiggles.w3.org/svgvalidator/">SVG Validator</a> (Discontinued)</li> + <li><a href="/en-US/docs/tag/SVG:Tools" title="tag/SVG:Tools">More Tools...</a></li> + <li>Other resources: <a href="/en-US/docs/XML">XML</a>, <a href="/en-US/docs/CSS">CSS</a>, <a href="/en-US/docs/DOM">DOM</a>, <a href="/en-US/docs/HTML/Canvas">Canvas</a></li> + </ul> + </div> + <div class="section"> + <h2 class="Related_Topics" id="Examples">Examples</h2> + <ul> + <li>Google <a href="http://maps.google.com">Maps</a> (route overlay) & <a href="http://docs.google.com">Docs</a> (spreadsheet charting)</li> + <li><a href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">SVG bubble menus</a></li> + <li><a href="http://jwatt.org/svg/authoring/">SVG authoring guidelines</a></li> + <li>An overview of the <a href="/en-US/docs/Mozilla_SVG_Project">Mozilla SVG Project</a></li> + <li><a href="/en-US/docs/SVG/FAQ" title="SVG/FAQ">Frequently asked questions</a> regarding SVG and Mozilla</li> + <li>Slides and demos from talk on <a href="http://jwatt.org/svg-open-US/docs/2009/slides.xhtml">SVG and Mozilla</a> at SVG Open 2009</li> + <li><a href="/en-US/docs/SVG/SVG_as_an_Image">SVG as an image</a></li> + <li><a href="/en-US/docs/SVG/SVG_animation_with_SMIL">SVG animation with SMIL</a></li> + <li><a href="http://plurib.us/1shot/2007/svg_gallery/">SVG art gallery</a></li> + <li>More samples (<a href="http://croczilla.com/bits_and_pieces/svg/samples">SVG Samples croczilla.com</a>, <a href="http://www.carto.net/papers/svg/samples/">carto.net</a>)</li> + </ul> + <h3 id="Animation_and_interactions">Animation and interactions</h3> + <p>Like HTML, SVG has a document model (DOM), events and is accessible from JavaScript. This allows developers to create rich animations and interactive images.</p> + <ul> + <li>Some real eye-candy SVG at <a href="http://svg-wow.org/">svg-wow.org</a></li> + <li>Firefox extension (<a href="http://schepers.cc/grafox/">Grafox</a>) to add a subset of {{Glossary("SMIL")}} animation support</li> + <li>Interactive <a href="http://people.mozilla.com/~vladimir/demos/photos.svg">photos</a> manipulation</li> + <li><a href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">HTML transformations</a> using SVG's <code>foreignObject</code></li> + </ul> + <h3 id="Mapping_charting_games_3D_experiments">Mapping, charting, games & 3D experiments</h3> + <p>While a little SVG can go a long way to enhanced web content, here are some examples of heavy SVG usage.</p> + <ul> + <li><a href="http://www.codedread.com/yastframe.php">Tetris</a></li> + <li><a href="https://web.archive.org/web/20131019072450/http://www.treebuilder.de/svg/connect4.svg" title="Archive link provided because source now requires authentication.">Connect 4</a></li> + <li><a href="http://www.carto.net/papers/svg/us_population/index.html">US population map</a></li> + <li><a href="http://www.treebuilder.de/default.asp?file=441875.xml">3D box</a> & <a href="http://www.treebuilder.de/default.asp?file=206524.xml">3D boxes</a></li> + <li><a href="http://jvectormap.com/">jVectorMap</a> (interactive maps for data visualization)</li> + </ul> + </div> +</div> +<p> </p> 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 +--- +<p dir="rtl">تقودك الروابط في هذه الصفحة إلى دروس ومواد تدريبيّة متنوعة. <strong>سواءً كنت في بداياتك، أو تتعلم الأساسيات، أو كنت مطوراً مُخضرماً، فستجد في هذه الصفحة مصادر مفيدة لأفضل الممارسات البرمجيّة</strong>. هذه المصادر مُنشئَة من قبل شركات رائدة ومطورين ويب مِمَن تبنوا معايير المصادر المفتوحة والممارسات التطويريّة الفُضلى، كما توفِر أو تسمح بإنشاء ترجمات من خلال رخص مفتوحة مثل المشاع الإبداعي (Creative Commons).</p> + +<h2 dir="rtl" id="للجدد_على_الويب">للجدد على الويب</h2> + +<dl> + <dt dir="rtl"><a href="/ar/docs/Learn/Getting_started_with_the_web">البدء مع الويب</a></dt> + <dd dir="rtl"> + <p>البدء مع الويب هي سلسلة موجزة تُعرِّفُك على عملية تطوير الويب. سوف نبدأ معك من إعداد الأدوات التي ستحتاجها لبناء صفحة ويب بسيطة وصولاً لعمليّة نشرها.</p> + </dd> +</dl> + +<h2 class="Documentation" dir="rtl" id="Documentation" name="Documentation">دروس عن لغة ترميز النص الفائق (HTML)</h2> + +<h3 dir="rtl" id="مستوى_مُبتدئ">مستوى مُبتدئ</h3> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt dir="rtl"><a href="/ar/docs/Learn/HTML/Introduction_to_HTML">مقدمة إلى لغة ترميز النص الفائق (HTML)</a></dt> + <dd dir="rtl">تُعَد هذه الوحدة تمهيداً للطريق حيث تُهيِئُك لتعلم الصيغة الكتابيّة والمفاهيم الأساسيّة في اللغة، مغطيةً مواضيع مثل التعامل مع النصوص، إنشاء روابط تشعيبيّة (hyperlinks)، وكيفيّة استخدام اللغة لهيكلة صفحة ويب.</dd> + <dt dir="rtl"><a href="/ar/docs/HTML/Element">مرجع MDN لعناصر لغة ترميز النص الفائق HTML</a></dt> + <dd dir="rtl">مرجع شامل لعناصر لغة ترميز النص الفائق، ودعم المتصفحات المختلفة لكلٍ منها.</dd> + <dt dir="rtl"><a href="https://www.theblogstarter.com/html-for-beginners">إنشاء صفحة بسيطة باستخدام لغة ترميز النص الفائق HTML</a> (موقع <strong>The Blog Starter</strong>)</dt> + <dd dir="rtl">دليل لغة ترميز النص الفائق للمبتدئين يتضمن شروحات للوسوم الشائعة، ولوسوم الإصدار الخامس من اللغة. يتضمن هذا المرجع أيضاً دليل تدريجي لبناء صفحة ويب بسيطة.</dd> + <dt dir="rtl"><a href="https://www.theblogstarter.com/html-for-beginners">تحديات في لغة ترميز النص الفائق HTML </a>(موقع <strong>Wikiversity</strong>)</dt> + <dd dir="rtl">استخدم هذه التحديات لتشحذ مهاراتك (على سبيل المثال، "هل يجب أن استخدم العنصر <code><h2></code> أم العنصر <code><strong></code>؟")، ولتُركِز على مهارة التنسيق الدقيق (استخدام العنصر الصحيح في الوقت الصحيح وبالشكل الصحيح).</dd> +</dl> +</div> +</div> + +<h3 dir="rtl" id="مستوى_متوسط">مستوى متوسط</h3> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt dir="rtl"><a href="/ar/docs/Learn/HTML/Multimedia_and_embedding">الوسائط المتعددة (Multimedia) و التضمين (Embedding)</a></dt> + <dd dir="rtl">نستكشف في هذه الوحدة كيفيّة استخدام لغة ترميز النص الفائق لتضمين الوسائط المتعددة (multimedia) المختلفة في مواقع الويب، كما ونغطي الطرق المُختلفة التي يمكن استخدامها لتضمين الصور، وإضافة ملفات الفيديو والصوت، أو حتى تضمين موقع آخر بأكمله.</dd> + <dt dir="rtl"><a href="/ar/docs/Learn/HTML/Tables">الجداول في لغة ترميز النص الفائق HTML</a></dt> + <dd dir="rtl">يُشكِل تقديم البيانات المجدولة في الموقع بشكل مفهوم، ومُتاح (accessible) تحدياً. تغطي هذه الوحدة مبادئ هيكلة الجداول، كما تغطي مزايا أكثر تعقيداً مثل التعليقات (captions) والخلاصات (summaries) الجدوليّة.</dd> +</dl> +</div> +</div> + +<h3 dir="rtl" id="مستوى_متقدم">مستوى متقدم</h3> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt dir="rtl"><a href="/ar/docs/Learn/HTML/Forms">الاستمارات (Forms) في لغة ترميز النص الفائق HTML</a></dt> + <dd dir="rtl">الاستمارات (Forms) هي جزء مهم جداً من الويب، فهي توفر آليّة للتفاعل مع المواقع (على سبيل المثال، التسجيل وتسجيل الدخول، وإرسال التعليقات، وشراء المنتجات، وغيرها من الأمور). تُهيئك هذه الوحدة على إنشاء أجزاء الاستمارات المتعلقة بجهة العميل (client-side).</dd> + <dt dir="rtl"><strong><a href="/ar/docs/Tips_for_Authoring_Fast-loading_HTML_Pages">نصائح لكتابة صفحات HTML سريعة التحميل</a></strong></dt> + <dd dir="rtl">تعطي المقالة نصائح لكتابة صفحات ويب توفِر استجابة أكبر للزوار وتُقلل من الحمل على خادم والويب وإتصال الإنترنت.</dd> +</dl> +</div> +</div> + +<h2 class="Documentation" dir="rtl" id="Documentation" name="Documentation">دروس عن تقنيّة صفحات الأنماط الانسيابية (CSS)</h2> + +<h3 dir="rtl" id="مستوى_مبتدئ">مستوى مبتدئ</h3> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt dir="rtl"><a href="/ar/docs/Learn/Getting_started_with_the_web/CSS_basics">أساسيات صفحات الأنماط الانسيابية CSS</a></dt> + <dd dir="rtl">تُستخدم هذه التقنيّة (CSS) لتصميم مظهر صفحتك. تبدأ معك هذه المقالة من ما ستحتاجه لتبدأ العمل. سنجيب عن أسئلة مثل: كيف يمكنني جعل لون نصي أسود أو أحمر؟ كيف يمكنني جعل محتواي يظهر في المكان الفلاني على الشاشة؟ كيف أُزخرِف صفحتي بصورة أو بلون في الخلفيّة؟</dd> + <dt dir="rtl"><a href="/ar/docs/Learn/CSS/Introduction_to_CSS">مقدمة في صفحات الأنماط الانسيابية CSS</a></dt> + <dd dir="rtl">تبدأ هذه الوحدة معك بأساسيات عمل هذه التقنيّة، متضمنةً معلومات عن المحددات (selectors) والخواص (properties)، وكتابة التعليمات، وتطبيق التنسيقات المجراة على صفحة لغة ترميز النص الفائق، وكيفيّة تحديد الطول واللون وأمور أخرى، والتتالي (cascade)، والوراثة (inheritance)، وأساسيات نموذج الصندوق (box model)، والتنقيح (debugging).</dd> + <dt dir="rtl"><a class="new" href="/ar/docs/Learn/CSS/Styling_boxes" rel="nofollow">صناديق التصميم</a></dt> + <dd dir="rtl">سنأخذ في هذه الوحدة نظرة على صناديق التصميم (styling boxes)، والتي تعد واحدة من الخطوات الأساسيّة نحو تنظيم صفحة الويب. في هذه المقالة سنلخص نموذج الصندوق (box model)، وبعدها سنأخذ نظرة حول التحكم بنماذج الصندوق عن طريق إعداد الحشو (margin)، والحواف (border)، والهوامش (padding)، وإعداد لون خلفية مخصصة، والصور وغيرها من الميزات. كما تشرح المقالة ميزات زخرفيّة، مثل استخدام الظلال (shadows) والمرشحات (filters) على الصناديق.</dd> + <dt dir="rtl"><a class="new" href="/ar/docs/Learn/CSS/Styling_text" rel="nofollow">تنسيق النصوص</a></dt> + <dd dir="rtl">تحتوي هذه المقالة على شرح لأساسيات تنسيق النصوص. تتضمن المقالة أيضاً معلومات عن كيفيّة إعداد الخطوط الغامقة والمائلة، والمسافات بين الحروف والسطور، والظلال، وغيرها من خواص النصوص. ننهي المقالة بشرح كيفيّة إضافة خطوط مخصصة لصفحتك، وتنسيق القوائم والروابط.</dd> + <dt dir="rtl"><a href="/ar/docs/Common_CSS_Questions">الأسئلة الشائعة حول تقنيّة CSS</a></dt> + <dd dir="rtl">الأسئلة الشائعة المطروحة من المبتدئين حول اللغة وأجوبتها.</dd> +</dl> +</div> +</div> + +<h3 dir="rtl" id="مستوى_متوسط_2">مستوى متوسط</h3> + +<div class="row topicpage-table" style="width: 100%;"> +<div class="section"> +<dl> + <dt dir="rtl"><a class="new" href="/ar/docs/Learn/CSS/CSS_layout" rel="nofollow">نظام الترتيب للـ CSS</a></dt> + <dd dir="rtl">في هذه المرحلة سنكون قد أخذنا نظرة حول أساسيات صفحات الأنماط الانسيابية، بدءً من كيفيّة تنسيق النصوص، إلى تنسيق والتلاعب بالصناديق التي يوجد بها محتواك. الآن حان الوقت لأخذ نظرة حول كيفيّة وضع صناديقك في المكان المناسب. قد غطينا في هذه المقالة المتطلبات الضروريّة اللازمة حتّى تتمكن من الغوص في عالم النمذجة (layout)، وتتمكن من تعلم إعدادات العرض المختلفة، وطرق النمذجة التقليديّة والتي تنطوي على التعويم (float)، والتعيين (positioning)، وأدوات التخطيط الجديدة مثل الصندوق المرن (flexbox).</dd> + <dt dir="rtl"><strong><a href="/ar/docs/CSS/CSS_Reference">مرجع صفحات الأنماط الانسيابية CSS</a></strong></dt> + <dd dir="rtl">مرجع شامل للتقنيّة، مع تفاصيل دعم خواصها من مُتصفح فايرفوكس وغيره من المتصفحات.</dd> +</dl> +</div> + +<div class="section"> +<dl> + <dt dir="rtl"><strong><a href="http://www.alistapart.com/articles/fluidgrids/" rel="external">شبكات التخطيط السلسة (Fluid Grids)</a> (موقع A List Apart)</strong></dt> + <dd dir="rtl">تصميم نماذج تتحجم بسلاسة مع نافذة المتصفح باستخدام الشبكة الطباعيّة (typographic grid).</dd> + <dt dir="rtl"><a href="http://en.wikiversity.org/wiki/Web_Design/CSS_challenges">تحديات في صفحات الأنماط الانسيابية CSS</a> (موقع <strong>Wikiversity</strong>)</dt> + <dd dir="rtl">اشحذ مهاراتك، واكتشف نقاط الضعف لديك لتتمرن أكثر مع هذه التمرينات العمليّة.</dd> +</dl> +</div> +</div> + +<h3 dir="rtl" id="مستوى_متقدم_2">مستوى متقدم</h3> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt dir="rtl"><a href="/ar/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">استخدام التحويلات الهندسيّة في صفحات الأنماط الانسيابية CSS</a></dt> + <dd dir="rtl">تطبيق التدوير (rotation)، والميلان (skewing)، والتحجيم (scaling)، والإزاحة (translation) باستخدام صفحات الأنماط الانسيابية.</dd> + <dt dir="rtl"><strong><a href="/ar/docs/CSS/CSS_transitions">تقنيّة الانتقالات (المقطع الانتقالي) في CSS</a></strong></dt> + <dd dir="rtl">توفر تقنيّة الانتقالات (أو المقطع الانتقالي - transitions)، التي تعد جزءً من مسودة الإصدار الثالث من صفحات الأنماط الانسيابية، وسيلة لإحياء (animate) التغييرات في خصائص اللغة، بدلاً من تنفيذها فورياً.</dd> + <dt dir="rtl"><a href="http://www.html5rocks.com/tutorials/webfonts/quick/">الدليل السريع لاستخدام الخطوط (Fonts) باستخدام الخاصية font-face@</a> (موقع <strong>HTML5 Rocks</strong>)</dt> + <dd dir="rtl">تتيح لك الخاصيّة <code>font-face@</code> في الإصدار الثالث من صفحات الأنماط الانسيابية استخدام الخطوط المُخصصة في مواقع الويب بطريقة سهلة الوصول إليها، سهلة الاستخدام، وقابلة للتوسع.</dd> +</dl> +</div> +</div> + +<div class="section"> +<dl> + <dt dir="rtl"><a href="/ar/docs/Web/API/Canvas_API/Tutorial">دورة كانفاس (Canvas)</a></dt> + <dd dir="rtl">تعلم طريقة رسم الرسومات برمجياً باستخدام عنصر الكانفاس (canvas).</dd> +</dl> +</div> + +<h2 class="Documentation" dir="rtl" id="Documentation" name="Documentation">دروس عن لغة الجافاسكربت JavaScript</h2> + +<h3 dir="rtl" id="مستوى_مبتدئ_2">مستوى مبتدئ</h3> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt dir="rtl"><a class="new" href="/ar/docs/Learn/JavaScript/First_steps" rel="nofollow">الخطوات الأولى مع الجافاسكربت</a></dt> + <dd dir="rtl">تجيب هذه المقالة عن بعض الأسئلة الأساسيّة، مثل "ما هي الجافاسكربت؟"، "كيف تبدو هذه اللغة؟"، "ماذا بإمكانها أن تفعل؟"، بالإضافة إلى مناقشة بعض الميزات الأساسيّة للغة مثل المتغيّرات، والسلاسل النصية، والأرقام، والمصفوفات.</dd> + <dt dir="rtl"><a href="/ar/docs/Learn/JavaScript/Building_blocks">العناصر الأساسية للغة الجافاسكربت</a></dt> + <dd dir="rtl">نكمل رحلتنا في تغطيّة المفاهيم الأساسية في لغة الجافاسكربت، ففي هذه المقالة قمنا بالتركيز على البنى الكتليّة الشائعة في اللغة مثل الجمل الشرطيّة، والحلقات، والدوال، والأحداث.</dd> +</dl> +</div> + +<div class="section"> +<dl> + <dt dir="rtl"><a href="/ar/docs/Learn/Getting_started_with_the_web/JavaScript_basics">البدء مع لغة الجافاسكربت</a></dt> + <dd dir="rtl">ما هي لغة الجافاسكربت وكيف يمكن أن تساعدك؟</dd> + <dt dir="rtl"><strong><a href="http://www.codecademy.com/">موقع Codecademy</a></strong></dt> + <dd dir="rtl">موقع سهل لتعليم كيفيّة البرمجة باستخدام لغة الجافاسكربت. يوفِر لك الموقع منصة تفاعليّة، كما يمكنك استخدامه أيضاً للتعلم مع أصدقاءك.</dd> +</dl> +</div> +</div> + +<h3 dir="rtl" id="مستوى_متوسط_3">مستوى متوسط</h3> + +<dl> + <dt dir="rtl"><a href="/ar/docs/Learn/JavaScript/Objects">مقدمة إلى الكائنات في الجافاسكربت</a></dt> + <dd dir="rtl">من المهم فهم البرمجة الشيئيّة في اللغة إذا أردت زيادة معرفتك والتمكن من كتابة شيفرة برمجيّة أكثر فعاليّة، من أجل ذلك قمنا بتوفير هذه الوحدة لك.</dd> +</dl> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt dir="rtl"><a href="/ar/docs/Learn/JavaScript/Client-side_web_APIs">واجهات التصميم البرمجيّة (APIs) لجهة المستخدم (Client-side) </a></dt> + <dd dir="rtl">لن تستطيع العمل جيداً عند تطوير جهة المستخدم (client-side) باستخدام الجافاسكربت من دون تعلمك للواجهات البرمجيّة المتخصصة، فهي واجهات للتلاعب بأجزاء مختلفة من المُتصفِح ونظام التشغيل الذي يعمل عليه الموقع، أو حتى التلاعب بحقول بيانات مواقع أو خدمات أخرى. في هذه الوحدة سنستكشف ماهيّة هذه الواجهات، وكيف تستخدم بعض من أكثر تلك الواجهات شيوعاً والتي ستحتاجها غالباً في عملك.</dd> +</dl> +</div> + +<div class="section"> +<dl> + <dt dir="rtl"><strong><a href="/ar/docs/A_re-introduction_to_JavaScript">إعادة تقديم لغة الجافاسكربت</a></strong></dt> + <dd dir="rtl">ملخص للغة الجافاسكربت يستهدف المطورين متوسطي الخبرة.</dd> + <dt dir="rtl"><strong><a href="http://eloquentjavascript.net/" rel="external">الجافاسكربت الفصيح (Eloquent JavaScript) </a></strong></dt> + <dd dir="rtl">دليل شامل للمنهجيات (methodologies) المتقدمة والمتوسطة للغة الجافاسكربت .</dd> +</dl> +</div> +</div> + +<h3 dir="rtl" id="مستوى_متقدم_3">مستوى متقدم</h3> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt dir="rtl"><a href="/ar/docs/Web/JavaScript/Guide">دليل لغة الجافاسكربت</a></dt> + <dd dir="rtl">دليل شامل ومُحدَث باستمرار للغة الجافاسكربت لجميع المستويات من المبتدئ إلى المحترف.</dd> + <dt dir="rtl"><strong><a href="https://github.com/getify/You-Dont-Know-JS" rel="external">أنت لا تعرف لغة الجافاسكربت</a> (Kyle Simpson)</strong></dt> + <dd dir="rtl">سلسلة من الكِتُب تتعمق في آليات لغة الجافاسكربت الجوهريّة.</dd> + <dt dir="rtl"><strong><a href="http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/">كيف تعمل المتصفحات</a></strong></dt> + <dd dir="rtl"> + <div id="gt-res-content"> + <div class="trans-verified-button-small" dir="rtl" id="gt-res-dir-ctr"><span id="result_box" lang="ar"><span>مقالة بحثيّة تفصيليّة تشرح المتصفحات الحديثة المختلفة ومحركاتها وآلية عرضها للصفحات ...إلخ.</span></span></div> + </div> + </dd> + <dt dir="rtl"><a href="https://github.com/bolshchikov/js-must-watch">فيديوهات عن لغة الجافاسكربت</a> (جيتهاب)</dt> + <dd dir="rtl">مجموعة من الفيديوهات عن لغة الجافاسكربت.</dd> +</dl> +</div> +</div> + +<h3 dir="rtl" id="تطوير_إضافات_المتصفح">تطوير إضافات المتصفح</h3> + +<div class="row topicpage-table" style="width: 100%;"> +<div class="section"> +<dl> + <dt dir="rtl"><a href="/ar/docs/Mozilla/Add-ons/WebExtensions">تقنيّة WebExtensions</a></dt> + <dd dir="rtl">نظام عابر للمتصفحات (cross-browser) لتطوير الإضافات. يتوافق النظام إلى حدٍ كبير مع <a class="external external-icon" href="https://developer.chrome.com/extensions" rel="noopener">واجهة الإضافات البرمجيّة</a> المدعومة بواسطة متصفخ جوجل وكروم وأوبرا، كما يتوافق مع <a class="external external-icon" href="https://browserext.github.io/browserext/" rel="noopener">مسودة W3C المجتمعيّة</a>. الإضافات المكتوبة لتلك المتصفحات ستعمل على فايرفوكس و<a class="external external-icon" href="https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/extensions/" rel="noopener">مايكروسوفت أيدج</a> في معظم الحالات <a href="https://developer.mozilla.org/ar/Add-ons/WebExtensions/Porting_from_Google_Chrome">بتغييرات طفيفة</a>. الواجهة البرمجيّة متوافقة أيضاً مع <a href="https://developer.mozilla.org/ar/Firefox/Multiprocess_Firefox">فايرفوكس متعدد العمليات</a> (multiprocess firefox).</dd> +</dl> +</div> +</div> diff --git a/files/ar/web/حماية/index.html b/files/ar/web/حماية/index.html new file mode 100644 index 0000000000..c9c30e8ca4 --- /dev/null +++ b/files/ar/web/حماية/index.html @@ -0,0 +1,16 @@ +--- +title: حماية الويب +slug: Web/حماية +tags: + - Landing + - Security + - Web +translation_of: Web/Security +--- +<div class="summary" dir="rtl"> +<p>من الضروري ضمان أن موقع الويب أو تطبيق الويب المفتوح آمن. حتى الأخطاء البسيطة في التعليمات البرمجية الخاصة بك يمكن أن تؤدي إلى تسرب المعلومات الخاصة ، والأشخاص السيئين يحاولون إيجاد طرق لسرقة البيانات. توفر المقالات الموجهة لأمان الويب الواردة هنا معلومات قد تساعدك في تأمين موقعك ورمزه من الهجمات وسرقة البيانات.</p> +</div> + +<p>{{LandingPageListSubpages}}{{QuickLinksWithSubpages}}</p> + +<div id="eJOY__extension_root"></div> diff --git a/files/ar/web/مرجع/index.html b/files/ar/web/مرجع/index.html new file mode 100644 index 0000000000..fc7fd86cda --- /dev/null +++ b/files/ar/web/مرجع/index.html @@ -0,0 +1,42 @@ +--- +title: مرجع تكنولوجيا الويب. +slug: Web/مرجع. +tags: + - مراجع +translation_of: Web/Reference +--- +<p>تم بناء الويب المفتوح باستخدام عدد من التقنيات.أدناه سوف تجد روابط لمراجعنا التي توضح كل تقنية.</p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="تقنيات_الويب_الأساسية">تقنيات الويب الأساسية</h2> + +<p>{{ Page ("Web", "Web technologies") }}</p> +</div> + +<p><span class="seoSummary">تعتمد شبكة الويب المفتوحة على عدد من التقنيات التي يمكن استخدامها معًا لإنشاء كل شيء بدءًا من المواقع البسيطة وحتى تطبيقات الويب القوية. ستجد أدناه روابط لمجموعة مختارة من الوثائق الرئيسية لكل منها. </span></p> + +<div id="Web_technologies"> +<p>إذا كنت جديدًا في مجال تطوير الويب ، ففكر في <a href="/en-US/docs/Learn/Getting_started_with_the_web"> البدء بمنطقة التعلم </a> المليئة بالبرامج التعليمية خطوة بخطوة من شأنها أن ترشدك من مبتدئ webdev إلى شبه محترف على الأقل! </p> + +<dl> + <dt><a href="/en-US/docs/Glossary/HTML">HTML </a> - هيكلة الويب تُستخدم</dt> + <dd><strong>HyperText Markup Language </strong> لتعريف ووصف محتوى صفحة الويب (<a href="/en-US/docs/Glossary/markup"> </a>) لصفحة الويب بتنسيق جيد التنظيم. يوفر HTML وسيلة لإنشاء مستندات منظمة مكونة من كتل تسمى <a href="/en-US/docs/Web/HTML/Element"> عناصر HTML </a> المحددة بواسطة <em> <a href=" / en-US / docs / Glossary / Tag "> العلامات </a> </em> ، مكتوبة باستخدام أقواس معقوفة. يقدم البعض المحتوى في الصفحة مباشرةً ، بينما يوفر البعض الآخر معلومات حول نص المستند وقد يتضمن علامات أخرى كعناصر فرعية. من الواضح أن المتصفحات لا تعرضها ، حيث يتم استخدامها لتفسير محتوى الصفحة.<br> + <br> + <a href="/en-US/Learn/HTML/Introduction_to_HTML">مقدمة إلى HTML </a> | <a href="/en-US/Learn/HTML"> تعلم HTML </a> | <a href="/en-US/docs/Web/Guide/HTML/HTML5"> HTML5 </a> | <a href="/en-US/docs/Web/Guide/HTML"> دليل المطور </a> | <a href="/en-US/docs/Web/HTML/Element"> مرجع العنصر </a> | <a href="https://orientdetectors.com"> المرجع </a></dd> + <dt><a href="/en-US/docs/Glossary/CSS">CSS </a> - تصميم الويب تستخدم</dt> + <dd><strong>أوراق الأنماط المتتالية لوصف مظهر محتوى الويب.<br> + <br> + <a href="/en-US/Learn/CSS/Introduction_to_CSS">مقدمة إلى CSS </a> | <a href="/en-US/docs/Web/Guide/CSS/Getting_started"> بدء استخدام CSS </a> | <a href="/en-US/Learn/CSS"> تعلم CSS </a> | <a href="/en-US/docs/Web/CSS/Common_CSS_Questions"> أسئلة CSS الشائعة </a> | <a href="/en-US/docs/Web/CSS/Reference"> المرجع </a> </strong></dd> + <dt><strong><a href="/en-US/docs/Glossary/JavaScript">JavaScript </a> - برمجة نصية ديناميكية من جانب العميل </strong></dt> + <dd><strong>تُستخدم لغة البرمجة <strong> JavaScript </strong> لإضافة التفاعل والميزات الديناميكية الأخرى إلى مواقع الويب. </strong></dd> + <dd><strong><a href="/en-US/docs/Learn/JavaScript">تعلم JavaScript </a> | <a href="/en-US/docs/Web/JavaScript/Guide"> دليل المطور </a> | <a href="/en-US/docs/Web/JavaScript/Reference"> المرجع </a> </strong></dd> +</dl> + +<div class="section"> +<p><strong>{{draft()}}</strong></p> + +<p><strong>هذه الصفحة <a href="/en-US/docs/Project:MDN/Plans_and_status/Web_platform">معنية لأن تكون </a> الصفحة المرجعية لمنصة الويب.هذه الصفحة سوف توفر روابطاً للصفحة الأساسية التي تحتوي كل منها واحدة من تطبيقات الواجهة البرمجية التي يمكن إستعمالها على منصة الويب (و لكن هذه الصفحات لن تحتوي صفحات فرعية).</strong></p> +</div> +</div> +</div> diff --git a/files/ar/web_development/index.html b/files/ar/web_development/index.html new file mode 100644 index 0000000000..6f1cac663e --- /dev/null +++ b/files/ar/web_development/index.html @@ -0,0 +1,97 @@ +--- +title: Web Development +slug: Web_Development +tags: + - NeedsTranslation + - TopicStub + - Web Development +translation_of: Web/Guide +--- +<p><strong>Web development</strong> comprises all aspects of developing a web site or web application.</p> +<p>Learn how to create anything from a simple web site to complex, highly interactive web sites featuring the latest Web technologies by perusing the articles you'll find here.</p> +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Documentation_topics">Documentation topics</h2> + <h3 id="Technologies">Technologies</h3> + <dl> + <dt> + <a class="internal" href="/en-US/docs/Web_Development/Introduction_to_Web_development" title="en-US/docs/Web Development/Introduction to Web development">Introduction to Web development</a></dt> + <dd> + A guide to learning how to develop for the Web.</dd> + <dt> + <a class="internal" href="/en-US/docs/HTML" rel="internal">HTML</a></dt> + <dd> + HyperText Markup Language is the basic language for creating web pages and other documents displayed in a browser.</dd> + <dt> + <a class="internal" href="/en-US/docs/CSS" rel="internal">CSS</a></dt> + <dd> + Cascading Style Sheets make it possible to do advanced layout and page design on the Web.</dd> + <dt> + <a class="internal" href="/en-US/docs/JavaScript" rel="internal">JavaScript</a></dt> + <dd> + JavaScript is the most commonly used scripting language for developing web applications; it's also used in the development of Mozilla-based software.</dd> + <dt> + <a class="internal" href="/en-US/docs/DOM" rel="internal">DOM</a></dt> + <dd> + The Document Object Model is an API for HTML and XML documents, providing a structural representation of the document that you can modify in order to alter its visual presentation.</dd> + <dt> + <a class="internal" href="/en-US/docs/AJAX" rel="internal">AJAX</a></dt> + <dd> + Asynchronous JavaScript and XML isn't so much a technology as a combination of technologies; using JavaScript and other modern web technologies together to create dynamic web applications.</dd> + <dt> + <a class="internal" href="/en-US/docs/XHTML" title="en-US/docs/XHTML">XHTML</a></dt> + <dd> + Extensible HyperText Markup Language is an XML-based HTML-like language that offers a stricter syntax than HTML.</dd> + <dt> + <a class="internal" href="/en-US/docs/SVG" rel="internal">SVG</a></dt> + <dd> + Scalable Vector Graphics is an XML markup language for describing 2D vector graphics.</dd> + </dl> + <h3 id="Strategies">Strategies</h3> + <dl> + <dt> + <a class="internal" href="/en-US/docs/Web_Standards" title="en-US/docs/Web Standards">Web standards</a></dt> + <dd> + Learn how to make your Web site or application reach the largest number of users through compatibility with the open Web.</dd> + <dt> + <a href="/en-US/docs/Web_Development/Responsive_Web_design" title="en-US/docs/Web development/Responsive Web design">Responsive Web design</a></dt> + <dd> + Use CSS to present the same content across all hardware platforms, from mobile phones to wide-screen, high-res desktop displays.</dd> + <dt> + <a href="/en-US/docs/Web_development/Writing_forward-compatible_websites" title="Writing forward-compatible websites">Writing forward-compatible websites</a></dt> + <dd> + Best practices for creating websites that do not break when browsers are updated.</dd> + <dt> + <a href="/en-US/docs/Web_Development/Mobile" title="/en-US/docs/Web development/Mobile">Mobile Web development</a></dt> + <dd> + Developing sites for be viewed on mobile devices involves some unique approaches that may not be familiar to those accustomed to developing for desktop browsers.</dd> + <dt> + <a class="internal" href="/en-US/docs/Mozilla_Web_Developer_FAQ" title="en-US/docs/Mozilla Web Developer FAQ">Mozilla Web developer FAQ</a></dt> + <dd> + Frequently asked questions from Web developers. With answers!</dd> + </dl> + <p><span class="alllinks"><a href="/en-US/docs/tag/Web_Development" title="en-US/docs/tag/Web_Development">View All...</a></span></p> + </td> + <td> + <h2 class="Community" id="Community">Community</h2> + <ul> + <li><a class="external" href="http://hacks.mozilla.org" title="http://hacks.mozilla.org">Mozilla Hacks blog</a></li> + <li><a class="external" href="http://www.whatwg.org/" rel="external nofollow" title="http://www.whatwg.org/">WHAT Working Group</a></li> + <li><a class="external" href="http://webdevfeedhouse.com/" rel="external nofollow" title="http://webdevfeedhouse.com/">WebDev FeedHouse</a></li> + </ul> + <h2 class="Tools" id="Tools">Tools</h2> + <ul> + <li><a href="/en-US/docs/Tools" title="en-US/docs/Tools">Main Tools page</a></li> + <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1843" rel="external nofollow" title="https://addons.mozilla.org/en-US/firefox/addon/1843">Firebug extension</a></li> + <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/60" rel="external nofollow" title="https://addons.mozilla.org/en-US/firefox/addon/60">Web Developer extension</a></li> + <li><a href="/en-US/docs/Venkman" rel="internal">Venkman</a>, the JavaScript debugger</li> + <li><a href="/en-US/docs/DOM_Inspector" rel="internal" title="en-US/docs/DOM Inspector">DOM Inspector</a></li> + <li><a href="/en-US/docs/Tools/Scratchpad" title="en-US/docs/Tools/Scratchpad">Scratchpad</a></li> + </ul> + <p><span class="alllinks"><a href="/en-US/docs/tag/Web_Development:Tools" title="en-US/docs/tag/Web_Development:Tools">View All...</a></span></p> + </td> + </tr> + </tbody> +</table> diff --git a/files/ar/web_development/mobile/index.html b/files/ar/web_development/mobile/index.html new file mode 100644 index 0000000000..112d15199d --- /dev/null +++ b/files/ar/web_development/mobile/index.html @@ -0,0 +1,17 @@ +--- +title: Mobile Web development +slug: Web_Development/Mobile +tags: + - Mobile + - NeedsTranslation + - TopicStub + - Web Development +translation_of: Web/Guide/Mobile +--- +<p>Developing web sites to be viewed on mobile devices requires approaches that ensure a web site works as well on mobile devices as it does on desktop browsers. The following articles describe some of these approaches.</p> +<ul> + <li><a class="vt-p" href="/en/Web_Development/Mobile/Mobile-friendliness" title="/en/Web_development/Mobile/Mobile-friendliness">What is mobile-friendliness?</a></li> + <li><a class="vt-p" href="/en/Web_Development/Mobile/Separate_sites" title="en/Web_development/Mobile/Separate sites">Separate sites</a></li> + <li><a class="vt-p" href="/en/Web_Development/Mobile/Responsive_design" title="/en/Web_development/Mobile/Responsive design">Responsive design</a></li> + <li><a class="vt-p" href="/en/Web_development/Mobile/A_hybrid_approach" title="A New Approach to Web Applications (external)">A hybrid approach</a></li> +</ul> diff --git a/files/ar/zones/index.html b/files/ar/zones/index.html new file mode 100644 index 0000000000..38887a0c12 --- /dev/null +++ b/files/ar/zones/index.html @@ -0,0 +1,70 @@ +--- +title: Zones +slug: Zones +translation_of: Zones +--- +<p>MDN zones provide you one-stop access to information about specific topic areas or products. Here's a list of all the zones available to you.</p> +<div class="row topicpage-table"> + <div class="section"> + <h2 id="Web_and_app_development">Web and app development</h2> + <dl> + <dt> + <a href="/en-US/Apps">App Center</a></dt> + <dd> + Learn how to create open Web apps—rich experiences that run across multiple devices and form factors—using the same Web standards and open technologies you already know.</dd> + <dt> + <a href="/en-US/docs/Learn">Learning Area</a></dt> + <dd> + This zone is all about articles to help newcomers to Web development get started in this exciting new world.</dd> + <dt> + <a href="/en-US/docs/Tools">Developer tools</a></dt> + <dd> + Learn how to use the Firefox developer tools to debug, test, and optimize your Web apps and sites.</dd> + <dt> + <a href="/en-US/Marketplace">Firefox Marketplace</a></dt> + <dd> + An open, non-proprietary online marketplace for Web applications built using HTML, CSS, and JavaScript. Submit apps to the Firefox Marketplace or use the code to build your own marketplace.</dd> + <dt> + <a href="/en-US/docs/Games">Game development</a></dt> + <dd> + Learn how to develop games for the Web, how to port existing games to Web technologies, and how to turn your games into Web apps.</dd> + </dl> + </div> + <div class="section"> + <h2 id="Products" name="Products">Products and projects</h2> + <dl> + <dt> + <a href="/en-US/docs/Emscripten">Emscripten</a></dt> + <dd> + An LLVM to JavaScript compiler; this lets you compile, for example, C++ code into JavaScript code which can be run in any Web browser.</dd> + <dt> + <a href="/en-US/docs/L20n">L20n</a></dt> + <dd> + A JavaScript localization framework for unleashing your natural language's power with simple code.</dd> + <dt> + <a href="/en-US/docs/Project:MDN">The MDN project</a></dt> + <dd> + The Mozilla Developer Network (this site) relies on its community of readers and contributors to grow and improve. You can learn here how to help use, contribute to, and build the code behind MDN!</dd> + <dt> + <a href="/en-US/Persona">Persona</a></dt> + <dd> + A new simple, privacy-sensitive single-sign in system developed by Mozilla which lets users log into your Web site using their email address, freeing you from password management.</dd> + </dl> + <h2 id="Mozilla_technologies">Mozilla technologies</h2> + <dl> + <dt> + <a href="/en-US/Add-ons">Add-ons</a></dt> + <dd> + Learn how to build and install extensions, themes, and plug-ins for Mozilla-based software, including the popular Firefox Web browser.</dd> + <dt> + <a href="/en-US/Firefox">Firefox</a></dt> + <dd> + Learn all about Firefox, from how to build and revise it to how to build add-ons specifically for it.</dd> + <dt> + <a href="/en-US/Firefox_OS">Firefox OS</a></dt> + <dd> + A new mobile operating system developed by Mozilla which lets users install and run open Web applications created using HTML, CSS, and JavaScript.</dd> + </dl> + </div> +</div> +<p> </p> diff --git a/files/ar/أحداث_مكتبة_jquery/index.html b/files/ar/أحداث_مكتبة_jquery/index.html new file mode 100644 index 0000000000..bd2307f8ce --- /dev/null +++ b/files/ar/أحداث_مكتبة_jquery/index.html @@ -0,0 +1,63 @@ +--- +title: أحداث مكتبة jQuery +slug: أحداث_مكتبة_jQuery +--- +<h1 id="تعريف">تعريف</h1> +<p>أحداث مكتبة jQuery تقوم بربط الدوال مع عنصر معين.</p> +<p>يمكن أخذ مثال عن أحداث مكتبة jQuery كعندما يضغط المستخدم على زر أو يقوم بإدخال نص أو يحرك مؤشر الفأرة فوق منطقة محددة في الصفحة.</p> +<h1 id="أحداث_مكتبة_jQuery">أحداث مكتبة jQuery</h1> +<h2 id="حدث_blur()">حدث blur()</h2> +<p>يقوم الحدث blur() بمعالجة دالة ما عندما يفقد مربع إدخال النصوص المحدد إمكانيته على الإدخال,مثال:</p> +<pre dir="ltr"><script src="http://code.jquery.com/jquery-latest.js"></script> +<script> +$(document).ready(function() { +$("#text").blur(function() { +$(this).css("background-color","orange"); +}); +}); +</script> +<input type="text" id="text"> +</pre> +<p>إنتقل إلى الرابط التالي لتشاهد كيف يعمل هذا الحدث: <a href="http://jsbin.com/tibequrucelu/1/edit">http://jsbin.com/tibequrucelu/1/edit</a></p> +<hr> +<h2 id="حدث_change()">حدث change()</h2> +<p>يقوم الحدث change() بمعالجة دالة ما عندما يتغير محتوى مربع إدخال النصوص,مثال:</p> +<pre dir="ltr"><script src="http://code.jquery.com/jquery-latest.js"></script> +<script> +$(document).ready(function() { +$("#text").change(function() { +alert("<div dir="rtl">لقد تغير محتوى النص</div>"); +}); +}); +</script> +<input type="text" id="text"> +</pre> +<p>انتقل إلى الرابط التالي لتشاهد كيف يعمل هذا الحدث: <a href="http://jsbin.com/getigucoqeba/1/edit">http://jsbin.com/getigucoqeba/1/edit</a></p> +<hr> +<h2 id="حدث_click()">حدث click()</h2> +<p>يقوم حدث click() بمعالجة دالة ما عندما يتم الضغط بزر الفأرة الأيسر على العنصر المحدد,مثال:</p> +<pre dir="ltr"><script src="http://code.jquery.com/jquery-latest.js"></script> +<script> +$(document).ready(function() { +$("#button").click(function() { +alert("<div dir="rtl">لقد تم ضغط الزر</div>"); +}); +}); +</script> +<input type="button" id="button" value="<div dir="rtl">اضغط هنا</div>"> +</pre> +<p>انتقل إلى الرابط التالي لتشاهد كيف يعمل هذا الحدث: <a href="http://jsbin.com/radepuyuwexe/1/edit">http://jsbin.com/radepuyuwexe/1/edit</a></p> +<hr> +<h2 id="حدث_dblclick()">حدث dblclick()</h2> +<p>يقوم حدث dblclick() بمعالجة دالة ما عندما يتم الضغط بشكل مزدوج بإستخدام زر الفأرة الأيسر على العنصر المحدد,مثال:</p> +<pre><script src="http://code.jquery.com/jquery-latest.js"></script> +<script> +$(document).ready(function() { +$("#button").dblclick(function() { +alert("<div dir="rtl">لقد تم ضغط الزر بشكل مزدوج</div>"); +}); +}); +</script> +<input type="button" id="button" value="<div dir="rtl">اضغط هنا</div>"> +</pre> +<p>انتقل إلى الرابط التالي لتشاهد كيف يعمل هذا الحدث: <a href="http://jsbin.com/delazakoloye/1/edit">http://jsbin.com/delazakoloye/1/edit</a></p> diff --git a/files/ar/مكتبة_جي_كويري/index.html b/files/ar/مكتبة_جي_كويري/index.html new file mode 100644 index 0000000000..52d56021d4 --- /dev/null +++ b/files/ar/مكتبة_جي_كويري/index.html @@ -0,0 +1,31 @@ +--- +title: مكتبة jQuery +slug: مكتبة_جي_كويري +--- +<h2 id="مقدمة">مقدمة</h2> +<p>jQuery هي عبارة عن مكتبة مكتوبة بلغة JavaScript.</p> +<p>تقوم مكتبة jQuery بإزالة التعقيدات من برمجة JavaScript.</p> +<h2 id="أهمية_مكتبة_jQuery">أهمية مكتبة jQuery</h2> +<p>تقوم مكتبة jQuery بإختصار شيفرات JavaScript الطويلة.</p> +<p>تخيل أنه عوضاً عن كتابة:</p> +<pre dir="ltr">document.getElementById(Element_Id); +</pre> +<p>يمكنك الإكتفاء بكتابة:</p> +<pre dir="ltr">$(Element_Id) +</pre> +<h2 id="مكونات_مكتبة_jQuery">مكونات مكتبة jQuery</h2> +<p>تتألف مكتبة jQuery من المكونات التالية:</p> +<p>النواة:</p> +<p>بما أن مكتبة jQuery مكتوبة بشكل كامل بلغة JavaScript,فإن نواتها مكونة من لغة JavaScript.</p> +<p>الأحداث:</p> +<p>تتمتع مكتبة jQuery بمجموعة ضخمة من الأحداث التي تمكن الشيفرة من الإشتغال بمجرد إطلاق الحدث,قد يكون الحدث ضغطة زر أو تغيير المحتوى أو...</p> +<p>التأثيرات:</p> +<p>تتمتع مكتبة jQuery بمجموعة كبيرة من التأثيرات كالإنزلاق و الإختفاء و التحريك...</p> +<p>الأجاكس:</p> +<p>تتمتع مكتبة jQuery بقدرة على تقليص كود الأجاكس مما يوفر الكثير من الوقت في كتابته.</p> +<h2 id="مميزات_مكتبة_jQuery">مميزات مكتبة jQuery</h2> +<p>تتمتع مكتبة jQuery بمجموعة كبيرة من المميزات مثل:الحجم الصغير,تقليص حجوم شيفرات JavaScript,مجانية و مفتوحة المصدر.</p> +<h2 id="مشاكل_مكتبة_jQuery">مشاكل مكتبة jQuery</h2> +<p>لا تدعم مكتبة jQuery المتصفحات القديمة و لا تعمل جيداً مع الإتصالات البطيئة.</p> +<h2 id="روابط_ذات_فائدة">روابط ذات فائدة:</h2> +<p><a href="http://www.jquery.com">الموقع الرسمي</a></p> diff --git a/files/ar/واصفة_spellcheck_الجديدة_في_html5/index.html b/files/ar/واصفة_spellcheck_الجديدة_في_html5/index.html new file mode 100644 index 0000000000..2e2626d616 --- /dev/null +++ b/files/ar/واصفة_spellcheck_الجديدة_في_html5/index.html @@ -0,0 +1,65 @@ +--- +title: واصفة SpellCheck الجديدة في HTML5 +slug: واصفة_SpellCheck_الجديدة_في_HTML5 +--- +<div dir="rtl"> + <h1 id="مقدمة.">مقدمة.</h1> + <p>تستخدم واصفة SpellCheck في التحقق من أن العنصر الذي يحتوي هذه الواصفة خالي من الأخطاء الإملائية و النحوية.</p> + <h1 id="الإستعمال.">الإستعمال.</h1> + <p>تستعمل واصفة SpellCheck لتحديد إذا ما كان مصحح الأخطاء الإملائية للعنصر فعال أو لا.</p> + <p>يمكن إستعمالها في الفقرات القابلة للتحرير,مربعات إدخال النصوص,أو مربعات الحوار.</p> + <h1 id="التوافق_مع_العناصر.">التوافق مع العناصر.</h1> + <p>إن واصفة SpellCheck متوافقة مع كافة العناصر,و يمكن إضافتها إلى أي عنصر داخل معايير HTML.</p> + <div class="note"> + إن واصفة SpellCheck جديدة في HTML5.</div> + <h1 id="التأثير_الظاهري_للواصفة_على_الصفحة.">التأثير الظاهري للواصفة على الصفحة.</h1> + <p>إن واصفة SpellCheck سوف تتحقق من محتوى العنصر,إذا كان المحتوى خالياً من الأخطاء الإملائية و الهجائية,لن يطرأ أي تغيير في الصفحة,و إذا وجد خطأ هجائي أو نحوي,فإن الواصفة ستقوم بوضع خط أحمر تحت المحتوى.</p> + <h1 id="الشكل_العام_لصيغة_الواصفة.">الشكل العام لصيغة الواصفة.</h1> + <pre dir="ltr"><p spellcheck="true">This Is A Paragraph</p> + +<p spellcheck="false">This Is Another Paragraph</p> +</pre> + <p>إذا أخذت الواصفة القيمة المنطقية true,فإن مصحح الأخطاء الهجائية للعنصر سيعمل,و إذا أخذت الواصفة القيمة المنطقية false,فإن مصحح الأخطاء الهجائية للعنصر لن يعمل,و في هذه الحالة لا يوجد داعي لتضمين هذه الواصفة في العنصر</p> + <div class="note"> + لا تدعم واصفة SpellCheck كل اللغات,من أمثلة اللغات غير المدعومة:اللغة العربية.</div> + <h1 id="أمثلة">أمثلة:</h1> + <p>في المثال التالي,سوف تتحقق واصفة SpellCheck من وجود أخطاء إملائية في مربع إدخال النصوص.</p> + <p>هذه هي الشيفرة:</p> + <pre dir="ltr"><textarea rows="10" cols="40" spellcheck="true"></textarea> +</pre> + <p>الآن شاهد في الأسفل كيف أن الكلمات التي تحتوي أخطاء هجائية سيظهر تحتها خط أحمر:</p> + <div dir="ltr"> + <textarea>you kan olways use tha dir attribut to sepecife tha element direkchon +</textarea></div> + <h1 id="التوافق_مع_المتصفحات.">التوافق مع المتصفحات.</h1> + <table class="standard-table"> + <caption> + دعم المتصفحات لواصفة SpellCheck</caption> + <tbody> + <tr> + <td>Internet Explorer 10</td> + <td>Google Chrome</td> + <td>Mozzila Firefox</td> + <td>Opera</td> + <td>Safari</td> + </tr> + <tr> + <td>مدعومة</td> + <td>مدعومة</td> + <td>مدعومة</td> + <td>مدعومة</td> + <td>مدعومة</td> + </tr> + </tbody> + </table> + <h1 id="إستعمال_الواصفة_في_JavaScript.">إستعمال الواصفة في JavaScript.</h1> + <p>يمكن إستخدام هذه الواصفة في نصوص JavaScript.</p> + <p>الصيغة العامة لتشغيل أو إيقاف تشغيل واصفة SpellCheck بإستخدام JavaScript:</p> + <pre dir="ltr">document.getElementById(Some_Id).spellCheck=true; //تشغيل مصحح الأخطاء الهجائية للعنصر المحدد. +document.getElementById(Some_Id).spellCheck=false; //إيقاف تشغيل مصحح الأخطاء الهجائية للعنصر المحدد. +</pre> + <h1 id="توافق_الواصفة_SpellCheck_مع_الكائنات_الأخرى_في_JavaScript">توافق الواصفة SpellCheck مع الكائنات الأخرى في JavaScript</h1> + <p>بما أن الواصفة SpellCheck في JavaScript هي من النوع العام,فهي متوافقة مع كل الكائنات الأخرى في JavaScript.</p> + <h1 id="روابط_ذات_صلة_بالموضوع">روابط ذات صلة بالموضوع:</h1> + <a href="http://www.w3.org/TR/html5/editing.html#attr-spellcheck">تخصيص واصفة SpellCheck في معايير منظمة W3C.</a></div> +<p> </p> diff --git a/files/ar/واصفة_العنوان_في_html/index.html b/files/ar/واصفة_العنوان_في_html/index.html new file mode 100644 index 0000000000..5e2d92d2a0 --- /dev/null +++ b/files/ar/واصفة_العنوان_في_html/index.html @@ -0,0 +1,61 @@ +--- +title: واصفة العنوان في HTML +slug: واصفة_العنوان_في_HTML +--- +<div dir="rtl"> + <h1 id="مقدمة.">مقدمة.</h1> + <p>تستخدم واصفة العنوان في إظهار معلومات إضافية حول عنصر ما.</p> + <h1 id="الإستعمال.">الإستعمال.</h1> + <p>يمكن إستخدام واصفة العنوان في إضافة توضيحات حول عنصر ما.</p> + <h1 id="التوافق_مع_العناصر.">التوافق مع العناصر.</h1> + <p>إن واصفة العنوان متوافقة مع كافة العناصر في HTML.</p> + <h1 id="التأثير_الظاهري_للواصفة_على_الصفحة.">التأثير الظاهري للواصفة على الصفحة.</h1> + <p>معظم المتصفحات سوف تعرض هذه الأداة كمربع تلميحات يظهر عندما يتم تحريك مؤشر الفأرة فوق العنصر.</p> + <h1 id="الشكل_العام_لصيغة_الواصفة.">الشكل العام لصيغة الواصفة.</h1> + <div dir="ltr"> + <pre><element title="معلومات يتم إظهارها..."> +</pre> + </div> + <h1 id="أمثلة">أمثلة:</h1> + <p>في المثال التالي,عندما يقوم المستخدم بتحريك مؤشر الفأرة فوق الرابط,سيظهر له تلميح.</p> + <p>هذه هي الشيفرة:</p> + <div dir="ltr"> + <pre><a href="http://developer.mozzila.org" title="زوروا موقع شبكة مطوري موزيلا">Mozzila Developer Network</a> +</pre> + </div> + <p>الآن حرك مؤشر الفأرة فوق الرابط أدناه و شاهد ظهور مربع تلميح يحتوي الكتابة"زوروا موقع شبكة مطوري موزيلا.":</p> + <a href="http://developer.mozzila.org" title="زوروا موقع شبكة مطوري موزيلا">Mozzila Developer Network</a> + <h1 id="التوافق_مع_المتصفحات.">التوافق مع المتصفحات.</h1> +</div> +<table class="standard-table"> + <caption> + دعم المتصفحات لواصفة title</caption> + <tbody> + <tr> + <td>Internet Explorer</td> + <td>Google Chrome</td> + <td>Mozzila Firefox</td> + <td>Opera</td> + <td>Safari</td> + </tr> + <tr> + <td>مدعومة</td> + <td>مدعومة</td> + <td>مدعومة</td> + <td>مدعومة</td> + <td>مدعومة</td> + </tr> + </tbody> +</table> +<h1 id="إستعمال_الواصفة_في_JavaScript.">إستعمال الواصفة في JavaScript.</h1> +<p>يمكن إستخدام هذه الواصفة في JavaScript.</p> +<p>الصيغة العامة لإستخدام واصفة العنوان في JavaScript:</p> +<div dir="ltr"> +<pre dir="ltr">document.getElementById(Some_Id).title="Your Text Goes Here..."; //تعيين نص ما ليتم عرضه. +document.getElementById(Some_Id).title=null; //عدم عرض أي نص. +</pre> +</div> +<h1 id="توافق_واصفة_العنوان_مع_الكائنات_الأخرى_في_JavaScript.">توافق واصفة العنوان مع الكائنات الأخرى في JavaScript.</h1> +<p>بما أن واصفة العنوان من النوع العام,فهي متوافقة مع جميع كائنات JavaScript.</p> +<h1 id="روابط_ذات_صلة_بالموضوع">روابط ذات صلة بالموضوع:</h1> +<a href="http://www.w3.org/TR/WCAG20-TECHS/H33.html">تخصيص واصفة العنوان في معايير منظمة W3C.</a> |